Obtenir des données binaires (base64) à partir de HTML5 Canvas (readAsBinaryString)

Question

Existe-t-il un moyen de lire le contenu d'un Canvas HTML sous forme de données binaires ?

Pour l'instant, j'ai le HTML suivant pour afficher un fichier d'entrée et le canevas en dessous :

<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>

J'ai ensuite configuré mon fichier d'entrée pour définir le canevas correctement, ce qui fonctionne bien :

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

J'ai maintenant besoin de récupérer les données binaires (encodées en Base64) du Canvas lorsque le bouton est cliqué, afin qu'elles soient envoyées au serveur...

Le résultat final est que je dois fournir à l'utilisateur la possibilité de sélectionner un fichier, de le recadrer/redimensionner, puis de cliquer sur un bouton à partir duquel l'image modifiée sera téléchargée sur le serveur (je ne peux pas faire de recadrage/redimensionnement côté serveur en raison des limitations côté serveur...).

Toute aide serait la bienvenue ! Salutations

Answer 1

En canvas fournit un toDataURL qui renvoie un data: URL qui comprend les données de l'image codée en base64 dans un format donné. Par exemple :

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

Bien que la valeur de retour ne soit pas juste les données binaires codées en base64, il est facile de découper le schéma et le type de fichier pour obtenir uniquement les données souhaitées.

En toDataURL La méthode échouera si le navigateur pense que vous avez dessiné sur le canevas des données qui ont été chargées à partir d'une origine différente. Cette approche ne fonctionnera donc que si vos fichiers image sont chargés à partir du même serveur que la page HTML dont le script effectue cette opération.

Pour plus d'informations, voir les documents MDN sur le canvas API qui comprend des détails sur toDataURL y l'article de Wikipedia sur le data: Schéma URI qui contient des détails sur le format de l'URI que vous recevrez lors de cet appel.

Answer 2

Réponse courte :

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];

Answer 3

En voyant comment vous dessinez votre toile avec

$("canvas").drawImage();

il semble que vous utilisiez jQuery Canvas ( jCanvas ) par Caleb Evans. En fait, j'utilise ce plugin et il a un moyen simple de récupérer la chaîne d'image base64 du canvas avec $('canvas').getCanvasImage();

Voici un violon qui fonctionne pour vous : http://jsfiddle.net/e6nqzxpn/