Отримання двійкових (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 ) Калеба Еванса. Я насправді використовую цей плагін, і він має простий спосіб отримати рядок зображення canvas base64 за допомогою$('canvas').getCanvasImage();

Ось вам робоча скрипка: http://jsfiddle.net/e6nqzxpn/