Получение двоичных (base64) данных из HTML5 Canvas (readAsBinaryString)

Есть ли способ прочитать содержимое HTML Canvas в виде двоичных данных?

На данный момент у меня есть следующий HTML-код для отображения входного файла и холста под ним:

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

Затем я настроил свой входной файл, чтобы правильно установить холст, который отлично работает:

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

Теперь мне нужно получить двоичные данные (в кодировке Base64) с холста при нажатии кнопки, чтобы он отправил данные на сервер...

Конечным результатом является то, что мне нужно предоставить пользователю возможность выбрать файл, обрезать/изменить его размер, а затем нажать кнопку, после чего отредактированное изображение будет загружено на сервер (я не могу сделать это на стороне сервера). обрезка/изменение размера из-за ограничений на стороне сервера...)

Любая помощь будет здорово! Ваше здоровье


javascript html html5-canvas fileapi
person Jamz_2010    schedule 28.03.2013    source источник

Ответы (3)


arrow_upward
152
arrow_downward

Элемент canvas предоставляет метод toDataURL, который возвращает URL-адрес data:, включающий данные изображения в кодировке base64 в заданном формате. Например:

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

Хотя возвращаемое значение — это не просто двоичные данные в кодировке base64, достаточно просто отсечь схему и тип файла, чтобы получить именно те данные, которые вам нужны.

Метод toDataURL потерпит неудачу, если браузер решит, что вы нарисовали на холсте любые данные, которые были загружены из другого источника, поэтому этот подход будет работать только в том случае, если ваши файлы изображений загружены с того же сервера, что и HTML-страница, сценарий которой выполняется. эта операция.

Для получения дополнительной информации см. документацию MDN по canvas API, которая включает подробную информацию о toDataURL и < a href="http://en.wikipedia.org/wiki/Data_URI_scheme">статья Википедии о схеме data: URI, в которой содержится подробная информация о формате URI, который вы получите от этого вызова.

person Martin Atkins    schedule 28.03.2013
comment
Не в каждом веб-браузере canvas.toDataURL() используется формат PNG по умолчанию; вы должны указать его через canvas.toDataURL('image/png') - person PYK; 22.09.2020

arrow_upward
9
arrow_downward

Короткий ответ:

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
person Masih Jahangiri    schedule 19.08.2020
comment
Completed забыл, что вам нужно разделить значение ;base64,. Свел меня с ума за 45 минут - person Karl Taylor; 02.10.2020

arrow_upward
1
arrow_downward

Глядя, как вы рисуете свой холст с

$("canvas").drawImage();

похоже, вы используете jQuery Canvas (jCanvas) Калеба Эванса. На самом деле я использую этот плагин, и у него есть простой способ получить строку изображения холста base64 с помощью $('canvas').getCanvasImage();

Вот рабочая скрипта для вас: http://jsfiddle.net/e6nqzxpn/

person Hans Tiono    schedule 03.12.2015
comment
canvas.getCanvasImage не является функцией - person Rajiv Sharma; 28.03.2018
comment
@RajivSharma на самом деле jCanvas имеет эту функцию projects.calebevans.me/jcanvas/docs/getCanvasImage однако canvas.toDataURL(); кажется проще. - person Tony; 06.12.2018