Zmniejszenie obrazu przed przesłaniem za pomocą javascript

Question

Piszę wieloplatformową aplikację mobilną za pomocą phonegap, i mam wejście do przesyłania plików do przesyłania zdjęć pojedynczych obrazów.

Problem polega na tym, że większość ładowanych zdjęć to zdjęcia zrobione za pomocą telefonu komórkowego o rozmiarze około 4 MB.

Chcę radykalnie zmniejszyć te obrazy, ponieważ nie potrzebuję ich w ogóle w wysokiej jakości.

Potrzebuję ich również przekonwertować na base64, a nie na prawdziwy plik obrazu. (Że już korzystam z FileReadera)

Jakieś pomysły, jak to osiągnąć? Może za pomocą płótna czy czegoś takiego?

Aktualizacja: tutaj jest to, co mam do tej pory:

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*/ 
} 

ale ja dostać jest czarny obraz Dzięki

Answer 1

znalazłem odpowiedź.

Problem polegał na tym, że nie czekałem na pełne wczytanie obrazu przed jego rysowaniem.

raz dodałem

image.onload = function() { 

} 

i pobiegł wszystko wewnątrz działa.

Answer 2

Wiem, że to stary wątek, ale miałem ten sam pytanie, gdzie umieścić „obciążenia”, a ten pracował dla mnie ...

 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