移動端項目需要生成海報，找了挺久的插件，還是選擇了html2canvas，不用畫canvas，直接寫html生成canvas，簡單，且強大，最后還是跪在圖片跨域上，差點起不來。雖然這個插件圖片跨域網上已經有很多答案，但試過都不行，好在各種查資料總算解決了，記錄一下
項目情況說明
在商品詳情頁面中生成海報：
- 商品詳情有商品主圖(以下簡稱：商品主圖)
- 生成canvas的html中的海報圖片使用的是第一張商品主圖(以下簡稱：海報主圖)
問題產生過程
- 主圖是網絡圖片，html2canvas調用發生跨域報錯
- 給海報主圖添加crossOrigin='anonymous'屬性，發現連圖片都不顯示了
- 給海報主圖url后添加時間戳，取消crossOrigin='anonymous'屬性，結果調用html2canvas，還是發生跨域
- 如果可視區域移過了html2canvas需要截圖的節點區域，會出現截不全，或者截圖空白
- 第一次截圖跨域的圖片還是一片空白，打印仍然是這圖片報錯，第二次，第三次....正常生成海報不會報錯
問題解決過程
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
