HTMLCanvasElement.toDataURL() — метод, который возвращает data URI изображения в
+ формате, заданном параметром type (по умолчанию PNG). Возвращаемое изображение имеет
+ разрешение 96 dpi.
0 или больше максимального размера холста,
+ возвращается строка "data:,".image/png, но возвращаемое значение начинается с data:image/png, то запрошенный тип не поддерживается.image/webp.canvas.toDataURL(type, encoderOptions); ++ +
type {{optional_inline}}image/png.encoderOptions {{optional_inline}}0 и 1, указывающее качество изображения для форматов, использующих сжатие с потерями, таких как
+ image/jpeg и image/webp.0.92. Остальные аргументы игнорируются.Строка ({{domxref("DOMString")}}), содержащая запрошенный data URI.
+ +SecurityErrorВозьмём следующий {{HTMLElement("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"
+
+
+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);
+
+
+Вы можете использовать эту технику вместе с событиями мыши, чтобы динамически изменять изображения (оттенки серого или цвет в этом примере):
+ +<img class="grayscale" src="myPicture.png" alt="Описание моей картинки" />+ +
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);
+ }
+}
+
+| Спецификация | +Статус | +Коммментарий | +
|---|---|---|
| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", + "HTMLCanvasElement.toDataURL")}} | +{{Spec2('HTML WHATWG')}} | +Нет изменений с последней версии {{SpecName('HTML5 W3C')}} | +
| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", + "HTMLCanvasElement.toDataURL")}} | +{{Spec2('HTML5.1')}} | ++ |
| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", + "HTMLCanvasElement.toDataURL")}} | +{{Spec2('HTML5 W3C')}} | +Версия {{SpecName('HTML WHATWG')}} содержит исходное определение. + | +
{{Compat("api.HTMLCanvasElement.toDataURL")}}
+ +