画像を読み込んで、そこからピクセル値を取得し、後で使用できるように配列に保存しようとしています。この理由は、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 = '';
しかし、うまくいきませんでした。
私はこれについて間違った方法で行ったことがありますか？私が望むことを達成するためのより簡単な方法があるのだろうか。