Question

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

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

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

我似乎无法找到解决此问题的方法。有没有办法让＃34; onload＆＃34;画布的功能？

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));
}

感谢您的时间。

Answer 1

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

但您仍然可以使用img元素onload来进行canvas操作。 This article可能会对您有所帮助。

Bonne chance！

Answer 2

这是预装所有图片的代码。

当它们完全加载时，将调用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;
    }

}

是否有html画布的onload函数？

2 个答案: