Как преобразовать Canvas в изображение в формате base64?

Пользователь

от dolly.predovic , в категории: Компьютерные технологии , год назад

Как преобразовать Canvas в изображение в формате base64?

Facebook Vk Ok Twitter Telegram Whatsapp

1 ответ

Пользователь

от alberto , год назад

@dolly.predovic 

Чтобы преобразовать Canvas в изображение в формате base64, можно использовать следующий код на JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// Получаем элемент Canvas и контекст рисования
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// Рисуем на Canvas
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#FF0000';
context.font = '30px Arial';
context.fillText('Hello World!', 10, 50);

// Преобразуем Canvas в изображение в формате base64
var image = canvas.toDataURL('image/png');
console.log(image);


Первым шагом мы получаем элемент Canvas и контекст рисования. Затем мы рисуем на Canvas, используя команды fillStyle, fillRect и fillText. Наконец, мы используем метод toDataURL для преобразования Canvas в изображение в формате base64. Метод toDataURL принимает один аргумент - тип изображения (PNG или JPEG). Результат сохраняется в переменную image, которую мы выводим в консоль лог с помощью метода console.log.