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

1.根基用法：

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

<div> <h4>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,在这个网址终于找到了我想要的版本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="http://www.mamicode.com/‘+url+‘"/>‘)
} }) }

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="http://www.mamicode.com/‘+url+‘"/>‘)
} }) }

随后我就发明生成的图片一片空白，我画的图去哪儿了？是不是onrendered又不生效了，之后我又用了promise语法