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
źródło
Krótka odpowiedź:
const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
źródło
;base64,
wartość. Doprowadziło mnie do szaleństwa przez 45 minutWidzę, 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/
źródło
canvas.toDataURL();
jednak wydaje się łatwiejsze.