iOS 上的 Safari 在调用 canvas.toDataURL 时抛出 SECURITY_ERR: DOM Exception 18

Posted 2023-02-19

【中文标题】iOS 上的 Safari 在调用 canvas.toDataURL 时抛出 SECURITY_ERR: DOM Exception 18

【英文标题】：Safari on iOS throws SECURITY_ERR: DOM Exception 18 when calling canvas.toDataURL

【发布时间】：2019-11-11 00:11:43

【问题描述】：

我有一个 T 恤设计应用程序（在 fabric.js 1.7.14 上运行），它在 ios Safari 上运行良好已有一段时间了。现在，当我在 canvas 元素上调用 toDataURL 时，Safari 会引发安全错误。有问题的页面在这里：

https://ideashirt.pl/projektuj/koszulka-t-shirt-basic-kolor-meska

最奇怪的是它不能在本地复制。当我从 iPhone 访问本地服务器时，一切正常（http 和 https）。但是，当您从 iPhone 上的 Safari 访问 ideashirt.pl 上的页面并将一些文本添加到 T 恤时，当您想要将产品添加到购物车时脚本会失败。当您刷新页面并且不修改画布时，它可以工作。手动添加元素和刷新后从会话中添加元素时，元素的添加方式相同。这让我觉得当你修改画布上的元素时，织物可能会以某种方式污染 Safari 的画布。

【问题讨论】：

貌似是CORS限制，显示添加外部图片到canvas的代码

看看这个答案：***.com/questions/2390232/…

感谢 Synthetx，我认为您的解决方案也可以。问题是 CORS 问题是由控件的图像引起的，而不是画布上的实际图像。

【参考方案1】：

问题确实是 CORS。我们最近将静态内容迁移到 Amazon，并且画布上绘制的结构控件图像（用于调整大小/旋转/删除）是从 Cloudfront 域提供的。奇怪的是，只有 iOS 上的 Safari 和某些版本的 FF 受到了影响。感谢大家的帮助！