Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Как сохранить HTML Canvas в виде изображения
Как сохранить HTML Canvas в виде изображения

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

Начнем с верстки. Тут будет один тег canvas и несколько кнопок, при нажатии на которые будет выполнено сохранение картинки или передача данных картинки на сервер.
  1. <canvas id="my_canvas"></canvas>
  2.  
  3. <div>
  4.   <input type="button" onclick="save_canvas('png');" value="Save as PNG" />
  5.   <input type="button" onclick="save_canvas('jpg');" value="Save as JPG" />
  6.   <input type="button" onclick="save_canvas('webp');" value="Save as WEBP" />
  7. </div>
  8.  
  9. <div>
  10.   <input type="button" onclick="upload_canvas('png');" value="Upload as PNG" />
  11.   <input type="button" onclick="upload_canvas('jpg');" value="Upload as JPG" />
  12.   <input type="button" onclick="upload_canvas('webp');" value="Upload as WEBP" />
  13. </div>
Теперь функции обработчиков. Они базируются на методе toDataURL, с помощью которого можно получить содержимое canvas в виде data:URL. Для сохранения картинки через браузер в DOM-структуре формируется фейковый элемент-ссылка и затем эмулируется клик на него.
  1. <script type="text/javascript">
  2. function save_canvas(save_type) {
  3.     var canvas document.getElementById('my_canvas');
  4.  
  5.     if (save_type=='jpg') {
  6.         // Формат JPEG с качеством 95%
  7.         var canvas_data canvas.toDataURL('image/jpeg'0.95);
  8.     }
  9.     else if (save_type=='webp') {
  10.         // Формат WEBP с качеством 90%
  11.         var canvas_data canvas.toDataURL('image/webp'0.9);
  12.     }
  13.     else {
  14.         // Формат PNG по умолчанию
  15.         var canvas_data canvas.toDataURL();
  16.     }
  17.  
  18.     // Создать фейковый элемент-ссылку
  19.     var fake_link=document.createElement('a');
  20.     // Содержимое изображения
  21.     fake_link.href canvas_data;
  22.     // Имя файла для сохранения
  23.     fake_link.download 'canvas_downloaded_as_'+save_type;
  24.     // Имитация клика на ссылке для сохранения файла
  25.     fake_link.click();
  26.     // Удалить фейковый элемент
  27.     fake_link.remove();
  28. }
  29. </script>
Для форматов, поддерживающих сжатие, таких как JPEG и WEBP, можно указывать качество результирующего изображения. Оно задается последним параметром и выражается дробным числом от 0.01 до 1.0, что соответствует значениям от 1% до 100%. Также нужно учитывать, что формат WEBP поддерживают не все браузеры, так что правильным решением будет перед получением данных проверить поддержку этого формата или хоты бы обернуть код получения данных в try-catch.

Также можно передавать данные через AJAX, если браузер не поддерживает fetch и промисы. В приведенном примере промисы используются только для сокращения кода.
  1. <script type="text/javascript">
  2. function upload_canvas(save_type) {
  3.     var canvas document.getElementById('my_canvas');
  4.  
  5.     if (save_type=='jpg') {
  6.         // Формат JPEG с качеством 95%
  7.         var canvas_data canvas.toDataURL('image/jpeg'0.95);
  8.     }
  9.     else if (save_type=='webp') {
  10.         // Формат WEBP с качеством 90%
  11.         var canvas_data canvas.toDataURL('image/webp'0.9);
  12.     }
  13.     else {
  14.         // Формат PNG по умолчанию
  15.         var canvas_data canvas.toDataURL();
  16.     }
  17.  
  18.     // Сформировать имя файла для передачи на сервер
  19.     var file_name='canvas_uploaded_as_'+save_type+'.'+save_type;
  20.     // Отправить содержимое canvas на сервер
  21.     var response fetch(
  22.         'canvas_uploader.php?filename='+file_name,
  23.         {method:"POST"body:canvas_data}
  24.     );
  25. }
  26. </script>
Файл-приемник данных будет примерно такой. Он читает данные из потока php://input, после чего обрабатывает, декодирует и сохраняет их в файл. Имя файла передается в параметрах.
  1. $data=file_get_contents('php://input');
  2. $tmp=explode('base64,',$data,2);
  3. if (isset($tmp[1])) {
  4.     $f=fopen($_GET['filename'], 'wb');
  5.     fwrite($fbase64_decode($tmp[1]));
  6.     fclose($f);
  7. }
ВНИМАНИЕ! Ни в коем случае не используйте этот загрузчик в таком виде, тут приведены только минимально необходимые функции, а безопасность вообще нулевая. Любая информация, поступающая от пользователя, требует всесторонней проверки.

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

Поделиться ссылкой ВКонтакте
Просмотров: 197 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0039 сек.) / Память: 4.5 Mb
Наверх