vue踩坑 html2canvas

html

 

 

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) // 完成后移除

                })

        },