Płótno HTML Metoda getImageData()
Przykład
Poniższy kod kopiuje dane pikseli dla określonego prostokąta na kanwę za pomocą getImageData(), a następnie umieszcza dane obrazu z powrotem na kanwie za 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);
}
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Metoda getImageData() zwraca obiekt ImageData, który kopiuje dane pikseli dla określonego prostokąta na kanwie.
Uwaga: Obiekt ImageData nie jest obrazem, określa część (prostokąt) na kanwie i przechowuje informacje o każdym pikselu wewnątrz tego prostokąta.
Dla każdego piksela w obiekcie ImageData istnieją cztery informacje, wartości RGBA:
R - Kolor czerwony (od 0-255)
G - Kolor zielony (od 0-255)
B - Kolor niebieski (od 0-255)
A - Kanał alfa (od 0-255; 0 jest przezroczysty, a 255 to w pełni widoczne)
Informacje o kolorze/alfa są przechowywane w tablicy i są przechowywane we właściwości data obiektu ImageData.
Wskazówka: Po manipulowaniu informacjami o kolorze/alfa w tablicy możesz skopiować dane obrazu z powrotem na kanwę za pomocą metody putImageData() .
Przykład:
Kod do pobierania informacji o kolorze/alfa pierwszego piksela w zwróconym obiekcie ImageData:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Porada: Możesz również użyć metody getImageData(), aby odwrócić kolor każdego piksela obrazu na kanwie.
Przejdź przez wszystkie piksele i zmień wartości kolorów za pomocą tego wzoru:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Zobacz poniżej przykład „Wypróbuj sam”!
Składnia JavaScript
| Składnia JavaScript: | kontekst .getImageData( x,y,szerokość,wysokość ); |
|---|
Wartości parametrów
| 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 |
Więcej przykładów
Obraz do użycia:
Przykład
Użyj getImageData(), aby odwrócić kolor każdego piksela obrazu na płótnie:
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);
❮ Odniesienie do płótna HTML