为什么我的 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中文网其他相关文章！