web-dev-qa-db-fra.com

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

Est-il possible de lire le contenu d'un canevas HTML en tant que données binaires?

Pour le moment, le code HTML suivant montre un fichier d'entrée et la zone de travail située 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 d'obtenir les données binaires (codées en Base64) du canevas lorsque l'utilisateur clique sur le bouton pour qu'il envoie les données au serveur ...

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

Toute aide est la bienvenue! À votre santé

javascripthtml5html5-canvasfileapi
72
Jamz_2010

L'élément canvas fournit une méthode toDataURL qui renvoie un data: URL contenant les données d’image codées 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 seulement les données binaires encodées en base64, il est simple de supprimer le schéma et le type de fichier pour obtenir uniquement les données que vous souhaitez. vouloir.

La méthode toDataURL échouera si le navigateur pense que vous avez dessiné sur le canevas des données 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 le fichier HTML. page dont le script effectue cette opération.

Pour plus d'informations, voir la documentation MDN sur l'API canvas , qui contient des informations détaillées sur toDataURL, et l'article de Wikipedia sur l'Agent data: Schéma d'URI , qui inclut des détails sur le format de l'URI que vous recevrez de cet appel.

131
Martin Atkins

Voir comment vous dessinez votre toile avec

$("canvas").drawImage();

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

Voici un travail Fiddle pour vous: http://jsfiddle.net/e6nqzxpn/

0
Hans Tiono