Ottenere dati binari (base64) da Canvas HTML5 (readAsBinaryString)

Question

Esiste un modo per leggere il contenuto di una tela HTML come dati binari?

Al momento ho il seguente codice HTML per mostrare un file di input e la tela di sotto di essa:

<p><button id="myButton" type="button">Get Image Content</button></p> 
<p>Input:<input id="fileInput" type="file"/></p> 
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p> 

Ho quindi impostare il mio file di input per impostare correttamente, che la tela funziona benissimo:

$('#fileInput').on('change', function() { 
    $.each(this.files, function() { 
     var image = new Image(); 
      image.src = window.URL.createObjectURL(this); 

     image.onload = function() { 
      $("canvas").drawImage({ 
       source: image, 
       x: 50, y: 50, 
       width: 100, 
       fromCenter: false 
      }); 
     }; 
    }); 
}); 

io ora bisogno di ottenere i dati binari (Base64 codificato) dalla tela quando il pulsante viene premuto in modo che sarà spingere i dati al server ...

il risultato finale è che ho bisogno a fornire all'utente la possibilità di selezionare un file, ridimensionarlo/ridimensionarlo e quindi fare clic su un pulsante a quel punto l'immagine modificata verrà caricata sul server (non posso eseguire il ritaglio/ridimensionamento lato server a causa del lato server limitazioni ...)

Qualsiasi aiuto sarebbe fantastico! Cheers

Answer 1

L'elemento canvas fornisce un metodo toDataURL che restituisce un URL data: che include i dati di immagine con codifica Base64 in un determinato formato. Per esempio:

var jpegUrl = canvas.toDataURL("image/jpeg"); 
var pngUrl = canvas.toDataURL(); // PNG is the default 

Anche se il valore di ritorno non è solo i Base64 codificati dati binari, è una questione semplice per tagliare lo schema e il tipo di file per ottenere solo i dati desiderati.

Il metodo toDataURL avrà esito negativo se il browser pensa di aver disegnato sulla tela qualsiasi dato caricato da un'origine diversa, quindi questo approccio funzionerà solo se i file di immagine sono caricati dallo stesso server della pagina HTML il cui script sta eseguendo questa operazione.

Per ulteriori informazioni, vedere the MDN docs on the canvas API, che include i dettagli su toDataURL e the Wikipedia article on the data: URI scheme, che include dettagli sul formato dell'URI che si riceverà da questa chiamata.

Answer 2

Vedendo come si disegna la tua tela con

$("canvas").drawImage();

sembra che si utilizza jQuery tela (jCanvas) da Caleb Evans. Io in realtà utilizzare tale plug-in e ha un modo semplice per recuperare tela stringa immagine base64 con $('canvas').getCanvasImage();

Ecco un violino che lavora per voi: http://jsfiddle.net/e6nqzxpn/