html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决
注意
作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题;
背景图必须放在img里面里面,通过定位处理成和背景一样,否则会可能出现模糊的问题
html
<div class="img-box">
<div class="img-pic">
<img :src="backgroundUrl" alt="" />
</div>
<div class="info" 测试 </div>
</div>
css
.img-pic {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
img {
width: 100%;
height: 100%;
}
}
JavaScript
var dom = document.querySelector('.img-box'); // 获取需要截图的元素
const canvas = html2canvas(dom, {
scale: 1.2,
useCORS: true,
allowTaint: false
});
console.log(canvas.toDataURL()) // 打印出来的为base64格式