利用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();  //成功獲取
    };                
}

 

 

 

參考：http://segmentfault.com/q/1010000000768672/a-1020000002436172