利用canvas 导出图片

发表于 | 分类于

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();  //成功获取
    };                
}