From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../web/api/htmlcanvaselement/todataurl/index.html | 159 +++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/es/web/api/htmlcanvaselement/todataurl/index.html (limited to 'files/es/web/api/htmlcanvaselement/todataurl') diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.html b/files/es/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..30e2fdd71a --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,159 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +tags: + - API + - Canvas + - HTMLCanvasElement + - Lienzo + - Referencia + - metodo +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

El método HTMLCanvasElement.toDataURL() devuelve un data URI el cual contiene una representación de la imagen en el formato especificado por el parámetro type (por defecto es PNG). La imagen obtenida tendrá una resolución de 96 dpi.

+ + + +

Sintaxis

+ +
canvas.toDataURL(tipo, opcionesCodificación);
+
+ +

Parámetros

+ +
+
tipo{{optional_inline}}
+
Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es image/png.
+
opcionesCodificación{{optional_inline}}
+
Un {{jsxref("Number")}} entre 0 y 1 indicando la calidad de la imagen si el tipo solicitado es image/jpeg o image/webp.
+ Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es 0.92. Otros argumentos se ignoran.
+
+ +

Valor devuelto

+ +

Un {{domxref("DOMString")}} que contiene el valor data URI.

+ +

Ejemplos

+ +

Dado un elemento {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="5" height="5"></canvas>
+
+ +

Puedes obtener el data-URL del canvas con las siguientes líneas:

+ +
var canvas = document.getElementById('canvas');
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+
+ +

Establecer la calidad de imagen con 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);
+
+ +

Ejemplo: Cambiar imágenes dinámicamente

+ +

Se puede usar esta técnica junto con los eventos del mouse para cambiar las imágenes de manera dinámica (escala de grises versus color en este ejemplo):

+ +

HTML

+ +
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
+ +

JavaScript

+ +
window.addEventListener('load', quitarColor);
+
+function verImgEnColor() {
+  this.style.display = 'none';
+  this.nextSibling.style.display = 'inline';
+}
+
+function verImgEnGris() {
+  this.previousSibling.style.display = 'inline';
+  this.style.display = 'none';
+}
+
+function quitarColor() {
+  var aImages = document.getElementsByClassName('escalagrises'),
+      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++) {
+    var 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 = verImgEnColor;
+    oColorImg.onmouseout = verImgEnGris;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{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')}}Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("api.HTMLCanvasElement.toDataURL")}}

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf