0

我遇到了很多人过去似乎遇到过的错误，但我并不清楚解释。在我的 javascript 中使用 .getImageData() 方法获取我存储在计算机上并输入到我的 HTML 网页中的 img 标记中的图片的像素数据后，我得到 SecurityError: DOM Exception 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 文件位于同一文件夹中，但出现相同的错误标志

4

2 回答 2

1

问题是这违反了Same-origin policy。您需要让 imgur 放松他们的跨域共享或自己托管图像。

如果您直接从计算机上的文件系统运行 HTML 文件，那么您只需将图像下载到与您的 html 文件所在的文件夹相同的文件夹中，然后像这样引用它

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

以下是您需要跳过的障碍，以使其通过像 imgur 这样的外国来源：https ://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

于 2013-07-23T16:56:03.397 回答
0

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

因此，即使您的图像和 .html 在同一个本地目录中，您仍然违反跨域。

您需要一种符合 CORS 的加载图像的方式。

就是这样：

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

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

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

要获取 Dropbox 图像的 URL：

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

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

然后使用此代码以符合 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。
于 2013-07-23T17:45:11.593 回答