Вчера мы начали на наших Базовый холст курс Отказ Думая о проекте, который я хочу сделать, мне нужно экспортировать холст как изображение.
Итак, как мы преобразуем холст на изображение?
На самом деле есть два способа сделать это, и мы рассмотрим оба.
Смотрите конечный результат на этом кодепене.
1. Щелкните правой кнопкой мыши, чтобы сохранить
Все знают этот вариант, но мы можем просто щелкнуть правой кнопкой мыши, чтобы сохранить на холсте.
Это будет работать только в некоторых браузерах, поэтому это не самый допустимый способ сохранения его.
Примечание: помните, что холст не имеет фона!
2. Добавление кнопки загрузки
Другой вариант – добавить кнопку загрузки на нашу страницу. Эта кнопка загрузки затем экспортирует контент Canvas RU Откройте изображение Base64 на другой вкладке.
Добавление кнопки:
Теперь давайте добавим переменную кнопки нашим JavaScript
const download = document.getElementById('download');
Потрясающе, теперь нам нужно добавить EventListener
к нему и слушать команду click.
download.addEventListener('click', function(e) { var link = document.createElement('a'); link.download = 'download.png'; link.href = canvas.toDataURL() link.click(); link.delete; });
Мы создаем временную href
На котором мы разместим URL-адрес данных Canvas, а затем нажмите на него.
Мы используем Todataurl
Функция, которая возвращает строку Base64, которая выглядит что-то подобное:
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
Поддержка браузера
Элемент Canvas хорошо поддерживается в наши дни и вызывает хороший вариант, если вы хотите нарисовать векторы на экране.
Спасибо за чтение, и давайте подключимся!
Спасибо за чтение моего блога. Не стесняйтесь подписаться на мой рассылку электронной почты и подключиться к Facebook или Твиттер
Оригинал: “https://dev.to/dailydevtips1/vanilla-javascript-save-canvas-as-an-image-3pfa”