Shrink image before uploading with javascript

Question

I'm writing a cross-platform mobile application using phonegap, and i have a file-upload input for image uploading of single images.

The problem is that most pictures being uploaded are ones taken using the mobile phone which are around 4MB in size.

I want to shrink those images dramatically, as i don't need them in high quality at all.

Also, i need them converted to base64 and not in real image file. (That i already have using FileReader)

Any ideas how to achieve this? Maybe using canvas or something?

Update: here is what i have so far:

function shrink() {
    var self = this;

    var reader = new FileReader(); // init a file reader
    var file = $('#file-input').prop('files')[0]; // get file from input

    reader.onloadend = function() {

        // shrink image
        var image = document.createElement('img');
        image.src = reader.result;

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, 300, 300);
        var shrinked = canvas.toDataURL('image/jpeg');
        console.log(shrinked);
    };

    reader.readAsDataURL(file); // convert file to base64*/
}

but all i get is a black image Thanks

Answer 1

Found the answer.

The problem was that i wasn't waiting for the image to fully load before drawing it.

once i added

image.onload = function() {

}

and ran everything inside it works.