Javascript: Как загрузить изображение, получить его imageData и сохранить его в массиве?

Question

Я пытаюсь загрузить изображение, извлечь из него значения пикселей и сохранить их в массиве для последующего использования. Причина этого заключается в том, что я кодирую 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);
}

Тем не менее, это дает мне следующую ошибку: Невозможно получить данные изображения из холста, потому что холст был испорчен данными из разных источников. Uncaught Error: SECURITY_ERR: исключение DOM 18

Я читал об этом и не нашел никакого реального ответа на мою проблему. Я хочу запустить это локально, пока. Это вообще возможно? Я пытался использовать;

image.crossOrigin = ''; 

но это не сработало.

Я поступил об этом неправильно? Интересно, есть ли более простой способ выполнить то, что я хочу.