This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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 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 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 |
Совместимость с браузерами
Смотрите также
- Интерфейс
HTMLCanvasElement. - Data URLs.