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
|
---
title: CanvasRenderingContext2D.getImageData()
slug: Web/API/CanvasRenderingContext2D/getImageData
tags:
- CanvasRenderingContext2D
- Context 2D
- Español
- Method
- Reference
- getImageData
translation_of: Web/API/CanvasRenderingContext2D/getImageData
---
<div>{{APIRef}}</div>
<p> </p>
<p>El método CanvasRenderingContext2D.getImageData() de la API de Canvas 2D devuelve un objeto ImageData que representa los datos de píxeles subyacentes para el área del lienzo denotada por el rectángulo que comienza en (sx, sy) y tiene un ancho de sw y una altura de sh. Este método no se ve afectado por la matriz de transformación de la lona.</p>
<p>Los píxeles fuera del área del lienzo están presentes como valores negros transparentes en los datos de imagen devueltos.</p>
<p> </p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><code>sx</code></dt>
<dd>La coordenada 'x' de la esquina superior izquierda del rectángulo del que se extraerán los datos de imagen.</dd>
<dt><code>sy</code></dt>
<dd>La coordenada 'y' de la esquina superior izquierda del rectángulo del que se extraerá el ImageData.</dd>
<dt><code>sw</code></dt>
<dd>El ancho del rectángulo del que se extraerán los datos de la imagen.</dd>
<dt><code>sh</code></dt>
<dd>La altura del rectángulo del que se extraerán los datos de la imagen.</dd>
</dl>
<h3 id="Valor_de_retorno">Valor de retorno</h3>
<p>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData" title="The ImageData interface represents the underlying pixel data of an area of a <canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData()."><code>ImageData</code></a> object containing the image data for the given rectangle of the canvas.</p>
<h3 id="Errores_cometidos">Errores cometidos</h3>
<dl>
<dt>IndexSizeError</dt>
<dd>Lanzado si cualquiera de los argumentos de anchura o altura es cero.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Usando_el_método_getImageData">Usando el método getImageData</h3>
<p>Esto es sólo un simple fragmento de código que utiliza el método getImageData. Para obtener más información, consulte <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulación de píxeles con Canvas</a> y el objeto ImageData.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();
console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
</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">Comentario</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li>La interfaz que lo define, {{domxref("CanvasRenderingContext2D")}}.</li>
<li>{{domxref("ImageData")}}</li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulación de píxeles con Canvas</a></li>
</ul>
|
