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%;}}
JavaScriptvar dom = document.querySelector('.img-box'); // 获取需要截图的元素const canvas = html2canvas(dom, {scale: 1.2,useCORS: true,allowTaint: false});console.log(canvas.toDataURL()) // 打印出来的为base64格式
