0

私の目標は、一連の png 画像から imageData の配列を作成することです。

これを行うには、for ループを使用して画像を処理し、それらをキャンバスに配置してから、作成された imageData を取得して配列に格納します。

問題は、イメージをキャンバスにロードするのに十分な時間がないことです。今のところ私の解決策は、タイマーに十分な時間を残すことですが、それは恐ろしいことです。

この問題の解決策が見つからないようです。キャンバスに「オンロード」機能を持たせる方法はありますか?

for(var i=1;i<50;i++){
  (function(i){
     setTimeout(function(){
        return function(){
            var newpath = path+i+".png";            //path to the image
            baliseimg.onload = function(){          //baliseimg : html image tag
                ctxt.drawImage(baliseimg,0,0);
                ctxt.fillText(i, 50, 50);    //just to stamp the image number on the imagedata
                imgs[i-1]=ctxt.getImageData(0,0,512,512);
            }
            baliseimg.src=newpath;

        }();
     },100*i);  //100ms works, limit seems to be at 40
  }(i));
}

お時間をいただきありがとうございます。

4

2 に答える 2

0

すべての画像をプリロードするコードを次に示します。

それらが完全にロードされると、start() 関数が呼び出されます。

// image loader

var imageURLs=[];  
var imagesOK=0;
var imgs=[];

// put the paths to your images in imageURLs[]

imageURLs.push("yourImage1.png");
imageURLs.push("yourImage2.png");
imageURLs.push("yourImage3.png");
imageURLs.push("yourImage4.png");
imageURLs.push("yourImage5.png");


loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]


    // for example, draw the images on the canvas

    var nextX=10;

    for(var i=0;i<imgs.length;i++){
        context.drawImage(imgs[i],nextX,10);
        nextX+=imgs[i].width;
    }

}
于 2014-04-22T15:38:38.413 に答える
0

いいえ、http://www.w3schools.com/jsref/event_onload.aspによると

ただし、操作を行うためにimg要素を使用することはできます。この記事はあなたを助けるかもしれません。onloadcanvas

ボンヌチャンス！

于 2014-04-22T13:04:30.850 に答える