如何解决 CanvasContext2D drawImage() 的 Onload 和 CORS 问题？

CanvasContext2D drawImage() 问题：Onload 和 CORS

在获取其 dataURL 之前尝试将图像绘制到画布上时，返回的信息可能会显示不足、已填充有许多“A”字符。出现此问题的原因是需要等待图像完成加载才能将其绘制在画布上。要纠正此问题，请利用图像元素的加载事件处理程序。

要解决此问题，请执行以下步骤：

1. 等待图像加载：包含图像元素的 onload 事件处理程序。该函数将在图像完全加载后执行。
2. 在画布上绘制图像：在 onload 处理程序中，创建画布并使用 drawImage 方法在其上绘制图像。
3. 获取DataURL：绘制图像后，利用toDataURL获取dataURL.

潜在的障碍与 CORS（跨源资源共享）有关。为了使 context.toDataURL() 和 context.getImageData 无缝运行，必须以跨域兼容的方式获取图像资源。否则，画布将被标记为“受污染”，从而阻止访问像素数据。要避免这种情况，请遵循以下准则：

1. 同源图像：来自同一服务器的图像不会出现问题。
2. 外部图像- 跨源标头： 确保托管图像的外部服务器在其标头中启用 CORS。此外，将 img.crossOrigin 设置为“use-credentials”。
3. 外部图像 - 匿名请求：如果服务器允许匿名请求，请将 img.crossOrigin 设置为“匿名”。

值得注意的是 CORS 标头源自服务器。跨域属性仅表示您打算利用 CORS 进行数据检索。如果服务器配置不正确，则不存在解决方法。

在涉及来自混合源（自己的服务器和符合 CORS 的服务器）的图像的极少数情况下，请考虑使用 onerror 事件处理程序。当非 CORS 服务器上的跨域属性设置为“匿名”时，此处理程序将激活。

以上是如何解决 CanvasContext2D drawImage() 的 Onload 和 CORS 问题？的详细内容。更多信息请关注PHP中文网其他相关文章！