JavaScript Canvas в изображение: методы и примеры преобразования

Чтобы преобразовать элемент холста JavaScript в изображение, существует несколько методов. Вот несколько часто используемых подходов:

Метод 1: toDataURL()
Вы можете использовать метод toDataURL()элемента холста, чтобы преобразовать его в URL-адрес данных, представляющий изображение. Вот пример:

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL();

Метод 2: toBlob()
Метод toBlob()позволяет преобразовать элемент холста в объект Blob, представляющий изображение. Вот пример:

const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
  // Use the Blob object
}, 'image/png');

Метод 3: createImageBitmap()
Метод createImageBitmap()создает растровое изображение из элемента холста. Вот пример:

const canvas = document.getElementById('myCanvas');
createImageBitmap(canvas).then(function(imageBitmap) {
  // Use the ImageBitmap object
});

Метод 4: drawImage()
Вы можете использовать метод drawImage()контекста холста, чтобы нарисовать холст на новом элементе изображения. Вот пример:

const canvas = document.getElementById('myCanvas');
const image = new Image();
image.src = canvas.toDataURL();

Это некоторые из наиболее часто используемых методов преобразования холста JavaScript в изображение. Не забудьте заменить 'myCanvas'идентификатором элемента холста.