使用html2canvas插件在ie11下无法生成图片

最新推荐文章于 2023-06-27 15:31:45 发布

原创最新推荐文章于 2023-06-27 15:31:45 发布 · 8.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ie 11 #html2canvas

平时总结专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在使用html2canvas插件时遇到的一个常见问题，即在IE11浏览器上无法正常生成图片。作者探讨了这个问题，并可能提供了针对IE11的解决方案。

使用html2canvas插件，将指定的html内容生成为图片，在别的浏览器上好好的，但是到了IE11就出了问题。

代码如下：

html2canvas($("#objId"),{
allowTaint:true,
useCORS:true,
onrendered:function(canvas){
    canvas.id = "mycanvas";
    var dataURL = canvas.toDataURL('image/png');
    var mine_type = "image/png";
    var save_link = document.createElement("a");
    save_link.setAttribute("class","hide");
    save_link.setAttribute("download","filename");
    save_link.href=dataUrl;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
    save_link.dispatchEvent(event);
   }
});

通过debugger发现dataURL是已经获取到的，但是生成图片的时候没有成功，在网上搜索之后进行了如下更改

html2canvas($("#objId"),{
allowTaint:true,
useCORS:true,
onrendered:function(canvas){
   if(isIE() || isIE11() || isEdge()){
        var blob = canvas.msToBlob();
        navigator.msSaveBlob(blob,filename);
        return;
    }
    canvas.id = "mycanvas";
    var dataURL = canvas.toDataURL('image/png');
    var mine_type = "image/png";
    var save_link = document.createElement("a");
    save_link.setAttribute("class","hide");
    save_link.setAttribute("download","filename");
    save_link.href=dataUrl;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
    save_link.dispatchEvent(event);
   }
});

对浏览器进行判断，若是ie或这edge，则使用toBlob()方法创造Blob对象，用以展示canvas上的图片。