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

79

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

Jamz_2010
źródło

Odpowiedzi:

147

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.

Martin Atkins
źródło
Nie każda przeglądarka internetowa canvas.toDataURL () jest domyślnie dostępna w formacie PNG; musisz to określić przez canvas.toDataURL ('image / png')
PYK
6

Krótka odpowiedź:

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
Masih Jahangiri
źródło
1
Ukończono zapomniałem, że musisz podzielić ;base64,wartość. Doprowadziło mnie do szaleństwa przez 45 minut
Karl Taylor
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/

Hans Tiono
źródło
Canvas.getCanvasImage nie jest funkcją
Rajiv Sharma
@RajivSharma faktycznie jCanvas ma tej funkcji projects.calebevans.me/jcanvas/docs/getCanvasImagecanvas.toDataURL(); jednak wydaje się łatwiejsze.
zfb