自动生成的html触发vue,vue-html2canvas插件

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

项目情况说明

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

商品详情有商品主图(以下简称：商品主图)

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

问题产生过程

主图是网络图片，html2canvas调用发生跨域报错

给海报主图添加crossOrigin='anonymous'属性，发现连图片都不显示了

给海报主图url后添加时间戳，取消crossOrigin='anonymous'属性，结果调用html2canvas，还是发生跨域

如果可视区域移过了html2canvas需要截图的节点区域，会出现截不全，或者截图空白

第一次截图跨域的图片还是一片空白，打印仍然是这图片报错，第二次，第三次....正常生成海报不会报错

问题解决过程

1、让后台直接去配置运行图片所在的域名允许移动端发起的跨域

2、查阅资料，发现添加crossOrigin='anonymous'属性是没错的，错在海报主图使用的是缓存中的图片(商品主图已经加载过了)

3、给海报主图url后添加了时间戳，完美解决

4、触发生成之前将页面滚动到需要截图的节点上面

5、打开页面自己先主动调用一次生成，之后用户调用生成时将生成海报链接存起来，之后再点击只取生成的链接就行

代码

...

...

...

// 过滤器

filters: {

getNewUrl(url) {

return `${url}?v=${new Date().getTime()}`

},

},

...

效果展示

效果展示.gif