Upload Multiple Canvas Images Through Javascript Loop

I am trying to make an upload script which resizes multiple images client side before the saveimage.php handles them. The reason for this is because they will be uploaded at an out

Solution 1:

JavaScript loads image asynchronously. That means once it is assigned a new image's .src it will begin loading the image but will simultaneously continue processing the javascript after the .src while the image takes time to load.

You're using the same image variable (var img) inside your for loop. Therefore, each time through the loop you are overwriting the previous img before the previous image has been fully loaded.

Here's an image loader that fully loads all image and then calls the start() function where you can do you processing:

// image loader

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("myImage1.png");
imageURLs.push("myImage2.png");
// etc, etc.

// the loaded images will be placed in imgs[]
var imgs=[];

var imagesOK=0;
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 now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

Solution 2:

In the onload callback use the this keyword(instead of img) to for the current image, img may/will be overwritten in the for loop before the callback fires.
img.height --> this.height etc
Also is there a reason you're using a custom content type instead of application/x-www-form-urlencoded ?
Url encoded form data is much easier to work with.

Solution 3:

I have struggled with the same problem for some time now, but I finally cobbled together another solution, using bits of code from others, who have addressed this problem, and it works. It may not be perfect, and I would welcome any improvement suggestions. The concept is that you have two Javascript Functions, which are identicle called Resize0 and Resize1, and they call each other until all photos have been resized then the Function which resizes the last image Submits the Form. The two Functions pass parameters between each other so that one of them will know when to Submit the Form. Two of those parameters are, Number_Of_Images and current Image_Number. You can also download a working Example Web page from http://www.wantitconsulting.co.nz/ExampleResizeUpload.zip . You will need to create a folder in the base directory of your test web site for the Images to go into. The foldername is TestResizeUpload. The Server side uses php.