Question

我遇到了许多人过去似乎已经遇到的错误，但解释并不清楚。在我的javascript中使用.getImageData（）方法获取我存储在计算机上的图片的像素数据并在我的HTML网页中输入img标签后，我得到了SecurityError：DOM异常18。

我只是在我的浏览器中运行HTMl文件，这使我无法完成这些工作。我已经读过关于制作代理来绕过它或者在我自己的域上托管图像的内容。我不完全明白这意味着什么或如何去做。所以，如果有人能提供帮助，我们将不胜感激。我会在这里输入我的代码并留下图像的链接。

http://i.imgur.com/8UzWlWX.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test</title>

    <script>
        function putimg() {

            var img = document.getElementById('img');
            var can = document.getElementById('C');
            var ctx = can.getContext('2d');
            ctx.drawImage(img, 0, 0);


            var position = [];
            var imgdata = ctx.getImageData(0,0, img.width, img.height);
            var data = imgdata.data;
             for (var i = 0; i < data.length; i += 4) {
                if (data[i] == 255) {
                    var vertical = Math.floor((data.indexOf(data[i]) / 4) / 400);
                    var horizontal = Math.floor((data.indexOf(data[i]) / 4) % 400);

                    position.push(horizontal, vertical);
                }
            }

            }

            ctx.putImageData(imgdata, 0, 0);
        }
        </script>
</head>

<body onload="putimg()">
    <h1>Test</h1>

    <img id="img" src="circle-image-alone.png" style="display:none"></img>
    <canvas id="C" width="600" height="600"></canvas>

</body>
</html>

编辑：该文件现在与html文件位于同一文件夹中，但出现相同的错误标志

Answer 1

问题在于这是打破Same-origin policy。你需要让他们放松一下他们的Cross-origin共享或自己托管图像。

如果您直接从计算机上的文件系统运行HTML文件，那么您只需将图像下载到html文件所在的文件夹中，并像

一样引用它。

<img id="img" src="8UzWlWX.png" style="display:none"></img>

以下是你需要跳过的箍，让它通过像imgur这样的外国起源：https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Answer 2

正如您所发现的，您的浏览器甚至将您的本地文件系统视为不同的域。

即使您的图片和.html位于同一本地目录中，您仍然违反了跨域。

您需要符合CORS标准的图片加载方式。

以下是：

在dropbox.com上开设一个帐户并在那里托管您的图片。

请务必将图片放入他们为您设置的“公共”文件夹中。

他们允许从“公共”文件夹中跨域下载他们的图片。

获取保管箱图片的网址：

右键单击公用文件夹中的图像，然后选择“复制公共链接”。

这会将网址放入剪贴板，您可以将其粘贴到代码中。

然后使用此代码以符合CORS的方式将图像下载到浏览器中：

// download an image from dropbox.com
// in a CORS compliant way

var img=new Image();
img.onload=function(){
    ctx.drawImage(img, 0, 0);
}
img.crossOrigin="anonymous";
img.src="dropbox.com/yourDropboxAccount/yourImage.png";

结果是您可以使用以下方式完全检查/更改/保存的图像：

ctx.getImageData
ctx.putImageData
ctx.toDataURL。

DOM异常18 getImageData

2 个答案: