使用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下无法生成图片
发布评论