vue-html2canvas插件

移动端项目需要生成海报，找了挺久的插件，还是选择了html2canvas，不用画canvas，直接写html生成canvas，简单，且强大，最后还是跪在图片跨域上，差点起不来。虽然这个插件图片跨域网上已经有很多答案，但试过都不行，好在各种查资料总算解决了，记录一下

项目情况说明

在商品详情页面中生成海报：

1. 商品详情有商品主图(以下简称：商品主图)
2. 生成canvas的html中的海报图片使用的是第一张商品主图(以下简称：海报主图)

问题产生过程

1. 主图是网络图片，html2canvas调用发生跨域报错
2. 给海报主图添加crossOrigin='anonymous'属性，发现连图片都不显示了
3. 给海报主图url后添加时间戳，取消crossOrigin='anonymous'属性，结果调用html2canvas，还是发生跨域
4. 如果可视区域移过了html2canvas需要截图的节点区域，会出现截不全，或者截图空白
5. 第一次截图跨域的图片还是一片空白，打印仍然是这图片报错，第二次，第三次....正常生成海报不会报错

问题解决过程

1、让后台直接去配置运行图片所在的域名允许移动端发起的跨域
2、查阅资料，发现添加crossOrigin='anonymous'属性是没错的，错在海报主图使用的是缓存中的图片(商品主图已经加载过了)
3、给海报主图url后添加了时间戳，完美解决
4、触发生成之前将页面滚动到需要截图的节点上面
5、打开页面自己先主动调用一次生成，之后用户调用生成时将生成海报链接存起来，之后再点击只取生成的链接就行

代码

<!-- 轮播 -->
<Swiper :data="dataInfo.pics" :interval="5000" :height="225"/>

<!-- 海报主图部分 -->
<div ref="poster" id="poster">
    ...
    <div class="poster-img">
        <img :src="dataInfo.pics[0].url | getNewUrl" crossOrigin='anonymous'>
    </div>
    ...
</div>

...
// 过滤器
filters: {
    getNewUrl(url) {
      return `${url}?v=${new Date().getTime()}`
    },
},
...

效果展示

效果展示.gif