Shrink image before uploading with javascript - Stack Overflow

admin管理员组

文章数量:1403348

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

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

• javascript
• image
• shrink

Share Improve this question Follow edited Sep 9, 2015 at 14:28 Michael 3,33655 gold badges2626 silver badges3737 bronze badges asked Mar 10, 2013 at 21:59 shaharmorshaharmor 1,73644 gold badges1515 silver badges2626 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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

本文标签： Shrink image before uploading with javascriptStack Overflow