Загрузка обработанного изображения с HTML5 Canvas на сервер

Быстрый ответ

Если требуется извлечь двоичные данные в кодировке base64 из элемента canvas, примените метод toDataURL() и отделите часть строки, идущую после запятой:

var base64Data = canvas.toDataURL("image/png").split(',')[1];

В данном случае переменная base64Data будет содержать данные холста в формате base64.

Работа с разнообразием форматов изображений

Метод toDataURL позволяет указать формат изображения для извлечения.

Изъятие данных в формате JPEG

Чтобы получить данные изображения в формате JPEG:

var base64Data = canvas.toDataURL("image/jpeg").split(',')[1]; // Всегда востребованный формат JPEG

Подробнее об этом расскажет наш спикер на видео

Изъятие данных в формате PNG

Для получения данных изображения в формате PNG (который установлен по умолчанию):

var base64Data = canvas.toDataURL().split(',')[1]; // Итак, перед нами данные в формате PNG!

Понимание и обработка ограничений кросс-доменных запросов

Загружаемые изображения должны быть расположены на таком же домене, как и ваше приложение, или иметь корректно указанные CORS заголовки.

Работа со схемой данных: URI

Результат применения метода toDataURL — это схема данных URI. Чтобы извлечь из неё данные в формате base64:

var pureBase64Data = dataURL.split(';base64,')[1]; // Эт voilà, чистый base64 перед нами!

Использование данных в формате base64

Строку в виде base64 можно применять для:

• Передачи на сервер: как часть API-запроса.
• Хранения: с целью последующего использования.
• Применения в DOM: в качестве источника для элементов картинок.

Официальные справочные материалы и руководства

Ознакомьтесь с документацией MDN по canvas.toDataURL и статьей Википедии о схеме данных URI, чтобы более глубоко понять основы.

Визуализация

Canvas (🖼️): "Я могу преобразоваться в данные base64. Великолепно, не так ли?"
Function (💻): "Замечательно! Пора вызвать `toDataURL()`."

Пример процесса:

let canvas = document.getElementById('canvas');
let dataURL = canvas.toDataURL(); // canvas превращается...
let binaryData = atob(dataURL.split(',')[1]); // Данные base64 готовы к использованию

Итог:

🖼️ -> 💻 -> 🍊: "Вуаля! Вот и двоичные данные!"

Практическое использование и лучшие методики

Операции над файлами и их обработка

При необходимости изменения размера или преобразования форматов файла применяйте File API JavaScript.

Упрощение работы с canvas с использованием jQuery

Для тех, кто пользуется jQuery, есть плагин jCanvas, упрощающий работу с холстом и позволяющий легко получать данные в base64.

Передача данных в base64 на сервер

Можно отправлять данные base64 напрямую на сервер в теле POST-запроса:

fetch('your-upload-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ image: base64Data })
}); // Здесь идет отправка данных в base64

Изменение размера на клиентской стороне

Перед извлечением данных можно сжать изображение на клиенте и перерисовать его на новом холсте, используя метод toDataURL(). Это облегчит работу сервера.

Полезные материалы

1. Canvas API – Web API | MDN — Подробная информация о HTML5 Canvas API на Mozilla Developer Network.
2. Использование файлов в веб-приложениях – Web API | MDN — Гид по работе с файлами в веб-приложениях.
3. Чтение файлов в JavaScript | Статьи | web.dev — Советы по работе с файлами на JavaScript.
4. javascript – Захват HTML canvas как GIF/JPG/PNG/PDF? – Stack Overflow — Практичные подходы к преобразованию содержимого Canvas обсуждаются на форуме Stack Overflow.
5. Кодирование и декодирование Base64 – Онлайн — Инструмент для кодирования и декодирования данных Base64.
6. FileReader: метод readAsBinaryString() – Web API | MDN — Описание метода FileReader API для чтения файлов.
7. GitHub – blueimp/JavaScript-Canvas-to-Blob: Функция JavaScript Canvas to Blob для преобразования элементов Canvas в объекты Blob. — Преобразование Canvas в Blob объект.