app-vue + html2canvas + renderjs 页面保存图片模糊问题分享

不废话，上代码

<view id="inviter_hb" class="bg-img">  
        <img class="bg" :src="bgImg" mode="scaleToFill"></img>  
        <view class="qr-box">  
          <img class="qr-img" :src="qrImg" mode="scaleToFill"></img>  
        </view>  
        <text class="inviter-code">邀请码：<text>{{inviteCode}}</text></text>  
</view>

以下是renderjs 代码，可以在此操作dom

<script module="html2canvas" lang="renderjs">  
  // import html2canvas from '@/common/html2canvas.min.js'  
  export default {  
    mounted() {  
      if (!window.html2canvas) {  
        // 动态引入较大类库避免影响页面展示  
        const script = document.createElement('script')  
        // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算  
        script.src = 'static/js/html2canvas.min.js'  
        document.head.appendChild(script)  
      }  
    },  
    methods: {  
      createInviter(event, ownerInstance) {  
        ownerInstance.callMethod('showLoading')  
        const inviterDom = document.getElementById("inviter_hb")  
        html2canvas(inviterDom, {  
          width: inviterDom.scrollWidth,  
          height: inviterDom.scrollHeight,  
          allowTaint: true,  
          useCORS: true,  
          scale: 3,  
          dpi: 300  
        }).then(canvas => {  
          ownerInstance.callMethod('renderFinish', canvas.toDataURL('image/jpeg', 1.0))  
        }).catch(error => {  
          console.log(error)  
          ownerInstance.callMethod('hideLoading')  
        })  
      }  
    }  
  }  
</script>

重要：页面中图片不能用background-image设置，也不能用image标签设置，需要用img，否则生成的图片还是模糊