vue中html2canvas的使用

Posted 2023-03-28

参考技术A html2canvas： 将dom元素转为一张图片 

1，装包： npm install --save html2canvas

2，导入： import html2canvas from 'html2canvas';

3，如果该盒子里面有从后台请求回来的图片路径 可能会存在图片跨域情况

        img标签里加上 crossorigin='anonymous'

        html2canvas方法里 加上useCORS: true,

        如果再不行 就在图片路径后面加个时间戳 ：url+'?time='+new Date().valueOf()

```

toImage()

            window.pageYOffset = 0

            document.documentElement.scrollTop = 0

            document.body.scrollTop = 0

             html2canvas(this.$refs.qrcode,

                    useCORS:true,

                    windowWidth: document.body.scrollWidth,

                    windowHeight: document.body.scrollHeight,

                    x: document.getElementById('qrcode').offsetLeft,

                    y: document.getElementById('qrcode').offsetTop,

                    scale: 2,   

                ).then(canvas =>

                    let dataURL = canvas.toDataURL("image/png");

                    this.imgUrl = dataURL;

                    if(this.imgUrl)

                        this.show =true

                        this.loading.close();

                   

                ).catch(err =>

                    this.loading.close();

              );

        ,

```

4， html2canvas(要转成图片的元素，对象-最终图片的属性)

    useCORS： 表示允许跨域

   windowWidth,windowHeight,x,y,  是解决最终图片顶部或底部的空白区域

5， scale -- 清晰度