Jquery - 从url加载图像并在画布上绘制它

Question

I'm trying to load multiple images from URLs and then draw them into a canvas element. But I don't want to recreate the same code for each image I have to load.

The loadImage function (it works fine):

function loadImage(divId, imgId, path, width, height) {
var img = $("<img />").attr({ 'id': imgId, 'src': path , 'width': width, 'height': height, 'style': "display:none"})
.load(function () {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('broken image: ' + imgId);
    } else {
        $("#" + divId).append(img);
    }
});

}

But I would like to call loadImage multiple times and then draw all the images on the canvas:

function myTheme()
{
    loadImage("ContentBox", "bottom", "http://mydomain/images/bottom.jpg", 400, 391);
    loadImage("ContentBox", "left", "http://mydomain/images/left.jpg", 400, 391);
    loadImage("ContentBox", "right", "http://mydomain/images/right.jpg", 400, 391);
    loadImage("ContentBox", "top", "http://mydomain/images/top.jpg", 400, 391);

    // I need to wait ALL loads before using getElementById (these lines below don't work)
    _imgBottom = document.getElementById("bottom");
    _imgLeft = document.getElementById("left");
    _imgRight = document.getElementById("right");
    _imgTop = document.getElementById("top");

    Context.drawImage(_imgBottom, 0, 0);
    Context.drawImage(_imgLeft, 0, 0);
    Context.drawImage(_imgRight, 0, 0);
    Context.drawImage(_imgTop, 0, 0);
}

How could I do this please ?

Thanks

Answer 1

There are many ways to load all images before starting to use them.

Here's one way:

// image loader
var imagesOK=0;
var imgs=[];     // the fully loaded Image objects will be here in the imgs[] array


var imageURLs=[];  // put the paths to your images in the imageURLs[] array

// push the image urls into an array

imageURLs.push("http://mydomain/images/bottom.jpg");
imageURLs.push("http://mydomain/images/left.jpg");
imageURLs.push("http://mydomain/images/right.jpg");
imageURLs.push("http://mydomain/images/top.jpg");

// begin loading

loadAllImages();

function loadAllImages(){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {

                // start() is called when all images are fully loaded

                start();
            }
        };
        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[]

    // imgs[0] == bottom.jpg
    // imgs[1] == left.jpg
    // imgs[2] == right.jpg
    // imgs[3] == top.jpg

}

Answer 2

If your goal is to simply be able to load a bunch of images you can use something like my YAIL bulk image loader (MIT license = free and flexible).

Simply setup the loader (this is just one of many ways to do this, please see link above for full usage):

var loader = (new YAIL({
    done: drawImages,
    urls: [
        "http://mydomain/images/bottom.jpg",
        "http://mydomain/images/left.jpg",
        "http://mydomain/images/right.jpg",
        "http://mydomain/images/top.jpg"
        ]
    })).load();

Then when all the images has loaded you simply iterate through the image array which is in the same order as the url list:

function drawImages(e) {
    for(var i = 0, img; img = e.images[i]; i++)
        context.drawImage(img, 0, 0);
}

Ideally you should provide an error handler (not shown here) and there is the option of providing progress handler as well.

If you try this for educational purposes then please have a look at the source code for it.