html2canvas清晰度问题处理

 

1.把https://github.com/eKoopmans/html2canvas/tree/develop/dist的html2canvas.js下载到本地，并引入到项目中：

index.html

<!-- 图片生成 -->
    <script src="./js/html2canvas.js"></script>

2.代码

productNewImage() {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        window.pageYOffset = 0;
        setTimeout(() => {
          this.show = true
          var getHeight = document.getElementsByClassName('product-box')[0].clientHeight;
          var width = document.getElementsByClassName('product-box')[0].offsetWidth; //dom宽
          var height = document.getElementsByClassName('product-box')[0].offsetHeight; //dom高
          // var scale = 4; //放大倍数
          html2canvas(this.$refs.imageWrapper, {
            allowTaint: true,
            taintTest: false,
            dpi: window.devicePixelRatio*96,
            width: width,
            heigth: height,
            logging:true,
            backgroundColor: null,
            y: getHeight,
            useCORS: true,
            foreignObjectRendering: true
          }).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png", 1.0)
            this.dataURL = dataURL;
          });
        }, 50);
      },