為什麼我的 Canvas `drawImage()` 傳回空資料或無法渲染，如何使用 `onload` 和 CORS 修復它？

CanvasContext2D drawImage() 難題：Onload 和CORS

在嘗試在檢索其dataURL 之前將圖像繪製到畫布上時，使用者可能會遇到返回的問題資料顯示為空，類似於用“A”字元填充的字串。此外，將畫布附加到文件中可能無法渲染圖像，但控制台中不會報告任何錯誤。

問題解決

問題的根源在於影像的非同步特性載入中。要解決這個問題，必須利用 的 onload 事件處理程序。僅在影像載入完成後才執行繪製操作的元素。

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

// Define a function to execute after the image has loaded
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);

  // Now you can retrieve the dataURL
  var dataURL = canvas.toDataURL();
  doSomething(dataURL);
};

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

CORS 和資料擷取

為了使 context.toDataURL() 和 context.getImageData 方法正常運行，影像資源必須以跨來源相容的方式擷取。否則，畫布會被“污染”，從而阻止任何檢索像素資料的嘗試。

如果映像與腳本來自同一伺服器，則沒有問題。但是，如果映像駐留在外部伺服器上，則透過設定適當的 CORS 標頭來確保伺服器允許跨網域存取至關重要。此外，img.crossOrigin 屬性應設定為「use-credentials」（對於經過驗證的請求）或「anonymous」（對於匿名請求）。

要注意的是，CORS 標頭是在伺服器端設定的。跨域屬性僅表示客戶端使用CORS存取影像資料的意圖。如果伺服器配置禁止，則無法規避 CORS 限制。

在某些情況下，某些映像可能託管在您的伺服器上，而其他映像可能需要 CORS。若要處理此問題，請考慮使用 onerror 事件處理程序，當在不支援 CORS 的伺服器上將跨網域屬性設為「匿名」時，會觸發該事件處理程序。

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

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

以上是為什麼我的 Canvas `drawImage()` 傳回空資料或無法渲染，如何使用 `onload` 和 CORS 修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！