最近閒下來了，繼續處理rote的一個功能 bug，具體是將筆記生成分享圖下載。期間反復設置 cloudflare 的 CORS 設置，換了兩款 npm 模塊，反復折騰，測試，最後依然是一個不是很完美的狀態，這篇文章盤點一下期間遇到的坑，如果你也在實現類似的功能，可能這篇文章對你會比較有幫助，不然就當看個樂了 :@(裝大款)
首戰告負#
React 的 html 轉 image 算是一個挺常用的需求，有現成可用的插件html2canvas，和html-to-image，我最先使用的是 html2canvas ，起初使用還算順利，在筆記添加標籤後卻遇到了問題，標籤包含背景色，會出現文字背景網上偏移的現象
{rote.tags.map((tag: any, index: any) => {
return (
<span
className={` px-2 rounded-md ${themes[themeIndex].tagClass}`}
key={`tag_${index}`}
>
{tag}
</span>
);
})}
就是這段代碼，網頁中預覽沒什麼問題，canvas 生圖後就會出現文字背景色偏移的 bug。推測可能是 tailwindcss 不兼容？嘗試自定義類名，使用原生 css，無效。進行了其他多次嘗試，最終懷疑 bug 是 module 的，無奈去掉了背景色。
期間注意到了控制台報錯，圖片元素出現了跨域的問題，最終生成的圖片中 image 元素的位置處顯示為一片空白，好嘛，又是我們的老朋友 cors，嘗試將 cloudflare R2 的跨域設置改為"AllowedOrigins": ["*"]，報錯依然存在，後來翻閱 html2canvas 的文檔，嘗試添加useCORS: true依然搞不定，最後妥協，去掉了 image 內容。 :@(皺眉)
再次嘗試#
gap 了一段時間，心態平和的於師傅有一次嘗試解決這個問題，期間爬 stackoverflow 發現了解決辦法，需要給圖片加上crossOrigin="anonymous"屬性，初次以為問題解決，期間也將 module 換成了 html-to-image，標籤抽風的問題也解決了，終於能夠生成帶圖片的筆記卡片了 :@(鼓掌) ，然而很快又測試出了問題，開發環境中可以成功生成帶圖的分享圖，然而手機端卻又是一片空白，心態大崩 :@(噴血)
從畫風逐漸潦草的 commit 中就可以看到我心態的變化 :@(口水)
期間發現了奇怪的現象，如果圖片在 canvas 之前緩存過，使用 canvas 的時候會出現問題，依然是跨域的錯誤，開啟停止緩存後，又正常了。 :@(想一想) 通過給圖片鏈接添加?${timestamp}的方法解決了問題，後來發現 html-to-image 有一個 option 實現類似的功能，cacheBust: true，再次以為問題解決。 :@(汗)
然而，到了手機端測試的時候發現圖片依然是一片空白，再次測試 pc 端 chrome 又一切正常，我的心態又一次發生了微妙的變化，最終在 html-to-image 的 issue 區發現了類似的情況Image is not showing in some cases iOS, Safari，確認可能是 safari 的問題，採用了評論區的解決辦法，問題好像解決了，safari 終於（有機會）正常生圖了，為什麼是有機會，實際上這個解決辦法並不完美，當圖片較大的時候，依然有概率出現空白 img 的情況...
到現在，這個功能依然不完美，但是我放棄掙扎了 :@(投降) （暫時）
最後貼一張這個功能生成的圖 :@(長草)
