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

为了防止跨域图像处理（例如，可能允许攻击者检查CAPTCHA图像），浏览器会跟踪图像数据的来源。如果您使用图片数据填充画布，浏览器不会认为您的页面应该能够＆＃34;查看＆＃34;，那么它就不会让您拨打.getImageData()。< / p>

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

Answer 2

无论Chrome和Safari中的域名是什么，使用SVG文件都会污染画布。

此链接可能有助于更好地解释。 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获取生成的像素数据。

DOM异常：SECURITY_ERR（18）使用getImageData时

2 个答案: