CODEWITHSUNDEEP
javascriptimageshrink
shaharmor
shaharmor

Reputation: 1726

Shrink image before uploading with javascript

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

Upvotes: 10

Views: 5309

Answers (2)

Pat
Pat

Reputation: 171

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

Upvotes: 1

shaharmor
shaharmor

Reputation: 1726

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.

Upvotes: 2

Related Questions