Как сохранить HTML Canvas в виде изображения

03.04.2024 | Категория: Web-мастеру и не только | Автор: ManHunter

Как сохранить HTML Canvas в виде изображения

Canvas - элемент HTML5, предназначенный для создания и обработки растрового изображения при помощи скриптов на языке JavaScript. На его основе, к примеру, работают различные библиотеки для построения графиков, различные онлайновые редакторы изображений, сервисы навигации и даже достаточно продвинутые анимированные игры. Все области применения трудно перечислить. Но просто рисовать в браузере иногда может быть недостаточно, надо передать готовый результат на сервер или сохранить в виде изображения на локальный компьютер.

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

Code (HTML) : Убрать нумерацию

<canvas id="my_canvas"></canvas>
<div>
<input type="button" onclick="save_canvas('png');" value="Save as PNG" />
<input type="button" onclick="save_canvas('jpg');" value="Save as JPG" />
<input type="button" onclick="save_canvas('webp');" value="Save as WEBP" />
</div>
<div>
<input type="button" onclick="upload_canvas('png');" value="Upload as PNG" />
<input type="button" onclick="upload_canvas('jpg');" value="Upload as JPG" />
<input type="button" onclick="upload_canvas('webp');" value="Upload as WEBP" />
</div>

Теперь функции обработчиков. Они базируются на методе toDataURL, с помощью которого можно получить содержимое canvas в виде data:URL. Для сохранения картинки через браузер в DOM-структуре формируется фейковый элемент-ссылка и затем эмулируется клик на него.

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
function save_canvas(save_type) {
var canvas = document.getElementById('my_canvas');
if (save_type=='jpg') {
// Формат JPEG с качеством 95%
var canvas_data = canvas.toDataURL('image/jpeg', 0.95);
}
else if (save_type=='webp') {
// Формат WEBP с качеством 90%
var canvas_data = canvas.toDataURL('image/webp', 0.9);
}
else {
// Формат PNG по умолчанию
var canvas_data = canvas.toDataURL();
}
// Создать фейковый элемент-ссылку
var fake_link=document.createElement('a');
// Содержимое изображения
fake_link.href = canvas_data;
// Имя файла для сохранения
fake_link.download = 'canvas_downloaded_as_'+save_type;
// Имитация клика на ссылке для сохранения файла
fake_link.click();
// Удалить фейковый элемент
fake_link.remove();
}
</script>

Для форматов, поддерживающих сжатие, таких как JPEG и WEBP, можно указывать качество результирующего изображения. Оно задается последним параметром и выражается дробным числом от 0.01 до 1.0, что соответствует значениям от 1% до 100%. Также нужно учитывать, что формат WEBP поддерживают не все браузеры, так что правильным решением будет перед получением данных проверить поддержку этого формата или хоты бы обернуть код получения данных в try-catch.

Также можно передавать данные через AJAX, если браузер не поддерживает fetch и промисы. В приведенном примере промисы используются только для сокращения кода.

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
function upload_canvas(save_type) {
var canvas = document.getElementById('my_canvas');
if (save_type=='jpg') {
// Формат JPEG с качеством 95%
var canvas_data = canvas.toDataURL('image/jpeg', 0.95);
}
else if (save_type=='webp') {
// Формат WEBP с качеством 90%
var canvas_data = canvas.toDataURL('image/webp', 0.9);
}
else {
// Формат PNG по умолчанию
var canvas_data = canvas.toDataURL();
}
// Сформировать имя файла для передачи на сервер
var file_name='canvas_uploaded_as_'+save_type+'.'+save_type;
// Отправить содержимое canvas на сервер
var response = fetch(
'canvas_uploader.php?filename='+file_name,
{method:"POST", body:canvas_data}
);
}
</script>

Файл-приемник данных будет примерно такой. Он читает данные из потока php://input, после чего обрабатывает, декодирует и сохраняет их в файл. Имя файла передается в параметрах.

Code (PHP) : Убрать нумерацию

$data=file_get_contents('php://input');
$tmp=explode('base64,',$data,2);
if (isset($tmp[1])) {
$f=fopen($_GET['filename'], 'wb');
fwrite($f, base64_decode($tmp[1]));
fclose($f);
}

ВНИМАНИЕ! Ни в коем случае не используйте этот загрузчик в таком виде, тут приведены только минимально необходимые функции, а безопасность вообще нулевая. Любая информация, поступающая от пользователя, требует всесторонней проверки.

Рабочий пример скрипта можно посмотреть на демонстрационной странице. Загрузка файлов по понятным причинам отключена, но в консоли можете убедиться, что заглушка на сервере получила результат.

Просмотров: 693 | Комментариев: 0

Метки: HTML, JavaScript, графика

Добавить комментарий

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 35,665 раз

День добровольца (волонтера)

День начала контрнаступления советских войск под Москвой

День онлайн-предпринимателя

День ниндзя

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0025 сек.) / Память: 4.5 Mb

	2024 - ДЕКАБРЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Как сохранить HTML Canvas в виде изображения

Комментарии

Добавить комментарий