Manual de Referencia HTML

HTML 标签大全

Método HTML canvas getImageData()

getImageData() devuelve un objeto ImageData que describe los datos de píxeles implícitos de la región del canvas, esta región se representa mediante un rectángulo, con punto de partida (sx, sy), ancho sw y altura sh.

Manual de referencia de HTML canvas

Ejemplo en línea

El siguiente código utiliza getImageData() para copiar los datos de píxeles del rectángulo especificado del lienzo, y luego utiliza putImageData() para devolver los datos de la imagen al lienzo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>Uso del método getImageData() en HTML canvas-<título>教程 básico(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　ancho="3" altura="150" style="border:1px sólido #d3d3d3">
Su navegador no admite　HTML5　canvas　etiqueta.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
　　　　var imgData=ctx.getImageData(10,10,50,50);
　　　　ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">Copiar</button>
</body>
</html>

Ver la prueba ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten getImageData() método.

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

Definición y uso

El método getImageData() devuelve un objeto ImageData, que copia los datos de píxeles del rectángulo especificado del lienzo.

Nota:El objeto ImageData no es una imagen, define una parte del lienzo (un rectángulo) y almacena la información de cada píxel dentro de ese rectángulo.

Para cada píxel del objeto ImageData, existen cuatro tipos 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 de alpha existe en forma de array y se almacena en el objeto ImageData data .

Consejo:en la propiedad del array de color/Después de la información de alpha, puede usar putImageData() El método copia los datos de la imagen en el lienzo.

Ejemplo:

El siguiente código puede obtener el color del primer píxel del objeto ImageData devuelto/Información de alpha:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>Uso del método getImageData() en HTML canvas-<título>教程 básico(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　ancho="3" altura="150" style="border:1px sólido #d3d3d3">
Su navegador no admite　HTML5　canvas　etiqueta.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
var imgData=ctx.getImageData(30,30,50,50);
red=imgData.data[0];
red=imgData.data[1];
green=imgData.data[2];
blue=imgData.data[3];
alert(red　+　" "　+　green　+　" "　+　blue　+　" "　+　alpha);
</script>
</body>
</html>

Ver la prueba ‹/›

Consejo:También puede usar el método getImageData() para invertir el color de cada píxel de una imagen en el lienzo.

Puede usar la fórmula siguiente para recorrer todos los píxeles y cambiar sus valores de color:

　　　　　　　　red=255-old_red;
green=255-old_green;
blue=255-old_blue;

Sintaxis de JavaScript

Sintaxis de JavaScript:	contexto.getImageData(x,y,ancho,altura);

Valor del parámetro

Parámetros	Descripción
x	Coordenada x del vértice superior izquierdo del área a copiar (en píxeles).
y	Coordenada y del vértice superior izquierdo del área a copiar (en píxeles).
ancho	Ancho del área rectangular a copiar.
altura	Altura del área rectangular a copiar.

Imagen a usar:

Ejemplo en línea

Use getImageData() para invertir el color de cada píxel de la imagen en el lienzo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>Uso del método getImageData() en HTML canvas-<título>教程 básico(oldtoolbag.com)</title>
</head>
<body>
<img　id="scream"　src="views.png">
<canvas　id="myCanvas"　ancho="3" altura="2" style="borde:1px sólido #d3d3d3">
Su navegador no admite　HTML5　canvas　etiqueta.
</canvas>
<script>
document.getElementById("scream").onload=function()
{
　　　　var　c=document.getElementById("myCanvas");　var　ctx=c.getContext("2d");
　　　　var　img=document.getElementById("scream");
　　　　ctx.drawImage(img,0,0);
　　　　var　imgData=ctx.getImageData(0,0,c.width,c.height);
　　　　//　Invertir colores
　　　　for　(var　i=0;i<imgData.data.length;i+=4)
　　　　{
　　　　　　　　imgData.data[i]=255-imgData.data[i];
　　　　　　　　imgData.data[i+1]=;255-imgData.data[i+1];
　　　　　　　　imgData.data[i+2]=;255-imgData.data[i+2];
　　　　　　　　imgData.data[i+3]=;255;
　　　　}
　　　　ctx.putImageData(imgData,0,0);
};
</script>
</body>
</html>

Ver la prueba ‹/›

Manual de referencia de HTML canvas

HTML: <template> etiqueta