DOM 异常：使用 getImageData 时的 SECURITY_ERR (18)

Question

当我从使用 png 图像切换到 SVG 时，我刚刚开始收到此错误。这些图像位于我运行此代码的同一台服务器上 -

function getLeftEdge(myImage) {
        var img = document.getElementById(myImage);
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);
        var pixelData;

        for (var x = 0; x < tmp[0]; x++) {
            for (var y = 0; y < tmp[1]; y++) {
                pixelData = context.getImageData(x, y, 1, 1);

所以这不应该是一个跨域问题。我不认为。我使用 ImageMagick 创建了 SVG 图像，以在另一个域的 Linux 机器上转换 png 图像。这会以某种方式导致这种情况吗？我在 SVG 文件头中看不到任何标识其来源的内容。

我发现 http://enable-cors.org/ 是关于更改我的服务器的，但我真的很想找到一种方法来清理图像，因为程序和图像将被发送给客户使用。

有什么建议吗？

Answer 1

使用 SVG 文件会污染画布，无论 Chrome 和 Safari 中的域如何。

此链接可能有助于更好地解释。 http://one-day-from.blogspot.com/2013/09/svg-in-html-5-canvas-tainted-canvas.html?m=1

编辑：

我创建了一个使用 SVG 和 Canvas 的最佳场景的测试用例。我们使用内联 SVG 元素来避免任何域问题（使用来自 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas 和 Drawing an svg containing html in a canvas with safari 的示例代码）

https://jsfiddle.net/ydcbw56s/4/

测试在这一行完成：

console.log(ctx.getImageData(1, 1, 1, 1));

• Chrome 抛出错误。
• Safari 抛出错误。
• Firefox 获取生成的像素数据。

Answer 2

为了防止跨域图像处理（例如，这可能允许攻击者检查 CAPTCHA 图像），浏览器会跟踪图像数据的来源。如果您使用浏览器不认为您的页面应该能够“查看”的图像数据填充画布，那么它将不允许您调用 .getImageData()。

正常的跨域规则适用：图像必须来自完全相同的域和端口。