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

C’è un modo per leggere il contenuto di una canvas HTML come dati binari?

Al momento ho il seguente codice HTML per mostrare un file di input e la canvas sottostante:

Input:

Canvas

Ho quindi impostato il mio file di input per impostare correttamente il canvas che funziona bene:

 $('#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 }); }; }); }); 

Ora ho bisogno di ottenere i dati binari (Base64 codificati) dalla canvas quando si fa clic sul pulsante in modo da spingere i dati sul server …

Il risultato finale è che ho bisogno di 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 fare sul lato server ritaglio / ridimensionamento a causa di limitazioni lato server …)

Qualsiasi aiuto sarebbe grande! Saluti

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

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

Anche se il valore restituito non è solo i dati binari codificati in base64, è semplice tagliare lo schema e il tipo di file per ottenere solo i dati desiderati.

Il metodo toDataURL fallirà se il browser pensa di aver disegnato sulla canvas qualsiasi dato che è stato caricato da un’origine diversa, quindi questo approccio funzionerà solo se i file di immagine vengono caricati dallo stesso server della pagina HTML in esecuzione nello script questa operazione

Per ulteriori informazioni, consultare i documenti MDN toDataURL canvas , che include i dettagli su toDataURL e l’articolo di Wikipedia sui data: schema URI , che include dettagli sul formato dell’URI che riceverai da questa chiamata.

Vedendo come disegni la tua canvas

$("canvas").drawImage();

sembra che tu usi jQuery Canvas ( jCanvas ) di Caleb Evans. In realtà uso quel plugin e ha un modo semplice per recuperare la stringa di immagine base64 di canvas con $('canvas').getCanvasImage();

Ecco un Fiddle funzionante per te: http://jsfiddle.net/e6nqzxpn/