html2canvas生成图片且自动保存至本地

业务背景

移动端上

• h5页面动态生成希望长按能够保存至本地
• 实现方式：在请求api拿到数据页面正确渲染后调用html2canvas，生成base64的图片，存放到目标元素上，
• 这个目标元素的层级一定是较高的，否则长按屏幕获取不到该图片

pc上

• 希望动态生成A4的宣传单，这时也可以用到html2canvas
• 动态创建a标签，属性设置为downlaod可以自动实现下载到本地的功能
• 前端实现A4页面的尺寸设为

@page { size: A4; margin: 0; } .wrapper{ width: 210mm; min-height: 297mm; }

直接上代码

    <!--页面内容-->
    <div class='share_report_canvas_target>
    </div>
    
    <!--生成的图片存放区-->
    <!--注意要加v-if判断条件-->
    <div class="share_report_canvas_img">
	<img class="canvag_img" v-if="canvasImg" :src="canvasImg"  alt="">
    </div>

    import html2canvas from 'html2canvas'
    
    export default{
        data(){
            return{
                canvasImg:''
            }
        },
        mounted(){
            this.convert2canvas()
        },
        methods:{
            convert2canvas() {
                let shareContent = document.getElementsByClassName('share_report_canvas_target')[0];
                let opts = {
                  useCORS:true
                };
                html2canvas(shareContent, opts).then((canvas) =>{
                   let imgSrc = canvas.toDataURL('image/png')
                   this.canvasImg = imgSrc
                });
                
                <!--2秒后创建a标签，创建点击事件，自动保存-->
                <!--这种模式只有在pc上才有效-->
                setTimeout(()=>{this.downloadImg('fff')},2000)
          },
          downloadImg(name) {
            let a = document.createElement('a') // 生成一个a元素
            let event = new MouseEvent('click') //创建一个单击事件
            a.download = name || 'photo' // 设置图片名称
            a.href= this.canvasImg
            a.dispatchEvent(event) //触发a的点击事件
          }
        }
    }
    

采坑

• 基础配置：useCORS:true，解决图片跨域加载的问题
• • 在移动端上生成的canvasImg赋值给img时始终无效，但用了useCORS:true，img标签就不要再用allowTaint

  解决：给img加上 v-if='canvasImg'：存在canvasImg时才赋值，其实最终的目的是期望生成图片时能够重新渲染赋值，避免图片在浏览器上有缓存，无法重新读取加载

• （重要）切记allowTaint和useCORS这两个参数不能共存
• css3的很多属性html2canvas是不支持的！支持这些样式属性