为什么'canvas.toDataURL()”会抛出跨源图像的安全异常？

为什么在获取跨源图片时canvas.toDataURL()会触发安全异常？

尝试执行canvas.toDataURL(时）在包含从跨域源获取的图像的 HTML5 canvas 元素上，您可能会遇到“SECURITY_ERR：DOM Exception 18”错误。发生这种情况是由于网络浏览器施加的安全限制。

根据 HTML5 规范，在“origin-clean”标志为 false 的画布元素上调用 toDataURL() 方法时，会引发 SECURITY_ERR 异常。如果 canvas 元素仅包含与其所在文档同源的资源，则此标志设置为 true。在您的情况下，由于图像源自不同的域，因此“origin-clean”标志设置为 false。

解决方法：

不幸的是，由于由于这些安全限制，无法使用 toDataURL() 检索跨源图像的 PNG 表示形式。要解决此问题，请考虑以下选项：

• 使用启用 CORS 的代理： 设置启用跨源资源共享 (CORS) 的服务器端代理。这允许您发出跨域请求并绕过安全限制。
• 使用 HTML5 文件 API： 不使用 toDataURL()，而是利用 File API 从以下位置创建 File 对象：画布。这样您就可以将图像另存为文件，而无需依赖 CORS。
• 使用第三方服务：探索提供跨域图像检索功能的第三方服务，例如 crossOrigin .我。

以上是为什么'canvas.toDataURL()”会抛出跨源图像的安全异常？的详细内容。更多信息请关注PHP中文网其他相关文章！