vue-html2canvas插件图片跨域


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

项目情况说明

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

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

问题产生过程

  1. 主图是网络图片，html2canvas调用发生跨域报错
  2. 给海报主图添加crossOrigin='anonymous'属性，发现连图片都不显示了
  3. 给海报主图url后添加时间戳，取消crossOrigin='anonymous'属性，结果调用html2canvas，还是发生跨域

问题解决过程

1、让后台直接去配置运行图片所在的域名允许移动端发起的跨域
2、查阅资料，发现添加crossOrigin='anonymous'属性是没错的，错在海报主图使用的是缓存中的图片(商品主图已经加载过了)
3、给海报主图url后添加了时间戳，完美解决

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 轮播 -->
<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