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

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

На данный момент у меня есть следующий 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Элемент обеспечивает toDataURLметод , который возвращает data:URL , который включает в себя данные изображения в кодировке base64 в заданном формате. Например:

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

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

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

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

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

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

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

$("canvas").drawImage();

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

Вот вам рабочий Fiddle: http://jsfiddle.net/e6nqzxpn/