Pobieranie danych binarnych (base64) z kanwy HTML5 (readAsBinaryString)

Czy istnieje sposób na odczytanie zawartości HTML Canvas jako danych binarnych?

W tej chwili mam następujący HTML, aby pokazać plik wejściowy i płótno poniżej:

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

Następnie skonfigurowałem mój plik wejściowy, aby poprawnie ustawić płótno, co działa dobrze:

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

Teraz muszę pobrać dane binarne (zakodowane w Base64) z kanwy po kliknięciu przycisku, aby przesłać dane na serwer ...

W rezultacie muszę zapewnić użytkownikowi możliwość wybrania pliku, przycięcia / zmiany rozmiaru, a następnie kliknięcia przycisku, w którym to momencie edytowany obraz zostanie przesłany na serwer (nie mogę zrobić po stronie serwera kadrowanie / zmiana rozmiaru z powodu ograniczeń po stronie serwera ...)

Każda pomoc byłaby świetna! Twoje zdrowie

canvasElementem dostarcza toDataURLmetodę, która zwraca data:adres URL, który zawiera dane obrazu zakodowane base64 w danym formacie. Na przykład:

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

Chociaż wartość zwracana to nie tylko dane binarne zakodowane w formacie base64, łatwo jest odciąć schemat i typ pliku, aby uzyskać tylko potrzebne dane.

toDataURLMetoda zawiedzie, jeśli przeglądarka myśli pan uwagę na płótnie żadnych danych, które zostały załadowane z innego pochodzenia, więc takie podejście będzie tylko praca czy pliki graficzne są ładowane z tym samym serwerze co strona HTML, który wykonuje ten skrypt operacja.

Aby uzyskać więcej informacji, zobacz dokumentację MDN dotyczącą canvasinterfejsu API , która zawiera szczegółowe informacje toDataURL, oraz artykuł w Wikipedii na temat data:schematu URI , który zawiera szczegółowe informacje na temat formatu identyfikatora URI, który otrzymasz w wyniku tego wywołania.

Krótka odpowiedź:

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

Widzę, jak rysujesz płótno

$("canvas").drawImage();

wygląda na to, że używasz jQuery Canvas ( jCanvas ) autorstwa Caleba Evansa. Właściwie używam tej wtyczki i ma prosty sposób na pobranie ciągu obrazu base64 z kanwy$('canvas').getCanvasImage();

Oto działające Fiddle dla Ciebie: http://jsfiddle.net/e6nqzxpn/