html2canvas踩坑日记

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)
});
还搜索到了另外⼀种⽤法：
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,在这个⽹址终于找到了我想要的版本（之前⽤的官⽹的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~~~。