解决 html2canvas 白边问题,html2canvas 生成图片并下载，踩坑 html2canvas

html

  <div ref="imageWrapper" class="iswap"  id="imageWrapper">
 		 <!--这里是省略的html内容-->
  </div>

css

  #imageWrapper{
        width: 340px;
        height: 480px;
        overflow: visible !important;
    }

js，由于canvas在绘制过程中

  async down(){
                var _this = this
                window.scrollTo(0, 0);     //如果你的窗口滚动的话需要，
                let imageWrapper = document.getElementById('imageWrapper')
          await html2canvas(imageWrapper, {
                    x: imageWrapper.getBoundingClientRect().left + 13,     // 绘制的dom元素相对于视口的位置，由于获取的位置比原本往前偏离的所以要加上，你需要根据自己的视图去计算
                    y:imageWrapper.getBoundingClientRect().top,            // top没有偏离所以不用修改
                    backgroundColor: null,                            // 解决生成的图片有白边，只单单加和这个并没有效果
                    width:imageWrapper.offsetWidth - 15,                   // 因为多出的需要剪裁掉，
                    height:imageWrapper.offsetHeight,
                    useCORS: true,
                    scale:3,      // 因为生成图片会模糊，但是这个会使下载的图片变大，可以使用base64压缩
                    dpi: window.devicePixelRatio, //z
                }).then(canvas => {
                    const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
                    const finalImageSrc = "data:image/jpeg;base64," + img
                    // 添加a标签用于下载
                    const aElem = document.createElement('a')
                    document.body.appendChild(aElem)  // 223kb
                    aElem.href  = finalImageSrc 
                    // 图片下载名
                    aElem.download = "erwei.jpg"
                    aElem.click()
                    document.body.removeChild(aElem) // 完成后移除
                }) 
        },