在应用html2canvas.js发现一个问题,当你截图区域有背景图片的状况下:
html2canvas对如下写法清晰
<img src="" alt="" width="100%" height="100%">
html2canvas对如下写法含糊
<div class="bgImg">...</div> bgImg{ width : 200px; height : 200px; background : url('../img/bgImg.jpg'); background-size: 100% 100%;}
至于为什么会这样,我也不晓得。版本为html2canvas 1.0.0-rc.5
附上另存为事件代码。
html2canvas(document.querySelector("#yourId"), { dpi: 96 }).then(canvas => { var imgDataUrl = canvas.toDataURL("image/jpeg"); downLoadFile("某某文件", imgDataUrl);})function downLoadFile(fileName, canvasImg) { var a = document.createElement('a') a.href = canvasImg; a.download = fileName let event = document.createEvent("MouseEvents") event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null) a.dispatchEvent(event)}