Bild vor dem Hochladen mit Javascript schrumpfen

Question

Ich schreibe eine plattformübergreifende mobile Anwendung mit Phonegap, und ich habe eine Datei-Upload-Eingang für Bild hochladen von Einzelbildern.

Das Problem ist, dass die meisten Bilder hochgeladen werden, die mit dem Handy, die etwa 4 MB groß sind, aufgenommen werden.

Ich möchte diese Bilder drastisch verkleinern, da ich sie in hoher Qualität überhaupt nicht brauche.

Auch ich brauche sie in base64 konvertiert und nicht in realen Bilddatei. (Das habe ich bereits mit FileReader)

Irgendwelche Ideen, wie man das erreicht? Vielleicht mit Leinwand oder etwas?

Update: hier ist das, was ich bisher:

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

aber alles, was ich bekommen, ist ein schwarzes Bild Dank

Answer 1

die Antwort gefunden.

Das Problem war, dass ich nicht wartete, bis das Bild vollständig geladen wurde, bevor es gezeichnet wurde.

einmal i hinzugefügt

image.onload = function() { 

} 

und lief alles in es funktioniert.

Answer 2

weiß ich, das einen alten Thread, aber ich hatte die gleiche Frage, wo die „auf Last“ zu platzieren, und dies ist für mich ...

 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