0

我的目标是从一系列 png 图像中创建一个 imageData 数组。

为了做到这一点，我使用 for 循环遍历图像，将它们放在画布中，然后检索创建的 imageData 并将其存储在一个数组中。

问题是图像没有足够的时间加载到画布中。我现在的解决方案是让计时器留出足够的时间，但这太可怕了。

我似乎找不到任何解决这个问题的方法。有没有办法为画布提供“onload”功能？

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

不，根据http://www.w3schools.com/jsref/event_onload.asp

但是您仍然可以使用imgelements'onload来进行canvas操作。这篇文章可能会对你有所帮助。

好机会！

于 2014-04-22T13:04:30.850 回答
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 回答