html2canvas截图另存图片模糊问题解决办法
format2018 -在使用html2canvas.js发现一个问题,当你截图区域有背景图片的情况下:
html2canvas对如下写法清晰
<img src="" alt="" width="100%" height="100%">
html2canvas对如下写法模糊
<div >...</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)
}
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。