Manual de referência HTML

HTML 标签大全

Método getImageData() do HTML canvas

getImageData() retorna um objeto ImageData, que descreve os dados de pixels de uma área oculta do canvas, representada por um retângulo, com início em (sx, sy), largura sw e altura sh.

Manual de referência do canvas do HTML

在线示例

O seguinte código usa getImageData() para copiar os dados de pixels de um retângulo específico do canvas, e então usa putImageData() para devolver os dados da imagem para o canvas:

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150" style="border:1px　solid　#d3d3d3">
您的浏览器不支持　HTML5　canvas　标签。
</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>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam getImageData() método.

Atenção: Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método getImageData() retorna um objeto ImageData, que copia os dados de pixels de um retângulo específico do canvas.

Atenção:O objeto ImageData não é uma imagem, ele define uma parte do canvas (retângulo) e armazena informações de cada pixel dentro desse retângulo.

Para cada pixel do objeto ImageData, existem quatro tipos de informações, ou seja, valores RGBA:

R - vermelho (0-255)
G - verde (0-255)
B - azul (0-255)
A - canal alpha (0-255; 0 é transparente,255 é completamente visível ()

color/As informações alpha existem em forma de array e são armazenadas no objeto ImageData data das propriedades.

提示：para operar no array de cores/Depois das informações alpha, você pode usar putImageData() O método copia os dados da imagem de volta para o canvas.

Exemplo:

O seguinte código pode obter a cor do primeiro pixel do objeto ImageData retornado/Informações alpha:

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150" style="border:1px　solid　#d3d3d3">
您的浏览器不支持　HTML5　canvas　标签。
</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];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
alert(red　+　"　"　+　green　+　"　"　+　blue　+　"　"　+　alpha);
</script>
</body>
</html>

Teste e veja ‹/›

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

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

JavaScript 语法

JavaScript 语法：	context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标（以像素计）。
y	开始复制的左上角位置的 y 坐标（以像素计）。
width	要复制的矩形区域的宽度。
height	要复制的矩形区域的高度。

要使用的图像：

在线示例

使用 getImageData() 来反转画布上的图像的每个像素的颜色：

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<img　id="scream"　src="views.png">
<canvas　id="myCanvas"　width="300"　height="200"　style="border:1px　solid　#d3d3d3">
您的浏览器不支持　HTML5　canvas　标签。
</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);
　　　　//　Inverter cores
　　　　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>

Teste e veja ‹/›

Manual de referência do canvas do HTML

HTML: <template> tag