[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.getImageData()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

getImageData(sx, sy, sw, sh)
getImageData(sx, sy, sw, sh, settings)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d", { willReadFrequently: true, colorSpace: "display-p3" });

 ctx.fillStyle = "green";
 ctx.fillRect(100, 200, 75, 75);

 const imageData = ctx.getImageData(100, 200, 25, 25);
 ctx.putImageData(imageData, 100, 275); 

 const img = document.getElementById("i");
 ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

 const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

 // Odwróć kolory
 for (let 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);

 const image = new Image();
 image.src = "dom.jpg";
 ctx.drawImage(image, 300, 300, image.naturalWidth, image.naturalHeight);
 const fragment = ctx.getImageData(300, 300, 50, 168);
 ctx.putImageData(fragment, 0, 300);
 ctx.putImageData(fragment, 100, 325);
 ctx.putImageData(fragment, 200, 350);
 
 image.onload = () => {

 ctx.drawImage(image, 33, 71, 104, 124, 321, 200, 87, 104);
 const fragment2 = ctx.getImageData(0, 0, 100, 100);
 ctx.putImageData(fragment2, 300, 300);
 ctx.putImageData(fragment2, 380, 50);
 ctx.putImageData(fragment2, 500, 100);

 } 

 ctx.fillStyle = "color(display-p3 0.5 0 0)";
 ctx.fillStyle = "orange";
 ctx.fillRect(0, 500, 25, 25);

 // Uzyskaj konwersję ImageData na sRGB
 const imageData2 = ctx.getImageData(0, 500, 10, 10, { colorSpace: "srgb" });
 ctx.putImageData(imageData2, 30, 500);
 console.log(imageData2.colorSpace); // "srgb"

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>
<div style="display:none;">
 <img id="i" src="/dom.jpg" width="1" height="1" />
 
</div>

Opis:
Metoda CanvasRenderingContext2D.getImageData() zwraca ImageData obiekt reprezentujący podstawowe dane pikseli dla określonej części obszaru roboczego. Na tę metodę nie ma wpływu macierz transformacji płótna. Jeśli określony prostokąt wykracza poza granice płótna, piksele poza płótnem w zwróconym ImageData obiekcie będą przezroczyste i czarne. Za pomocą tej metody dane obrazu można namalować na płótnie putImageData(). Parametry sx - współrzędna osi x lewego górnego rogu prostokąta, z którego ImageData zostanie wyodrębniony element, sy - współrzędna osi Y lewego górnego rogu prostokąta, z którego ImageData zostanie wyodrębniony element, sw - szerokość prostokąta, z którego ImageData zostanie wyodrębniony, wartości dodatnie znajdują się po prawej stronie, a ujemne po lewej stronie, sh - wysokość prostokąta, z którego ImageData zostanie wyodrębniony, wartości dodatnie spadają, a ujemne rosną, settings - opcjonalny, obiekt o następujących właściwościach: colorSpace: określa przestrzeń kolorów danych obrazu, można ustawić "srgb"na przestrzeń kolorów sRGB lub przestrzeń kolorów "display-p3" wyświetlacza DCI-P3. Wartość zwracana obiekt ImageData zawierający dane obrazu dla określonego prostokąta obszaru roboczego, współrzędne lewego górnego rogu prostokąta to sx, sy, natomiast współrzędne dolnego rogu to sx + sw - 1, sy + sh - 1. Wyjątki IndexSizeError DOMException zgłaszane, jeśli albo sw mają sh wartość zero. SecurityError DOMException canvas zawiera lub może zawierać piksele, które zostały załadowane z innego źródła niż to, z którego został załadowany sam dokument. Aby uniknąć SecurityError DOMException wyrzucania w tej sytuacji, skonfiguruj CORS tak, aby zezwalał na użycie obrazu źródłowego w ten sposób.

Zobacz też:
ImageData() -
putImageData() -
canvas.getContext("2d", { willReadFrequently: true, colorSpace: "display-p3" }) - 
.crossOrigin = "anonymous" -