使用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上的图片。

更多推荐

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