Jquery - Load an image from url and draw it on canvas

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

markE · Accepted Answer · 2013-12-13 17:38:32Z

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 }

score 0 · Accepted Answer · 2013-12-15 18:36:32Z

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.

Collectives™ on Stack Overflow

Jquery - Load an image from url and draw it on canvas

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related