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

Nephridium

#2434958 (which leads to hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader) – Hummer

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.

Nephridium

where was this in relation to the rest of your code? – Skyjack

Answer 2

I know this an old thread, but I had the same question about where to place the "on load" and this worked for me...

       navigator.camera.getPicture(function (imageURI) {
           console.log("*** capture success. uri length...", imageURI.length);            
           var image = document.createElement('img');
           image.onload = function() {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, 300, 300);
                var shrunk = canvas.toDataURL('image/jpeg');
                console.log(shrunk);
                // used shrunk here
            }
            image.src = imageURI; // triggers the onload
       }           

pat

Fowliang