Abrufen von Binärdaten (base64) aus HTML5 Canvas (readAsBinaryString)

Gibt es eine Möglichkeit, den Inhalt eines HTML-Canvas als Binärdaten zu lesen?

Im Moment habe ich den folgenden HTML-Code, um eine Eingabedatei und die Leinwand darunter anzuzeigen:

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

Ich habe dann meine Eingabedatei so eingerichtet, dass die Zeichenfläche korrekt eingestellt wird, was gut funktioniert:

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

Ich muss jetzt die Binärdaten (Base64-codiert) vom Canvas abrufen, wenn auf die Schaltfläche geklickt wird, damit die Daten auf den Server übertragen werden ...

Das Endergebnis ist, dass ich dem Benutzer die Möglichkeit geben muss, eine Datei auszuwählen, sie zuzuschneiden / ihre Größe zu ändern und dann auf eine Schaltfläche zu klicken, an welcher Stelle das bearbeitete Bild auf den Server hochgeladen wird (ich kann es nicht serverseitig tun Zuschneiden / Ändern der Größe aufgrund serverseitiger Einschränkungen ...)

Jede Hilfe wäre toll! Prost

Das canvasElement stellt eine toDataURLMethode bereit , die eine data:URL zurückgibt , die die base64-codierten Bilddaten in einem bestimmten Format enthält. Zum Beispiel:

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

Obwohl der Rückgabewert nicht nur die Base64-codierten Binärdaten sind, ist es einfach, das Schema und den Dateityp abzuschneiden, um genau die gewünschten Daten zu erhalten.

Die toDataURLMethode schlägt fehl, wenn der Browser der Ansicht ist, dass Sie Daten, die von einem anderen Ursprung geladen wurden, auf die Zeichenfläche gezeichnet haben. Dieser Ansatz funktioniert daher nur, wenn Ihre Bilddateien vom selben Server wie die HTML-Seite geladen werden, deren Skript dies ausführt Betrieb.

Weitere Informationen finden Sie in den MDN-Dokumenten zur canvasAPI , die Details zu enthalten toDataURL, und im Wikipedia-Artikel zum data:URI-Schema , der Details zum Format der URI enthält, die Sie von diesem Aufruf erhalten.

Kurze Antwort:

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

Sehen, wie Sie Ihre Leinwand mit zeichnen

$("canvas").drawImage();

Es scheint, dass Sie jQuery Canvas ( jCanvas ) von Caleb Evans verwenden. Ich benutze dieses Plugin tatsächlich und es hat eine einfache Möglichkeit, Canvas Base64-Image-String mit abzurufen$('canvas').getCanvasImage();

Hier ist eine funktionierende Geige für Sie: http://jsfiddle.net/e6nqzxpn/