HTML-lattian getImageData()-menetelmä

HTML5 Canvas viittauskäsikirja

Määrittely ja käyttö

getImageData() Metodi palauttaa ImageData-objektin, joka kopioi lattian määritellyn viivakuvion kuvapikselit.

Jokaisella kuvapikselillä ImageData-objektissa on neljä tietoa, nimittäin RGBA-arvot:

  • R - punainen (0-255)
  • G - vihreä (0-255)
  • B - sininen (0-255)
  • A - alpha-kanava (0-255; 0 on läpinäkyvä, 255 on täysin näkyvä)

color/alpha on tietueena ja tallennettuna ImageData-objektin data ominaisuudessa.

Vinkki:Kun olet käsitellyt arrayssä color/alpha-tiedot, voit käyttää putImageData() Metodi kopioi kuvatiedot takaisin lattiaan.

Esimerkki:

Seuraava koodi antaa palautetun ImageData-objektin ensimmäisen kuvapikselin color/alpha-tiedot:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Kokeile itse

Vinkki:Voit myös käyttää getImageData() -metodia kääntääksesi kuvakentällä olevan kuvan jokaisen kuvapikselin väriä.

Käytä tätä kaavaa käydäksesi läpi kaikki kuvapikselit ja muuttaaksesi niiden väriarvoja:

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

Katso alla oleva "Kokeile itse" -esimerkki.

esimerkki

Esimerkki 1

Seuraava koodi kopioi kuvakentällä olevan määritetyn suorakulmion kuvapikselitiedot ja palauttaa ne kuvakentälle putImageData() -metodin avulla:

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);
}

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alareunassa.

syntaksi

var imgData=context.getImageData(x,y,leveys,korkeus);

parametrin arvo

parametri kuvaus
x Kopiointi aloittavan ylävasemman sijainnin x-akselin arvo.
y Kopiointi aloittavan ylävasemman sijainnin y-akselin arvo.
leveys Tarkistettavan suorakulmion leveys.
korkeus Tarkistettavan suorakulmion korkeus.

Lisää esimerkkejä

Esimerkki 2

Käytettävä kuva:

Kukka tulppaani

Käytä getImageData() -metodia kääntääksesi kuvakentällä olevien jokaisen kuvapikselin väriä.

Selaimesi ei tue HTML5 canvas -tagia.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Värinvaihto
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);

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> elementtiä.

HTML5 Canvas viittauskäsikirja