为什么我的 Canvas drawImage() 为空或填充有'A”，以及如何解决绘制外部图像时的 CORS 问题？

CanvasContext2D drawImage() 问题：加载图像和 CORS 配置

在检索其 dataURL 之前在画布上绘制图像时，可能会出现问题出现在返回的数据为空且包含大量“A”字符的情况下。此外，当画布附加到文档时，图像可能无法绘制。

解决方案：加载图像事件

要解决此问题，等待至关重要直到图像加载完毕，然后再尝试将其绘制在画布上。利用 的加载事件处理程序element:

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  // ... code to draw the image and retrieve dataURL ...
};
img.src = "http://somerandomWebsite/picture.png";

像素数据访问的 CORS 配置

另一个潜在原因是画布“污染”的限制。为了克服这个问题，正确的 CORS（跨源资源共享）配置至关重要。

• 同源图像：没问题。
• 外部images: 确保服务器允许在其标头中进行跨源访问并将 img.crossOrigin 设置为“use-credentials。”
• 匿名请求：如果服务器允许匿名访问，请将 img.crossOrigin 设置为“anonymous”。

注意： CORS 标头由服务器控制。跨域属性仅表示希望使用 CORS。它无法绕过正确的服务器配置。

边缘情况：混合图像源

如果图像同时来自您的服务器和启用 CORS 的服务器，请考虑使用 onerror 事件处理非 CORS 图像的处理程序。

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

以上是为什么我的 Canvas drawImage() 为空或填充有'A”，以及如何解决绘制外部图像时的 CORS 问题？的详细内容。更多信息请关注PHP中文网其他相关文章！