[ Leksykon ] [ HTML ] [ JavaScript ] [ Obiekty ] [ canvas ]

Obiekt ImageData()

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

new ImageData(width, height)
new ImageData(width, height, settings)

new ImageData(dataArray, width)
new ImageData(dataArray, width, height)
new ImageData(dataArray, width, height, settings)

 

Konstruktor ImageData():

ImageData() - Tworzy ImageData obiekt na podstawie podanego Uint8ClampedArray rozmiaru obrazu i zawartego w nim obrazu. Jeśli nie zostanie podana żadna tablica, tworzy obraz przezroczystego czarnego prostokąta. Należy pamiętać, że jest to najczęstszy sposób tworzenia takiego obiektu, createImageData().

Właściwości ImageData():

ImageData.data - Uint8ClampedArray reprezentujący jednowymiarową tablicę zawierającą dane w kolejności RGBA
ImageData.colorSpace - Ciąg wskazujący przestrzeń kolorów danych obrazu
ImageData.height - Reprezentujący rzeczywistą wysokość w pikselach pliku ImageData
ImageData.width - Reprezentujący rzeczywistą szerokość w pikselach pliku ImageData

 

Przykłady:

let obraz = new ImageData(100, 50);
console.log(obraz.width); // szerokości 200 pikseli
console.log(obraz.height); // wysokości 100 pikseli
console.log(obraz.data); // 5000 pikseli Uint8ClampedArray[20000]
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }

 

let obraz = new ImageData(100, 50, { colorSpace: "display-p3" });
console.log(obraz.width); // szerokości 200 pikseli
console.log(obraz.height); // wysokości 100 pikseli
console.log(obraz.data); // 5000 pikseli Uint8ClampedArray[20000]
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }

 

<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");
 
 const arr = new Uint8ClampedArray(10_000);

 // Wypełnij tablicę wartościami RGBA
 for (let i = 0; i < arr.length; i += 4) {
 arr[i + 0] = 250; // R
 arr[i + 1] = 100; // G
 arr[i + 2] = 0; // B
 arr[i + 3] = 255; // A
 }

 // Zainicjuj nowy obiekt ImageData
 let obraz = new ImageData(arr, 50);

 // Narysuj dane obrazu na canvas
 ctx.putImageData(obraz, 100, 100);

 return;

 };

</script>

<canvas id="canvas" width="500" height="300"></canvas>

 

Opis:
Interfejs ImageData reprezentuje podstawowe dane pikseli obszaru elementu <canvas>. Tworzy się go za pomocą ImageData() metod konstruktora lub kreatora na CanvasRenderingContext2D obiekcie powiązanym z płótnem: createImageData() i getImageData(). Można go również użyć do ustawienia części płótna za pomocą putImageData(). Funkcja jest dostępna w Web Workers. Konstruktor ImageData() zwraca nowo utworzony ImageData obiekt zbudowany z podanej tablicy o określonym typie i mający określoną szerokość i wysokość. Ten konstruktor jest preferowanym sposobem tworzenia takiego obiektu w Worker. Parametry, width - bez znaku reprezentująca szerokość obrazu, height - bez znaku reprezentująca wysokość obrazu. Ta wartość jest opcjonalna, jeśli podana jest tablica: wysokość zostanie wywnioskowana z rozmiaru tablicy i podanej szerokości. 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. Kolejny parametr dataArray - Uint8ClampedArray zawierający podstawową reprezentację obrazu w pikselach. Jeśli nie zostanie podana taka tablica, zostanie utworzony obraz z przezroczystym czarnym prostokątem o określonym width i height. Wartość zwracana nowy ImageData() obiekt. Zgłaszane błędy IndexSizeError DOMException - zgłaszany, jeśli array został określony, ale jego długość nie jest wielokrotnością (4 * width) lub (4 * width * height).

  

Linki:
CanvasRenderingContext2D() - Interfejs CanvasRenderingContext2D() zapewnia kontekst renderowania 2D dla <canvas>
canvas createImageData() - Tworzy nowy, pusty ImageData obiekt o określonych wymiarach
canvas getImageData() - Zwraca ImageData obiekt reprezentujący podstawowe dane pikseli dla obszaru
canvas putImageData() - Maluje dane z ImageData obiektu na płótnie
Web Workers -
Worker() - 
Uint8ClampedArray -