Получение двоичных данных (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) из Canvas, когда нажимается кнопка, чтобы он переместил данные на сервер...

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

Любая помощь будет замечательной! Приветствия

Ответ 1

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

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

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

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

Для получения дополнительной информации см. документы MDN в canvas API, который содержит сведения о toDataURL и статью в Википедии по схеме data: URI, которая содержит подробную информацию о формате URI, который вы получите от этого вызова.

Ответ 2

Видя, как вы рисуете свой холст с помощью

$("canvas").drawImage();

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

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