HTMLCanvasElement.toDataURL()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTMLCanvasElement.toDataURL() — метод, который возвращает data URI изображения в
формате, заданном параметром type (по умолчанию PNG). Возвращаемое изображение имеет
разрешение 96 dpi.
- Если высота или ширина холста равна
0или больше максимального размера холста, возвращается строка"data:,". - Если запрошенный тип отличается от
image/png, но возвращаемое значение начинается сdata:image/png, то запрошенный тип не поддерживается. - Chrome также поддерживает тип
image/webp.
Синтаксис
canvas.toDataURL(type, encoderOptions);
Параметры
typeНеобязательный-
Строка (
DOMString), указывающая формат изображения. По умолчанию —image/png. encoderOptionsНеобязательный-
Число (типа
Number) между0и1, указывающее качество изображения для форматов, использующих сжатие с потерями, таких какimage/jpegиimage/webp. Если передан невалидный аргумент, то используется значение по умолчанию0.92. Остальные аргументы игнорируются.
Возвращаемое значение
Исключения
SecurityError-
Растровое изображение холста не соответствует источнику; по крайней мере часть его содержимого могла быть загружена с сайта, отличного от того, с которого был загружен сам документ.
Примеры
Возьмём следующий <canvas> элемент:
<canvas id="canvas" width="5" height="5"></canvas>
Вы можете получить его data-URL следующим образом:
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
Настройка качества изображения с помощью jpegs
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
Пример: Динамическое изменение изображений
Вы можете использовать эту технику вместе с событиями мыши, чтобы динамически изменять изображения (оттенки серого или цвет в этом примере):
HTML
<img class="grayscale" src="myPicture.png" alt="Описание моей картинки" />
JavaScript
window.addEventListener("load", removeColors);
function showColorImg() {
this.style.display = "none";
this.nextSibling.style.display = "inline";
}
function showGrayImg() {
this.previousSibling.style.display = "inline";
this.style.display = "none";
}
function removeColors() {
var aImages = document.getElementsByClassName("grayscale"),
nImgsLen = aImages.length,
oCanvas = document.createElement("canvas"),
oCtx = oCanvas.getContext("2d");
for (
var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0;
nImgId < nImgsLen;
nImgId++
) {
oColorImg = aImages[nImgId];
nWidth = oColorImg.offsetWidth;
nHeight = oColorImg.offsetHeight;
oCanvas.width = nWidth;
oCanvas.height = nHeight;
oCtx.drawImage(oColorImg, 0, 0);
oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
aPix = oImgData.data;
nPixLen = aPix.length;
for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
aPix[nPixel + 2] =
aPix[nPixel + 1] =
aPix[nPixel] =
(aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
}
oCtx.putImageData(oImgData, 0, 0);
oGrayImg = new Image();
oGrayImg.src = oCanvas.toDataURL();
oGrayImg.onmouseover = showColorImg;
oColorImg.onmouseout = showGrayImg;
oCtx.clearRect(0, 0, nWidth, nHeight);
oColorImg.style.display = "none";
oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
}
}
Спецификации
| Specification |
|---|
| HTML # dom-canvas-todataurl-dev |
Совместимость с браузерами
Loading…
Смотрите также
- Интерфейс
HTMLCanvasElement. - Data URLs.