c# - Canvas toDataURL() 关于 chrome 安全问题

Question

我在 Chrome 上使用 Canvas 时遇到问题。我知道这个问题被提及很多，但我无法找到适合我的解决方案。

基本上，我正在设计一个执行以下步骤的网站:
- 将 SVG 图像模板从托管服务器加载到对象中。
- 操作 SVG(着色、隐藏和显示图层等...)
- 然后将处理后的版本发送到服务器以插入 pdf 文档并通过电子邮件发送。

我的问题是最后一步。我使用的方法包括:
- 获取 SVG 的内容文档并序列化其 XML。

 var s = new XMLSerializer();
 svg = document.getElementById('theSVG').contentDocument;
 var xmlTest = s.serializeToString(svg);

• 使用 onLoad 函数定义新图像并将 src 应用于它:

  drawnImage.src = 'data:image/svg+xml,' + escape(xmlTest);

• 创建 Canvas 元素并将图像绘制到其中:

  var canvas = document.createElement('canvas'); var cont = canvas.getContext('2d'); cont.drawImage(drawnImage, 0, 0, canvas.width, canvas.height);

• 最后一步是从 canvas 元素中提取 dataURI，如下所示:

var ImageDataURl = canvas.toDataURL();

之后，数据(base64)被发送到服务器，转换为位图并以 jpeg 图像形式保存在服务器磁盘上，然后作为大 pdf 文档的一部分插入。

一切都很顺利，直到我在 Chrome 上进行了测试，并且我遇到了安全错误，指出:

Uncaught SecurityError: An attempt was made to break through the security policy of the user agent

当我读到这个错误时，我知道这是跨域图像的 chrome 安全问题等等。我想知道以下内容:
- 在用户浏览器上创建新 Canvas 并将图像加载到其中是否被视为来自另一个域的文件？
- 即使它是服务器端(我使用 C#)，我不介意，是否有解决方法。我尝试上传 SVG XML 并尝试将其转换为 base64 字符串，但没有成功。

如有任何帮助，我们将不胜感激。

Answer 1

在 Chrome 上，将 SVG 图像加载到 Canvas 会污染 Canvas ，这意味着您无法从中读取任何数据，尽管您仍然可以写入数据。好像是fixed recently in Chrome前提是您避免使用某些 SVG 元素，例如 <foreignObject>所以也许它很快就会出现在 Chrome 发布版本中。

同时，也许您可​​以使用 Firefox，这样就不会污染 Canvas 。