HTMLCanvasElement имеет специальный метод toDataURL(), который возвращает закодированный URI данных, представляющий изображение в указанном формате (по умолчанию PNG).

  • Если высота или ширина холста равна 0 или больше максимального размера холста, возвращается строка, содержащая "data:".
  • Если запрошенный тип не image/png, но возвращаемое значение начинается с data:image/png, то запрошенный тип не поддерживается.
  • Chrome также поддерживает тип WEBP(image/webp).

Синтаксис:

canvas.toDataURL(type, encoderOptions);

Параметры:

тип (необязательно)

  • Указывает тип формата изображения.
  • Он будет иметь значение строкового типа и является необязательным параметром со значением типа формата по умолчанию image/png.

encoderOptions (необязательно)

  • Указывает тип формата изображения.
  • Он будет иметь числовое значение и является необязательным параметром со значением по умолчанию 0,92.
  • Значение находится в диапазоне от 0 до 1, указывающее качество изображения, используемое для форматов, использующих сжатие с потерями, таких как image/jpeg и image/webp.
  • Недопустимое значение игнорируется и вместо него рассматривается значение по умолчанию.

Возвращаемое значение

Он возвращает DOMString, содержащий запрошенный URI данных.

Пример 1

<canvas id="canvas" width="640" height="360"></canvas>

JavaScript-код

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);

Вывод в консоль

/*
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABa...5i/JyZmJr6v77XLtUjciSUnklJd29flKi1cAPKgw"
*/

Дополнительные примеры см. на странице Как преобразовать холст в изображение с помощью JavaScript.

Надеюсь, вы узнаете что-то новое. Если эта статья была полезна, поделитесь ею.

Удачного кодирования