為什麼我的 Canvas drawImage() 無法渲染影像，如何解決 onload 和 CORS 問題？-js教程-PHP中文網

為什麼我的 Canvas drawImage() 無法渲染影像，如何解決 onload 和 CORS 問題？

Linda Hamilton

發布： 2024-12-13 18:19:13

原創

201 人瀏覽過

Why is my Canvas drawImage() failing to render images, and how can I resolve onload and CORS issues?

CanvasContext2D drawImage() 難題：解決載入與CORS 障礙

問題示範：

問題示範：

踏上畫布之旅，你發現自己面臨著一個令人困惑的難題。透過drawImage()渲染的影像難以理解，留下了空的資料URL。此外，嘗試顯示畫布不會產生可見的結果，控制台仍然保持詭異的沉默。

揭開困惑：

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

// Define the onload function
img.onload = function() {
  // Canvas setup
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext("2d");

  // Draw the image
  context.drawImage(img, 0, 0);

  // Obtain the data URL
  var dataURL = canvas.toDataURL();

  // Perform desired actions with dataURL
  doSomething(dataURL);
};

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

登入後複製

問題的癥結在於過早的你的畫布藝術的本質。在drawImage() 發揮其魔力之前，圖像必須先完成其載入過程。為了滿足onLoad 的必要性，請採用以下策略：

CORS 難題和緩解：

為了確保無縫toDataURL() 和getImageData() 執行，堅持跨域資源共享（CORS）勢在必行。透過確保以下場景之一來防止畫布「污染」：
同一伺服器影像來源。

具有寬鬆的 CORS 標頭且 img.crossOrigin 設定為「use-credentials」的外部伺服器".

img.crossOrigin 設定為的匿名 CORS伺服器

重要提示：

CORS 標頭源自伺服器，跨域屬性僅請求CORS 使用。和Safari不支援跨域

邊緣情況：影像來源中的差異：

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

登入後複製

如果您的影像來自同一伺服器和符合CORS 的來源的混合，請考慮使用onerror 事件處理程序。

以上是為什麼我的 Canvas drawImage() 無法渲染影像，如何解決 onload 和 CORS 問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！