html2canvas踩坑日記

近日要開發一個能將生成的二維碼另存為圖片的功能（該圖片呢，肯定不止一個二維碼，還包括背景、文字等其他元素），首先呢，就想到了html2canvas,隨便一百度就是各種踩坑日志，我也隨一下大流，記錄本人在開發過程中遇到的坑。

1.基本用法：

在html2canvas上找到了它的基本用法以及壓縮包

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

還搜索到了另外一種用法：http://caibaojian.com/html2canvas.html

html2canvas(document.body, {
  onrendered: function(canvas) {
    var url = canvas.toDataURL();//圖片地址
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});

坑1：

由於項目要兼容到ie8，前者還用到了promise,我想在ie里面不能完全兼容啊，所以當即就用后者來測試了一下，奇怪的是我的onrendered方法為什么不執行，看了一下html結構，好么，畫的canvas閃現了一下就沒了，沒了，什么情況，我有點懵，是不是因為我的壓縮包用得不對，然后我就去找另外版本的js,在這個網址終於找到了我想要的版本https://www.bootcdn.cn/html2canvas/ （之前用的官網的1.0.0-rc.5，換了0.5.0-beta4的版本），改了壓縮包之后，我的圖片愉快的被生成了。

坑2：

但是在ie10下還是出現了問題，說是promise未定義，那就想辦法讓它支持該語法唄，然后就搜到了引用bluebird.js可以使ie支持promise的語法，把該js用上之后終於不報錯了。

2.下載

html2canvas(document.getElementById('buildImg'), {
    onrendered: function(canvas) { 
        var url = canvas.toDataURL();    
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {                        
             var bstr = atob(url.split(',')[1]) //atob與blob都是支持ie10+ var n = bstr.length
             var u8arr = new Uint8Array(n)
             while (n--) {
                 u8arr[n] = bstr.charCodeAt(n)
             }
             var blob = new Blob([u8arr])
             window.navigator.msSaveOrOpenBlob(blob, '圖片下載.png');
                  return;
         }var a = document.createElement("a");
         a.href = url;
         a.download = "圖片下載";
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
    }
});

上面的代碼在谷歌與ie10都可以下載，但是ie9怎么辦呢，花了大半天時間也沒有想到解決辦法。然后業務又說想把下載做成可以選擇磁盤保存的方式，即模擬右鍵另存為。后面試了一下，在ie下是可以的（谷歌不行），但是需要圖片url,而生成的圖片是base64啊，並沒有鏈接，如果想轉成url鏈接應該還需要后端支持。想來想去太麻煩了，又與業務商量了下，要不先把圖片生成放在那里吧，然后自己手動去右鍵另存為，上面再給點提示，業務同意了，這里的坑算是過了，上面的方法舍棄。

//假裝外面有個請求：
if (data.type == "SUCCESS") {
    var url = 'data:image/png;base64,'+data.data.qrCode;                    
    $('#img').attr('src',url);
    $('.js-dialog').show();
    html2canvas(document.getElementById('buildImg'), {
        onrendered: function(canvas) {
　　　　 var url = canvas.toDataURL("image/png", 1.0); 
　　　　 $('#buildImg').html('<img src="'+url+'" width="100%;"/>')
 }
    })
}

3.圖片模糊

隨后又發現在谷歌上生成的圖片有點糊，看了網上一水的方法都是自定義canvas，那我就試試？

if (data.type == "SUCCESS") {
    var url = 'data:image/png;base64,'+data.data.qrCode;                    
    $('#img').attr('src',url);
    $('#copyLink').attr('data-clipboard-text',data.data.link);                    
    var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var scale = 1; canvas.width = 320 * scale; canvas.height = 480 * scale; canvas.getContext("2d").scale(scale, scale);  
    $('.js-dialog').show();
    html2canvas(document.getElementById('buildImg'), {
        canvas: canvas, //自定義 canvas
 scale: scale,
        width:320,
        height:480,
        useCORS: true,
　　　　 onrendered: function(canvas) {
　　　　 var url = canvas.toDataURL("image/png", 1.0); 
　　　　 $('#buildImg').html('<img src="'+url+'" width="100%;"/>')
 }
     })
}

隨后我就發現生成的圖片一片空白，我畫的圖去哪兒了？是不是onrendered又不生效了，之后我又用了promise語法

if (data.type == "SUCCESS") {
    var url = 'data:image/png;base64,'+data.data.qrCode;                    
    $('#img').attr('src',url);
    $('#copyLink').attr('data-clipboard-text',data.data.link);                    
    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d");
    var scale = 1; 
    canvas.width = 320 * scale;
    canvas.height = 480 * scale;                            
    canvas.getContext("2d").scale(scale, scale);  
    $('.js-dialog').show();
    html2canvas(document.getElementById('buildImg'), {
        canvas: canvas, //自定義 canvas
        scale: scale,
        width:320,
        height:480,
        useCORS: true,
     }).then(function(canvas){ var url = canvas.toDataURL("image/png", 1.0); $('#buildImg').html('<img src="'+url+'" width="100%;"/>') });
}

額額，還是不對，是不是我的壓縮包沒用對，然后又換成了官網上copy的版本1.0.0-rc.5。咦，好像可以了，圖片也清晰了。轉了一圈還是用了最開始的辦法，真想甩自己兩大巴子。

4.圖片偏移

雖然圖片清晰了，但是會有10-20px的橫向偏移，ie下不但橫向偏移還會縱向偏移，下面是解決辦法：

if (data.type == "SUCCESS") {
    var url = 'data:image/png;base64,'+data.data.qrCode;                    
    $('#img').attr('src',url);
    $('#copyLink').attr('data-clipboard-text',data.data.link);                    
    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d");
    var scale = 1; 
    canvas.width = 320 * scale;
    canvas.height = 480 * scale;                            
    canvas.getContext("2d").scale(scale, scale);                     
    if ((window.navigator && window.navigator.msSaveOrOpenBlob) || isIe){ context.translate(-10,-20); }else{ context.translate(-10,0); }
    $('.js-dialog').show();
    html2canvas(document.getElementById('buildImg'), {
        canvas: canvas, //自定義 canvas
        scale: scale,
        width:320,
        height:480,
        useCORS: true,
     }).then(function(canvas){
         var url = canvas.toDataURL("image/png", 1.0);
         $('#buildImg').html('<img src="'+url+'" width="100%;"/>')
     });
}

以上就是本人在開發過程中遇到的坑，已經能完美兼容ie9+。

happy ending~~~