利用canvas 导出图片

######1、使用canvas绘制图片,并将图片导出。
在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容。因为canvas不允许使用toDataURL来获取异域图片

原因:将不同域下图片绘制到canvas上时,不能使用toDataURL来获取imgdata,因为 canvas 使用了没有权限的跨域图片在使用canvas.toDataURL()等数据导出函数的时候会报错! img.crossOrigin = “Anonymous” ,它开启了本地的跨域允许。当然服务器存储那边也要开放相应的权限才行,如果是设置了防盗链的图片在服务端就没有相应的权限的话你本地端开启了权限也是没有用的。

function downloadImg(){
       var a = document.createElement('a');
       a.href = canvas.toDataURL('image/png'); //下载图片
       a.download = '未命名.png'; console.log(a);
       a.click();
   } 
    function drawImg(ctx){
        var img2 = new Image();
        img2.setAttribute('crossOrigin','anonymous');
        img2.src = 'img/1.png';
        img2.onload = function (){
            ctx.drawImage(this,0,0);

        }
    }

绘制跨域图片:

创建一张图片,设置其跨域属性crossOrigin,将这个临时图片绘制到canvas上

for(var i=0,len=dyns.length;i<len;i++){
    var dynDiv = dyns[i].getLayerContainer();
    var dynimg = dynDiv.getElementsByTagName('img')[0];
    //dynimg.setAttribute('crossOrigin', 'anonymous');
    //ctx.drawImage(dynimg,0,0,canvas.width,canvas.height); 
    // canvas.toDataURL();  //出错 直接绘制不同域下的图片,无法通过toDataURL获取图片信息

    // 重新创建一张图片,设置其跨域属性crossOrigin,将这个临时图片绘制到canvas上,则可以使用toDataURL方法获取其图片内容数据,在生成图片
    var img = new Image();
    img.setAttribute('crossOrigin','anonymous');
    img.src = dynimg.src; 
    img.onload =function (){
        ctx.drawImage(this,0,0,canvas.width,canvas.height);
        canvas.toDataURL();  //成功获取
    };                
}

   转载规则


《利用canvas 导出图片》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
关于缓存问题:js清除缓存 关于缓存问题:js清除缓存
css并行加载,js串行加载(会阻塞页面) 清除缓存的问题:1、一般手动清除,浏览器缓存 2、js代码清除缓存 js文件: 路径后面加一个随机数如下: <script src="lib/gMarker.js?random=1202
2015-11-23
下一篇 
HTML5 Audio/Video 标签,属性,方法,事件汇总 HTML5 Audio/Video 标签,属性,方法,事件汇总
#####<audio> 标签属性: src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audio id="media" src="http://
2015-11-11
  目录