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

CanvasRenderingContext2D.putImageData()

[_] [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]

putImageData(imageData, dx, dy)
putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

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"
 
 ctx.putImageData(fragment, 310, 0, 25, 0, 300, 300); 

 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.putImageData() maluje dane z danego ImageDataobiektu na płótnie. Dane obrazu można pobrać z płótna za pomocą metody getImageData(). Parametry imageData - obiekt ImageData zawierający tablicę wartości pikseli, dx - pozycja pozioma współrzędna x, w której należy umieścić dane obrazu na obszarze docelowym, dy - pozycja pionowa współrzędna y, w której należy umieścić dane obrazu w obszarze docelowym, dirtyX - opcjonalny, położenie poziome współrzędna x lewego górnego rogu, z którego zostaną wyodrębnione dane obrazu, domyślnie 0, dirtyY - opcjonalny, położenie pionowe współrzędna y lewego górnego rogu, z którego zostaną wyodrębnione dane obrazu, domyślnie 0, dirtyWidth -  opcjonalny, szerokość prostokąta do pomalowania, domyślnie szerokość danych obrazu, dirtyHeight - opcjonalny, wysokość prostokąta do pomalowania, domyślnie jest to wysokość danych obrazu. Wartość zwracana undefined. Wyjątki NotSupportedError DOMException zgłaszany, jeśli którykolwiek z argumentów jest nieskończony, InvalidStateError DOMException zgłaszany, jeśli ImageData dane obiektu zostały odłączone.

Zobacz też:
canvas getImageData() - Zwraca ImageData obiekt reprezentujący podstawowe dane pikseli dla obszaru
imageData() - obiekt ImageData zawierający tablicę wartości pikseli