Riduci l'immagine prima di caricarla con javascript

Question

Sto scrivendo un'applicazione mobile multipiattaforma utilizzando phonegap, e ho un input di caricamento file per il caricamento di immagini di singole immagini.

Il problema è che la maggior parte delle immagini che vengono caricate sono quelle prese con il telefono cellulare che sono circa 4 MB di dimensioni.

Desidero ridurre drasticamente queste immagini, in quanto non ne ho affatto bisogno.

Inoltre, ho bisogno di convertirli in base64 e non nel file immagine reale. (Che ho già utilizzato FileReader)

Qualche idea su come raggiungere questo obiettivo? Forse usando la tela o qualcosa del genere?

Aggiornamento: ecco ciò che ho finora:

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

ma tutto quello che ottiene è un'immagine in bianco Grazie

Answer 1

trovato la risposta.

Il problema era che non stavo aspettando che l'immagine si carichi completamente prima di disegnarla.

una volta ho aggiunto

image.onload = function() { 

} 

e corse tutto dentro funziona.

Answer 2

So che questo un vecchio thread, ma ho avuto la stessa domanda su dove posizionare il "sotto carico", e questo ha funzionato per 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