1

我正在尝试加载图像，从中获取像素值并将它们存储在数组中以备后用。这样做的原因是我正在编写一个 raycaster（“假 3d”引擎），我想在屏幕上将墙壁绘制为列，像素值取自预先加载的纹理图像。

这是我现在使用的代码：

var imgwidth;
var imgheight;

var wallSprite1 = new Image();
wallSprite1.src = "textures/bricks_tile.gif"
if(wallSprite1.complete) findHHandWW();
else wallSprite1.onload = findHHandWW;

function findHHandWW() {
imgwidth = this.width;
imgheight = this.height;
getImageData(this);
return true;
}

function getImageData(img) {
var tempcanvas = document.createElement('canvas');
tempcanvas.height = imgwidth;
tempcanvas.width = imgheight;
var tempcontext = tempcanvas.getContext("2d");
tempcontext.drawImage(img,0,0);
wallData = tempcontext.getImageData(0, 0, imgwidth, imgheight);
}

但是，这给了我以下错误：无法从画布获取图像数据，因为画布已被跨域数据污染。未捕获的错误：SECURITY_ERR：DOM 异常 18

我阅读了它，并没有找到任何真正解决我的问题的答案。我现在想在本地运行它。甚至可能吗？我尝试使用；

image.crossOrigin = '';

但它没有用。

我是否以错误的方式解决了这个问题？我想知道是否有更简单的方法来完成我想要的。

4

0 回答 0