HTML-doek getImageData() Metode
Voorbeeld
Die kode hieronder kopieer die pixeldata vir 'n gespesifiseerde reghoek op die doek met getImageData(), en plaas dan die beelddata terug op die doek met 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);
}
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Die getImageData() metode gee 'n ImageData-objek terug wat die pixeldata vir die gespesifiseerde reghoek op 'n doek kopieer.
Let wel: Die ImageData-voorwerp is nie 'n prent nie, dit spesifiseer 'n deel (reghoek) op die doek, en bevat inligting van elke pixel binne daardie reghoek.
Vir elke pixel in 'n ImageData-voorwerp is daar vier stukke inligting, die RGBA-waardes:
R - Die kleur rooi (van 0-255)
G - Die kleur groen (van 0-255)
B - Die kleur blou (van 0-255)
A - Die alfakanaal (van 0-255; 0 is deursigtig en 255 is volledig sigbaar)
Die kleur/alfa-inligting word in 'n skikking gehou en word in die data- eienskap van die ImageData-objek gestoor.
Wenk: Nadat jy die kleur/alfa-inligting in die skikking gemanipuleer het, kan jy die beelddata terugkopieer op die doek met die putImageData() metode.
Voorbeeld:
Die kode om kleur-/alfa-inligting van die eerste pixel in die teruggestuurde ImageData-voorwerp te kry:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Wenk: Jy kan ook die getImageData() metode gebruik om die kleur van elke pixels van 'n prent op die doek om te keer.
Loop deur al die pixels en verander die kleurwaardes deur hierdie formule te gebruik:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Sien hieronder vir 'n "Probeer dit self" voorbeeld!
JavaScript-sintaksis
| JavaScript-sintaksis: | konteks .getImageData( x,y, breedte, hoogte ); |
|---|
Parameterwaardes
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Meer voorbeelde
Prent om te gebruik:
Voorbeeld
Gebruik getImageData() om die kleur van elke pixels van 'n prent op die doek om te keer:
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
var i;
for (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);
❮ HTML-doekverwysing