关于javascript:html2canvas截图另存图片模糊问题解决办法

18次阅读

共计 699 个字符，预计需要花费 2 分钟才能阅读完成。

在应用 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)
}

正文完