Ultimele tutoriale de dezvoltare web
 

HTML canvas getImageData() Method

<Canvas obiect

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() 4 9 3.6 4 10.1

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 datele 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
Exemple

Mai multe exemple

Imagine de a utiliza:

Țipătul

Exemplu

Utilizați getImageData() pentru a inversa culoarea de fiecare pixeli a unei imagini pe pânză:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 »
<Canvas obiect