Manual de Referencia HTML

Comprehensive Lista de etiquetas HTML

Propiedad imgData.data de HTML canvas

propiedad de solo lectura ImageData.data, que devuelve Uint8ClampedArray, que describe un array unidimensional que contiene datos en orden RGBA, utilizando 0 hasta 255representados por enteros (enteros).

Manual de referencia de canvas HTML

ejemplo en línea

Crear un100 * 10Un objeto ImageData de 0 píxeles, donde cada píxel se establece en rojo:

lienzo

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso de la propiedad imgData.data en HTML canvas-Tutoriales básicos(w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0; i<imgData.data.length; i+=4)
{
　　　　imgData.data[i+0]=255;
　　　　imgData.data[i+1]=0;
　　　　imgData.data[i+2]=0;
　　　　imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
</script>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten ImageData propiedad data.

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

La propiedad data devuelve un objeto que contiene los datos de la imagen del objeto ImageData especificado.

Para cada píxel del objeto ImageData, hay cuatro segmentos de información, es decir, los valores RGBA:

R - rojo (0-255)
G - verde (0-255)
B - azul (0-255)
A - canal alpha (0-255; 0 es transparente255 es completamente visible)

color/La información alpha existe en forma de array y se almacena en la propiedad data del objeto ImageData.

Ejemplo:

La sintaxis para cambiar el primer píxel de un objeto ImageData a rojo es:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

La sintaxis para cambiar el segundo píxel de un objeto ImageData a verde es:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Consejo:Ver createImageData()、getImageData() yputImageData() métodos, para obtener más información sobre el objeto ImageData.

Sintaxis de JavaScript

Sintaxis de JavaScript:	imageData.data;

　Manual de referencia de canvas HTML

HTML: <template> etiqueta