1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: HTMLCanvasElement.toDataURL()
slug: Web/API/HTMLCanvasElement/toDataURL
tags:
- API
- Canvas
- HTMLCanvasElement
- Lienzo
- Referencia
- metodo
translation_of: Web/API/HTMLCanvasElement/toDataURL
---
<div>
<div>
<div>{{APIRef("Canvas API")}}</div>
</div>
</div>
<p>El método <strong><code>HTMLCanvasElement.toDataURL()</code></strong> devuelve un <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> el cual contiene una representación de la imagen en el formato especificado por el parámetro <code>type</code> (por defecto es <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). La imagen obtenida tendrá una resolución de 96 dpi.</p>
<ul>
<li>Si la altura o anchura del canvas es <code>0</code>, devuelve un string con <code>"data:,"</code></li>
<li>Si el tipo solicitado no es <code>image/png</code> pero el valor devuelto empieza por <code>data:image/png</code>, entonces el formato especificado no esta soportado.</li>
<li>Chrome también soporta el tipo <code>image/webp</code>.</li>
</ul>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>tipo</em>, <em>opcionesCodificación</em>);</var>
</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><code>tipo</code>{{optional_inline}}</dt>
<dd>Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es <code>image/png</code>.</dd>
<dt><code>opcionesCodificación</code>{{optional_inline}}</dt>
<dd>Un {{jsxref("Number")}} entre <code>0</code> y <code>1</code> indicando la calidad de la imagen si el tipo solicitado es <code>image/jpeg</code> o <code>image/webp</code>.<br>
Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es <code>0.92</code>. Otros argumentos se ignoran.</dd>
</dl>
<h3 id="Valor_devuelto">Valor devuelto</h3>
<p>Un {{domxref("DOMString")}} que contiene el valor <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Dado un elemento {{HTMLElement("canvas")}}:</p>
<pre class="brush: html"><canvas id="canvas" width="5" height="5"></canvas>
</pre>
<p>Puedes obtener el data-URL del canvas con las siguientes líneas:</p>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
</pre>
<h3 id="Establecer_la_calidad_de_imagen_con_jpegs">Establecer la calidad de imagen con jpegs</h3>
<pre class="brush: js">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);
</pre>
<h3 id="Example:_Dynamically_change_images" name="Example:_Dynamically_change_images">Ejemplo: Cambiar imágenes dinámicamente</h3>
<p>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):</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><img class="grayscale" src="myPicture.png" alt="Description of my picture" /></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js;highlight:[33]">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);
}
}</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
<h2 id="See_Also" name="See_Also">Ver también</h2>
<ul>
<li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
<li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> en la referencía <a href="/en-US/docs/Web/HTTP">HTTP</a>.</li>
</ul>
|
