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.
Надеюсь, вы узнаете что-то новое. Если эта статья была полезна, поделитесь ею.
Удачного кодирования