html2canvas将div保存为图片

作为职业的iOS开发，最近搞了一下将div保存为图片的前端js工作,毕竟老本行了。

$("#btnSave").on("click", function (event) {
    event.preventDefault();
    var userAgent = navigator.userAgent;
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
    html2canvas($('.clone_pic'), {
        allowTaint: true,
        taintTest: false,
        useCORS:true,//火狐浏览器添加项
        onrendered: function (canvas) {
            //ie 浏览器特殊保存方式
            if(isIE){
                var blob = canvas.msToBlob();
                window.navigator.msSaveBlob(blob,'img.png');
            } else {
                canvas.id = "mycanvas";
                //生成base64图片数据
                var dataUrl = canvas.toDataURL();
                var newImg = document.createElement("img");
                newImg.src = dataUrl;
                var a = $("<a></a>").attr("href", dataUrl).attr("download", "img.png");
                $("body").append(a);//火狐浏览器添加项
                a[0].click();
                a.remove();
            }
        }
    });
});

        div直接作为图片保存真的没有什么好的想法，在网上搜了一下，选择了html2canvas，第三方插件方便是方便，但是兼容性就不行啊，可能是本来就很菜吧，大家有什么好的推荐可以指导一下。

  前期做完，交上去不兼容火狐和ie浏览器啊，前端就是这样调试兼容性有点烦躁。网上各种搜索，各种查，我有点奇怪就我遇到了兼容性的问题么，根本找不到啊，在我一点一点的调试下慢慢完成了。下面说说踩过的坑：

 （1）火狐浏览器的  useCORS:true  这个不添加不行啊，网上其他的使用html2canvas只有allowTaint: true, taintTest: false,真的是难。

 （2）狐火浏览器的点击事件，我使用了网上的jquery的封装方法，使用原生js不好用，代码学也是一门玄学吧。而且必须增加 $("body").append(a); 不在body里面添加a标签获取不到a，也是有点奇怪。我还担心一直apend会不会影响，也管不了那么多了。

 （3）ie的兼容是真的恶心，ie10还可以，这电脑卸载ie8，重新装ie10就查了半天，缺失了升级包，大家要在官方提示网址都下载安装一下，不然升级不了ie10。

 （4）ie的html2canvas方法一直提示 

    SCRIPT5009: “Promise”未定义 

    html2canvas.js, 行592 字符5

  在网上看了半天出错原因，什么百度搜索，做的是稀烂，搜索出来的是笑话吗？看到大家也提问了，下面一对npm导入项目的，这是ios开发还是node 开发，我只个简单的html，是我太菜了你们没遇到吗，我还怀疑了我的能力一下。

  最后去bing的国际版搜索，真的是搬出大招了，找到了es6-promise.auto.js这个文件，大家可以去网上下载一份，记住，不要用在线地址！不要用在线地址！不要用在线地址！能下载就下载，不然我早解决了。在js引入就可以，直接解决什么es6不兼容es5问题，真的是强。

（5）最后在网上搜索到了ie下载文件的方法，不需要创建a标签，使用 Blob 构造函数直接在客户端上创建和操作 Blob（通常等效于一个文件），解决了问题，具体操作原理也没有深究。