vue中html2canvas的使用

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 -- 清晰度

1、首先加载一个动画网站，加载之后解压。

2、其次在components下载vue3组件，将代码放进去，在需要的页面引用。

3、最后注册vue3组件，即可使用该组件。

---