為什麼我的 Canvas drawImage() 為空或填充有'A”，以及如何解決繪製外部影像時的 CORS 問題？

CanvasContext2D drawImage() 問題：載入影像和CORS 設定

在擷取其dataURL 之前在畫布上繪製影像時，可能會出現影像問題出現在傳回的資料為空且包含大量“A”字元的情況下。此外，當畫布附加到文件時，圖像可能無法繪製。

解決方案：載入影像事件

要解決此問題，等待至關重要直到影像載入完畢，然後再嘗試將其繪製在畫布上。利用 的載入事件處理程序element:

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  // ... code to draw the image and retrieve dataURL ...
};
img.src = "http://somerandomWebsite/picture.png";

像素資料存取的 CORS 配置

另一個潛在原因是畫布「污染」的限制。為了克服這個問題，正確的 CORS（跨來源資源共享）配置至關重要。

• 同源影像：沒問題。
• 外部images: 確保伺服器允許在其標頭中進行跨來源存取並將img.crossOrigin 設定為「use-credentials.」
• 匿名請求：如果伺服器允許匿名訪問，請將img.crossOrigin 設定為「anonymous」。

注意： CORS 標頭由伺服器控制。跨域屬性僅表示希望使用 CORS。它無法繞過正確的伺服器配置。

邊緣情況：混合影像來源

如果影像同時來自您的伺服器和啟用 CORS 的伺服器，請考慮使用 onerror 事件處理非 CORS 影像的處理程序。

function corsError() {
  this.crossOrigin = '';
  this.src = '';
  this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);

以上是為什麼我的 Canvas drawImage() 為空或填充有'A”，以及如何解決繪製外部影像時的 CORS 問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！