html2canvas遇到cross-origin image的處理方式

 

前言

會寫這篇主要是在用html2canvas截圖時

遇到cors-origin的圖片會空白的問題

在google找答案的過程又遇到一堆版本問題

還有file storage的設定方式要另外處理

所以寫一篇來記錄一下解法

 

能夠使用外部圖片的必要條件

1. html2canvas的useCORS選項設定為true
2. File storage要做CORS設定(本篇以AWS S3為範例)
3. html2canvas版本要注意(有些版本就是不行)

以上三點全部要做到

才能成功的截到外部圖片

 

File storage設定

以AWS S3為例

進到Bucket的許可>CORS組態做設定

以下為對任何來源都開放(更多設定請看官方文件)

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

 

這一步設定好後

圖片就能從外部讀取

 

html2canvas版本

這部份是我處理最久的

因為上面兩部隨便google關鍵字大概都找的到解法

但我上面兩部做完了之後還是截不到外部的圖片

後來看了很多html2canvas在github上的issue(光cors的問題就三頁)

發現很多人在講版本的問題(簡單來說就是有的版本不能處理cross-origin image的問題)

後來也自己試過很多版本

最後成功截圖的是1.0.0-rc.3版