Q:

image load on end event

i am resizing an image using canvas and javascript... After the image has finished, I want to do some logic. Is there an event for finished? I tried onloadend but it never gets called:
var fr = new FileReader();
                fr.onload = function (e) {
                    var img = new Image();

                    img.onloadend = function() {
                        console.log('finished logic here');
                    }
                    img.onload = function(){
                        var MAXWidthHeight = 488;
                        var ratio = MAXWidthHeight / Math.max(this.width,this.height);
                        var w = this.width * ratio;
                        var h = this.height * ratio;
                        var c = document.createElement("canvas");
                        c.width = w;
                        c.height = h;
                        c.getContext("2d").drawImage(this,0,0,w,h);
                        this.src = c.toDataURL();
                        document.body.appendChild(this);
                    }
                    img.src = e.target.result;
                }
                fr.readAsDataURL(files[i]);

A:

An image is loaded asynchronously, but...
All processing inside .onload is synchronous, so you could just add a callback like this:
img.onload = function(){
    var MAXWidthHeight = 488;
    var ratio = MAXWidthHeight / Math.max(this.width,this.height);
    var w = this.width * ratio;
    var h = this.height * ratio;
    var c = document.createElement("canvas");
    c.width = w;
    c.height = h;
    c.getContext("2d").drawImage(this,0,0,w,h);
    this.src = c.toDataURL();
    document.body.appendChild(this);

    // after this img has been appended, execute myCallback()
    myCallback();
}

function myCallback(){
    console.log("I'm called after this img has been appended");
}

If you load multiple images, you will have multiple .onloads and therefore you will have myCallback executed multiple times.  If you just want myCallback executed once after all images have been appended, you would set a countdown variable that delays calling myCallback until all images have been appended.
var countdown=imageCount;  // imageCount is the total count of images to be processed

// and then in .onload

if(--countdown==0){
    myCallback();
}

