html2canvas截图另存图片模糊问题解决办法

在使用html2canvas.js发现一个问题,当你截图区域有背景图片的情况下:

html2canvas对如下写法清晰


html2canvas对如下写法模糊

...
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)
}

你可能感兴趣的:(html2canvas截图另存图片模糊问题解决办法)