vue项目内使用html2canvas进行截图并下载

近期要实现一个海报生成的功能，倒腾大半天最后使用了html2canvas实现，简单的记录下备忘

 环境：

vue + html2canvas

安装依赖：

npm install --save html2canvas

 

 使用 ：

html部分：

<div id="register">
    <h1>我的海报</h1>
    <img style='width:100px;height:100px' :src="imgSrc" alt="" srcset="">
 </div>

js部分：

 data(){

        return{
            imgSrc:'https://fs.51xnb.cn/89ef0aa2-3050-4dea-80e0-371500928aaf.jpg',
        }
    },
methods:{
        async createdImg(){
            let canvas = await html2canvas(document.querySelector("#register"),{
                dpi: window.devicePixelRatio * 2, // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题
                scale: 2, // 缩放
                allowTaint: true, // 是否使用图片跨域
                useCORS: true, // 是否使用图片跨域
                // y: window.scrollY // 根据滚动条来截取--主要用于截取某一个区域
            });
            // canvas参数为生成的canvas的dom节点，可以对其进行dom操作
            document.getElementById('register').appendChild(canvas)
            // 下载功能
            var save_url=canvas.toDataURL("image/png");
            // console.log(save_url)
            var a=document.createElement('a')
            document.body.appendChild(a)
            a.href=save_url
            a.download="我的canvas作品"
            a.click()
         
        },
},
created(){
        setTimeout(()=>{
           this.createdImg(); 
        },1000)
              
},

 

注意：

如若出现Tainted canvases may not be exported错误。这说明图片跨域问题，此时我们可以吧图片转成本地bsaeb4在进行下载等操作代码可修改如下：

 data(){

        return{
            imgSrc1:'https://fs.51xnb.cn/89ef0aa2-3050-4dea-80e0-371500928aaf.jpg',
            imgSrc:'',
        }
    },
methods:{
        getURLBase64(url) {
            return new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest()
            xhr.open('get', url, true)
            xhr.responseType = 'blob'
            xhr.onload = function() {
            if (this.status === 200) {
                var blob = this.response
                    var fileReader = new FileReader()
                    fileReader.onloadend = function(e) {
                          var result = e.target.result
                          resolve(result)
                    }
                    fileReader.readAsDataURL(blob)
                  }
                }
                  xhr.onerror = function() {
                  reject()
                }
                xhr.send()
              })
         }
        async createdImg(){
            let canvas = await html2canvas(document.querySelector("#register"),{
                dpi: window.devicePixelRatio * 2, // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题
                scale: 2, // 缩放
                allowTaint: true, // 是否使用图片跨域
                useCORS: true, // 是否使用图片跨域
                // y: window.scrollY // 根据滚动条来截取--主要用于截取某一个区域
            });
            // canvas参数为生成的canvas的dom节点，可以对其进行dom操作
            document.getElementById('register').appendChild(canvas)
            // 下载功能
            var save_url=canvas.toDataURL("image/png");
            // console.log(save_url)
            var a=document.createElement('a')
            document.body.appendChild(a)
            a.href=save_url
            a.download="我的canvas作品"
            a.click()
         
        },
},
created(){
        setTimeout(async ()=>{
            this.imgSrc = await this.getURLBase64(this.imgSrc1);
            setTimeout(()=>{//确保图片加载完成
                this.createdImg(); 
            },1000)
        },1000)
        
              
},