vue html2canvas 图片模糊问题

话不多说直接上代码

首先确定好要被截图的div ,注意里面放 img 不要用 div  的 background-image  不然截图模糊的问题不能用以下代码解决

<div id="imageWrapper">
    // 这里是要被截图的div 
    // 确保这里都是image，不要用 div 的 background-image
    // 不然截图模糊的问题无法用以下代码解决
    // 多张图片的定位自己用 position 解决
    <img src="xxxxxxx" />
    <img src="xxxxxxx" />
</div>  
<div id="canvasDiv" >
    <img style="width:100%;height:100%;" class="real_pic" :src="dataURL" />
</div>

我这里参考了网上的代码，先放大，再缩小

toImage() {
      var shareContent = document.getElementById('imageWrapper');//需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      var scale = window.devicePixelRatio; //定义任意放大倍数 支持小数
      // var scale = 2; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale,scale); //获取context,设置scale

      var opts = {
          // dpi: window.devicePixelRatio * 2,
          scale: scale , // 添加的scale 参数
          useCORS: true,
          canvas:canvas, //自定义 canvas
          logging: true, //日志开关
          // width: width, //dom 原始宽度
          // height: height, //dom 原始高度
          // backgroundColor: 'null',
      };
      var self = this;
      this.$html2canvas(shareContent, opts).then(function (canvas) {
        
        var IMAGE_URL = canvas.toDataURL("image/png");
        self.dataURL = IMAGE_URL;
      })

    },

总结：起初我用的 background-img ,不然我怎样设置，截图出来都是模糊的，后来也是google了一下，才发现了这个问题，div不要用背景图，要放img进去。耗了不少时间，不过总算是解决了