Exemplu
Codul de mai jos copiază datele de pixeli pentru un dreptunghi specificat pe panza cu getImageData() , și apoi pune datele imaginii înapoi pe panza cu putImageData() :
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);
} Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| getImageData() | da | 9 | da | da | da |
Definiție și utilizare
getImageData() metoda returneaza un obiect ImageData care copiază datele de pixeli pentru dreptunghiul specificat pe o panza.
Note: Obiectul ImageData nu este o imagine, se specifică faptul că o parte (rectangle) pe pânză, și deține informații de fiecare pixel în interiorul acelui dreptunghi.
Pentru fiecare pixel într-un obiect ImageData există patru bucăți de informații, valorile RGBA:
R - Culoarea roșie (from 0-255)
G - Culoarea verde (from 0-255) de (from 0-255)
B - Culoarea albastră (from 0-255) de (from 0-255)
A - Canalul alfa (from 0-255; 0 is transparent and 255 is fully visible) de (from 0-255; 0 is transparent and 255 is fully visible)
Informația de culoare / alfa are loc într - o matrice, și este stocat în data proprietatea obiectului ImageData.
Tip: După ce ați manipulat informația de culoare / alfa în matrice, puteți copia datele imaginii înapoi pe panza cu putImageData() metoda.
Example:
Codul pentru obținerea de informații de culoare / alfa a primului pixel în obiectul ImageData a revenit:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Încearcă - l singur » Tip: Puteți utiliza , de asemenea, getImageData() metoda pentru a inversa culoarea de fiecare pixeli a unei imagini pe pânză.
Bucla prin toate pixelii și modificați valorile de culoare utilizând această formulă:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
A se vedea mai jos pentru o "Try it Yourself" - "Try it Yourself" exemplu!
JavaScript Sintaxa
| sintaxa JavaScript: | context . getImageData( x,y,width,height ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere |
|---|---|
| x | Coordonata X (in pixels) din colțul din stânga sus pentru a porni copia de |
| y | Coordonata y (in pixels) din colțul din stânga sus pentru a porni copia de |
| width | Lățimea zonei dreptunghiulare va copia |
| height | Înălțimea zonei dreptunghiulare va copia |
Mai multe exemple
Imagine de a utiliza:
Exemplu
Utilizați getImageData() pentru a inversa culoarea de fiecare pixeli a unei imagini pe pânză:
JavaScript:
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);
// 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); Încearcă - l singur »