html2canvas踩坑日记

近日要开发一个能将生成的二维码另存为图片的功能（该图片呢，肯定不止一个二维码，还包括背景、文字等其他元素），首先呢，就想到了html2canvas,随便一百度就是各种踩坑日志，我也随一下大流，记录本人在开发过程中遇到的坑。

1.基本用法：

在html2canvas上找到了它的基本用法以及压缩包

<div >
    <h4 >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~~~