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

stackoverflow.com/questions/2434458/… (which leads to hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader) — Sygmoral
– Sygmoral, Commented Mar 10, 2013 at 22:01

shaharmor · Accepted Answer · 2013-03-10 23:00:39Z

2

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.

answered Mar 10, 2013 at 23:00

shaharmor

1,7464 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zairja Over a year ago

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

Pat · Accepted Answer · 2015-12-17 23:20:45Z

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

Collectives™ on Stack Overflow

Shrink image before uploading with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related