Metoda HTML canvas getImageData ()
HTML Instrukcja płótno referencyjny
Przykłady
Poniższe getImageData kod () Kopiowanie na płótnie prostokąt wyznaczony danych pikseli, a () dane obrazu z powrotem na płótnie przez putImageData:
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);
}
Spróbuj »
Pomoc Browser
Metoda Internet Explorer 9, Firefox, Opera, Chrome i Safari wsparcie getImageData ().
Uwaga: 8, a wcześniej nternet Explorer nie obsługuje <canvas> elementu.
Definicja i Wykorzystanie
Metoda getImageData () zwraca imageData obiekt, który jest kopią podanych danych pikseli prostokątne płótno.
Uwaga: obiekt imageDatanie jest obrazem, który stanowi część płótnie (prostokąt) i zapisany w prostokącie informacji o każdym pikselu.
Imagedata obiektu dla każdego piksela są cztery obszary informacji, a mianowicie wartości RGBA:
R - czerwony (0-255)
G - Zielony (0-255)
B - niebieski (0-255)
A - kanał alfa (0-255; 0 jest przezroczysta, 255 jest w pełni widoczny)
Kolor / informacja alfa w postaci tablicy i przechowywane w obiekcie imageData danych właściwości.
Porada: pełna gama informacji kolor / alfa w operacji, można użyć putImageData () metoda dane obrazu są kopiowane z powrotem na płótnie.
Przykład:
Poniższy kod można uzyskać obiektu imageData zostanie zwrócony w informacji kolor / alfa pierwsza pikseli:
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Wskazówka: Można również użyć metody getImageData (), aby odwrócić kolor każdego piksela obrazu na płótnie.
Za pomocą tej formuły przez wszystkie piksele i zmieniać swoje wartości kolorów:
green=255-old_green;
blue=255-old_blue;
Spójrz na poniższy "Try" przykład!
Składnia JavaScript
| Składnia JavaScript: | Kontekst .getImageData (x, y, szerokość, wysokość); |
|---|
parametr Wartość
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标（以像素计）。 |
| y | 开始复制的左上角位置的 y 坐标（以像素计）。 |
| width | 要复制的矩形区域的宽度。 |
| height | 要复制的矩形区域的高度。 |
Więcej przykładów
Obraz, który ma być użyty:
Przykłady
Użyj getImageData (), aby odwrócić kolor każdego piksela obrazu na płótnie:
JavaScript:
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);
Spróbuj »
HTML Instrukcja płótno referencyjny