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