html2canvas 【解决截图背景图不清晰、处理二维码logo截图不全问题】

作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题;
背景图必须放在img里面里面,通过定位处理成和背景一样,否则会可能出现模糊的问题

<style>
 .img-pic {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              img {
                width: 100%;
                height: 100%;
              }
            }
</style>
<div class="img-box">
         <div class="img-pic">
               <img :src="backgroundUrl" alt="" />
         </div>
        <div class="info" 测试 </div>
</div>
<script>

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

处理二维码logo截图不全问题

 解决方法：不能使用 transform: translate(-50%,-50%);属性，去除使用其他方式定位