getImageData lienzo HTML método ()
Ejemplos
Los siguientes getImageData código () Copia de los datos de píxeles de lona rectángulo designado, y () los datos de imagen de nuevo en la lona por el putImageData:
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);
}
Trate »
Soporte para el navegador
Internet Explorer 9, el apoyo Firefox, Opera, Chrome y Safari getImageData () método.
Nota: 8 y anteriores nternet Explorer no admite el elemento <canvas>.
Definición y Uso
getImageData método () devuelve objeto ImageData que es una copia de los datos de píxeles de lienzo rectangular especificada.
Nota: objeto ImageDatano es la imagen, que proporciona una parte de la tela (rectángulo), y se guarda dentro de la información rectángulo de cada píxel.
ImageData objeto para cada píxel, hay cuatro áreas de información, a saber, los valores RGBA:
R - rojo (0-255)
G - Verde (0-255)
B - azul (0-255)
A - canal alfa (0-255; 0 es transparente, 255 es completamente visible)
el color / alfa información en forma de una matriz y se almacena en objetos ImageData de datos de propiedades.
Consejo: matriz completa de información de color / alfa en la operación, se puede utilizar putImageData () método de los datos de imagen se copia de nuevo a la lona.
Ejemplo:
El siguiente código se puede obtener ImageData objeto se devuelve en la información de color / alfa primer pixel:
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Consejo: También puede utilizar el método getImageData () para neutralizar el color de cada píxel de una imagen en el lienzo.
Utilice esta fórmula a través de todos los píxeles, y cambiar sus valores de color:
green=255-old_green;
blue=255-old_blue;
Mira el siguiente ejemplo, "tratar"!
la sintaxis de JavaScript
| la sintaxis de JavaScript: | contexto .getImageData (x, y, anchura, altura); |
|---|
parámetro Valor
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标（以像素计）。 |
| y | 开始复制的左上角位置的 y 坐标（以像素计）。 |
| width | 要复制的矩形区域的宽度。 |
| height | 要复制的矩形区域的高度。 |
más ejemplos
La imagen que desea utilizar:
Ejemplos
Utilice getImageData () para neutralizar el color de cada píxel de la imagen en el lienzo:
JavaScript:
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);
// invert colors
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);
Trate »