9

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

 2 years ago
source link: https://segmentfault.com/a/1190000040823707
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

发布于 10 月 17 日

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK