Shrink image before uploading with javascript
image, javascript, shrink
Solution
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.
Problem
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