Question

我有一个javascript脚本，它接受一个SVG字符串并尝试将它放在画布上（以栅格化它）。这适用于Chrome和Firefox，但Safari会抛出错误：

var img = new Image();
img.onload(function() {
  context.drawImage(img, 0,0);
  exportImage.src = canvas.toDataURL('image/png');
});
img.src="data:image/svg+xml;utf8,<svg>...</svg>";

以这种方式完成后，Safari会在toDataURL()来电时抛出错误：

SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

如果我在设置img.crossOrigin=''之前向img对象添加src，则会出现Cross-origin image load denied by Cross-Origin Resource Sharing policy.错误。我在此网站的.htaccess文件中有以下内容：

Header set Access-Control-Allow-Origin "*"

但由于这是data:网址，因此未对此进行查询？如何为正在创建自己的data:网址的脚本正确设置跨源资源共享标头？

Answer 1

您可以使用blobURL代替dataURL。 blobURL目前没有跨文件问题。

请参阅Blob和objectURL。

var img = new Image();
img.onload(function() {
  context.drawImage(img, 0,0);
  exportImage.src = canvas.toDataURL('image/png');
});
img.src=URL.createObjectURL(new Blob(['<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" height="100" width="100" fill="#00f"/></svg>'], {type : 'image/svg+xml'}));

如何设置跨源标头以允许数据URL？

1 个答案: