html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决

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格式