Metoda getImageData() plátna HTML
Příklad
Níže uvedený kód zkopíruje data pixelů pro zadaný obdélník na plátno pomocí getImageData() a poté vloží data obrázku zpět na plátno pomocí 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);
}
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definice a použití
Metoda getImageData() vrací objekt ImageData, který kopíruje data obrazových bodů pro zadaný obdélník na plátno.
Poznámka: Objekt ImageData není obrázek, určuje část (obdélník) na plátně a obsahuje informace o každém pixelu uvnitř tohoto obdélníku.
Pro každý pixel v objektu ImageData existují čtyři informace, hodnoty RGBA:
R - Červená barva (od 0-255)
G - Zelená barva (od 0-255)
B - Modrá barva (od 0-255)
A - Alfa kanál (od 0-255; 0 je průhledný a 255 je plně viditelné)
Informace o barvě/alfa je uložena v poli a je uložena ve vlastnosti data objektu ImageData.
Tip: Poté, co zpracujete informace o barvě/alfa v poli, můžete zkopírovat obrazová data zpět na plátno pomocí metody putImageData() .
Příklad:
Kód pro získání informace o barvě/alfa prvním pixelu ve vráceném objektu ImageData:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
Tip: Můžete také použít metodu getImageData() k invertování barvy všech pixelů obrazu na plátně.
Projděte všechny pixely a změňte hodnoty barev pomocí tohoto vzorce:
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
Níže naleznete příklad „Vyzkoušejte si to sami“!
Syntaxe JavaScriptu
| Syntaxe JavaScriptu: | kontext .getImageData( x, y, šířka, výška ); |
|---|
Hodnoty parametrů
| 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 |
Další příklady
Obrázek k použití:
Příklad
Pomocí getImageData() invertujte barvu všech pixelů obrázku na plátně:
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);
❮ Objekt plátna