html2canvas踩坑记录

记h5页面转图片中遇到的问题

最近由于产品要求，h5页面在app中展现一个页面，分享到朋友圈是另一张动态组装的图片。记录一下踩坑的过程。
复制代码

代码

<template>
    <div id="demo">
      <img :src="url+'?'+new Date().getTime()" crossOrigin="anonymous">
    </div>
</template>
复制代码

data() {
    return {
        url: '',    // 跨域图片地址
        baseUrl: '' // 保存base64地址
    }
}
methods:{
    canvasToImg() {
    let option = {
        allowTaint: true,
        //useCORS: true
    }
        html2canvas(document.getElementById("demo"),option).then(canvas) => {
            document.body.appendChild(canvas)
            this.baseUrl = canvas.toDataURL(canvas) // 将canvas转化为base64图片
        })
    }
}
复制代码

遇到问题

html2canvas在截取h5页面的画面的时候，页面若是存在请求的跨域图片，html2canvas会截取不到。
    解决方法：
        一、allowTaint: true和useCORS:true,两种方式均可以解决跨域问题，两个有不一样的区别，使用allowTaint: true会对canvas形成污
        染，致使canvas.toDataURL()方法不能使用，解决方法就是将请求过来的图片先转化为base64图片，经过url放到image里面。
        二、useCORS:true,若是使用这个配置，须要在img标签里面添加上crossOrigin="anonymous"特性，而且须要给imgUrl加上随机的时间
        函数。须要注意的是，还须要在后端服务器设置access-control-allow-origin:*;容许资源跨域访问，前端并设置useCORL:true,才能作到图片保存
复制代码