0

キャンバスにいくつかの画像を描画し、forループを使用してそれらのデータを取得したい...画像オブジェクトを配列に入れ、データも配列に入れる必要があります。これがコードです。

複数の画像データの配列を取得したい場合はどうすればよいですか?

window.onload = function(){
 var canvas = document.getElementById("Canvas");
 var context = canvas.getContext('2d');
 for(var i = 0; i < 10; i++)
 {
  imgObj[i]= new Image();
  imgObj[i].onload = function()
  {
   context.drawImage(imgObj[i], 0, 0);
   var imagedata1 = context.getImageData(0,0,742, 274);
   data[i] = imagedata1.data;
  };
  imgObj[i].src = "/img"+i+".bmp";
 }
};
4

2 に答える 2

1

「getImageData() メソッドは、キャンバス上の指定された長方形のピクセル データをコピーする ImageData オブジェクトを返します。

ヒント: ImageData オブジェクトは画像ではなく、キャンバス上のパーツ (四角形) を指定し、その四角形内のすべてのピクセルの情報を保持します。" (ソース: http://www.w3schools.com/html5/canvas_getimagedata.asp )

したがって、キャンバスに画像を 1 つずつ追加してみて、毎回画像の位置とサイズに対応する画像データの四角形を取得します。

http://s11.postimage.org/aszz0oxc3/canvas.png

ステップ 2 では緑色の画像の画像データを取得し、ステップ 3 では青色の画像の画像データを取得します。これは、緑色の画像がまだ下にある場合でも行います。

したがって、これはあなたが置き換える必要があるものです：

imagedata[i] = context.getImageData(image[i].x,image[i].y,image[i].width, image[i].height);

これは、キャンバスに画像を追加するたびに行う必要があります。

于 2012-08-12T09:16:29.450 に答える
0

キャンバスにリスナーを追加する必要があります。

function eventShipLoaded() {

            ctx.drawImage(img, 50, 50, 118,100);    //draw image in canvas  

            ctx.drawImage(img, 487, 180, 118,100);      
        }
window.addEventListener('load', eventShipLoaded , false);
var img = new Image();
        img.addEventListener('load', eventShipLoaded , false);
        img.src = "pic.jpg";
于 2012-08-12T09:21:32.397 に答える