如何解決 CanvasContext2D drawImage() 的 Onload 和 CORS 問題？

CanvasContext2D drawImage() 問題：Onload 和CORS

在獲取其dataURL 之前嘗試將圖像繪製到畫布上時，返回的資訊可能會顯示不足、已填入許多“A”字元。出現此問題的原因是需要等待圖像完成載入才能將其繪製在畫布上。若要修正此問題，請利用圖像元素的載入事件處理程序。

要解決此問題，請執行以下步驟：

1. 等待映像載入：包含映像元素的 onload 事件處理程序。該函數將在圖像完全載入後執行。
2. 在畫布上繪製圖像：在 onload 處理程序中，建立畫布並使用 drawImage 方法在其上繪製圖像。
3. 取得DataURL：繪製影像後，利用toDataURL取得dataURL.

潛在的障礙與 CORS（跨來源資源共享）有關。為了使 context.toDataURL() 和 context.getImageData 無縫運行，必須以跨域相容的方式取得映像資源。否則，畫布將被標記為“受污染”，從而阻止存取像素資料。要避免這種情況，請遵循以下準則：

1. 同源影像：來自同一伺服器的影像不會出現問題。
2. 外部映像- 跨來源標頭： 確保託管映像的外部伺服器在其標頭中啟用 CORS。此外，將 img.crossOrigin 設定為「use-credentials」。
3. 外部圖像 - 匿名請求：如果伺服器允許匿名請求，請將 img.crossOrigin 設定為「匿名」。

值得注意的是 CORS 標頭源自伺服器。跨域屬性僅表示您打算利用 CORS 進行資料檢索。如果伺服器配置不正確，則不存在解決方法。

在涉及來自混合來源（自己的伺服器和符合 CORS 的伺服器）的影像的極少數情況下，請考慮使用 onerror 事件處理程序。當非 CORS 伺服器上的跨網域屬性設定為「匿名」時，此處理程序將會啟動。

以上是如何解決 CanvasContext2D drawImage() 的 Onload 和 CORS 問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！