為什麼我的 CanvasContext2D drawImage() 失敗，如何修復 CORS 和映像載入問題？

CanvasContext2D drawImage() 問題：圖像載入和CORS

在獲取其dataURL 之前嘗試在畫布上繪製圖像時，遇到空圖像時，遇到空圖像時，遇到空圖像時，遇到空圖像時，遇到空圖像時，遇到空圖像時，遇到空圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空白圖像時，遇到空圖像時，遇到空圖像時，遇到空圖像時，遇到dataURL 或空白畫布渲染可能是一個問題。這可以歸因於計時問題和跨域資源共享 (CORS) 問題。

要解決計時問題，必須先完全載入影像，然後再嘗試在畫布上繪製影像。使用onload 事件處理程序如下：

// Create a new image
var img = new Image();

// Define a function to execute when the image loads
img.onload = function () {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
  // Now, the dataURL is available for processing
  doSomething(dataURL);
};

// Set the image source
img.src = "http://somerandomWebsite/picture.png";

此外，為了確保畫布上下文中context.toDataURL() 和context.getImageData() 的功能，必須以符合CORS 的方式取得影像以避免畫布「污染」。

• 如果映像與程式碼託管在同一台伺服器上，則不會問題。
• 對於來自外部伺服器的映像，請確保伺服器在其標頭中允許跨網域請求，並將 img.crossOrigin 屬性設為「use-credentials」。
• 如果伺服器允許匿名請求時，將 img.crossOrigin 設定為「anonymous」。

要注意的是，CORS 標頭是由 伺服器。跨域屬性只是告知伺服器影像資料檢索需要CORS；如果伺服器配置不正確，它無法繞過 CORS 限制。

在某些情況下，影像可能來自不同的來源，包括您的伺服器和符合 CORS 的伺服器。在這些情況下，請利用 onerror 事件處理程序，當在不支援 CORS 的伺服器上將跨網域屬性設為「匿名」時會觸發該事件處理程序：

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

img.addEventListener('error', corsError, false);

以上是為什麼我的 CanvasContext2D drawImage() 失敗，如何修復 CORS 和映像載入問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！