DOM异常18 getImageData
我遇到了一个错误，许多人似乎已经在过去，但我不清楚的解释。在使用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文件位于同一个文件夹中，但会出现相同的错误标志。
回答 2
Stack Overflow用户
发布于 2013-07-23 16:56:03
问题是这破坏了同源政策。你需要要么让他们放松自己的跨源共享，要么自己主持形象。
如果直接从计算机上的文件系统运行HTML文件，则只需将图像下载到html文件所在的同一个文件夹中，并引用如下
<img id="img" src="8UzWlWX.png" style="display:none"></img>下面是你需要跳过的环，以使它通过一个外国的来源，比如imgur：图像。
Stack Overflow用户
发布于 2013-07-23 17:45:11
正如您已经发现的，您的浏览器甚至认为您的本地文件系统是一个不同的域。
因此，即使您的图像和.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。
https://stackoverflow.com/questions/17816305
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号