Как преобразовать графику холста в изображение?
В этой статье мы узнаем, как преобразовать содержимое холста в изображение и загрузить его в менеджер загрузок существующего браузера.
Графика Canvas используется для рисования графики с помощью элемента <canvas> на веб-странице. Он может выступать в качестве графического контейнера. Различные методы, которые облегчает холст, — это рисование контуров, прямоугольников, кругов, текста и добавление изображений. Canvas API предоставляет метод преобразования графики холста в URL-адрес данных, что в терминах помогает нам преобразовать изображение определенного типа, такого как JPEG или PNG и т. д.
Подход: следующий подход будет использоваться для преобразования графики холста в изображения:
- Создайте код HTML, состоящий из элемента холста и гиперссылки.
- Получите доступ к элементу холста и гиперссылке, которые объявлены в приведенном выше фрагменте кода, через селектор JS. Здесь мы будем использовать метод getContext() , который вернет контекст рисования на холсте, иначе вернет null , если холст установлен в другой режим контекста или не поддерживается.
- Нарисуйте на холсте необходимые фигуры. Здесь мы нарисуем круг радиусом 50 в точке (100,75).
- Здесь мы будем использовать метод toDataURL для преобразования содержимого холста в URL-адрес DATA изображения, а затем установим его как href гиперссылки.
- Теперь щелкните гиперссылку, чтобы загрузить изображение, состоящее из круга, нарисованного на холсте.
Пример 1: В этом примере описывается генерация изображения с использованием графики холста.
Выход:
Пример 2. В приведенном ниже примере мы нарисуем дугу и загрузим ее в виде изображения PNG.
Выход: