В нашей практике неоднократно возникали ситуации, когда необходимо было дать пользователю возможность скачать изображение, которое он сделал на сайте и уже видит в браузере. Например, если пользователь накладывает эффекты на фотографию или создает какую-нибудь открытку с помощью конструктора. Применять в такой ситуации backend для генерации файла для скачивания очень избыточно: даже если получится идеально продублировать логику отрисовки, все равно остается вероятность визуального несоответствия с изображением в браузере.
Ранее мы поделились с вами нашей образовательной презентацией по базовым возможностям 2D-контекста canvas, а сейчас хотим обратить внимание на то, что содержимое холста можно скачать.
Многие знают, что это делают, нажав правой кнопкой мыши на canvas-элемент и выбрав команду «Сохранить изображение как». К сожалению, тех, кто об этом не знает, значительно больше, и полагаться на такое решение нельзя. Необходима понятная всем кнопка «Скачать».
Исправить ситуацию поможет функция
toDataURL, переводящая изображение на холсте в base64-код, который можно использовать в качестве атрибута href для ссылки.Для наглядности мы собрали небольшое демо, где рисуется простой график, который можно скачать как PNG-файл:
https://codepen.io/OlegChulakovStudio/pen/KyEBEN