canvas生成圖片踩坑指南

背景：公司業務需求，要實現分享海報的功能，結果遇到的坑太多了，填不完。記錄下來，方便下次查看。

H5生成圖片的原理是使用 canvas 的 toDataURL 方法生成 base64 圖片

直接用 canvas 繪圖佈局不夠方便，有一個很好用的庫 html2canvas

官網demo

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

跨域圖片能正常裁剪（圖片未轉化成base64），應該滿足三個條件：

1. img元素中設置crossorigin屬性
2. 圖片允許跨域，設置響應頭Access-Control-Allow-Origin
3. 使用js方式請求圖片資源, 需要避免使用緩存，設置url後加上時間戳，或者http頭設置Cache-Control爲no-cache

主要原因是：

1. 如果使用跨域的資源畫到canvas中，並且資源沒有使用CORS去請求，canvas會被認爲是被污染了, canvas可以正常展示，但是沒辦法使用toDataURL()或者toBlob()導出數據，見Allowing cross-origin use of images and canvas。 所以通過在img標籤上設置crossorigin，啓用CORS，屬性值爲anonymous，在CORS請求時不會發送認證信息,見HTML attribute: crossorigin。
2. 在啓用CORS請求跨域資源時，資源必須允許跨域，才能正常返回，最簡單的方式設置響應頭Access-Control-Allow-Origin
3. 圖片已經通過img標籤加載過，瀏覽器默認會緩存下來，下次使用js方式再去請求，直接返回緩存的圖片，如果緩存中的圖片不是通過CORS請求或者響應頭中不存在Access-Control-Allow-Origin，都會導致報錯。

參考：https://segmentfault.com/q/1010000008648867