[ Leksykon ] [ JavaScript ] [ Właściwości ] [ canvas ] [ ImageData() ]

ImageData.data

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

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");
 
 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);
 
 const obraz2 = ctx.createImageData(100, 100);
 // Uint8ClampedArray[40000] length=40000
 for (let i = 0; i < obraz2.data.length; i += 4) { 
 let x = ((i % 400) / 400) * 255;
 let y = (Math.ceil(i / 400) / 100) * 255;

 obraz2.data[i + 0] = x; // R 
 obraz2.data[i + 1] = y; // G 
 obraz2.data[i + 2] = 255 - x; // B 
 obraz2.data[i + 3] = 255; // A 
 }

 ctx.putImageData(obraz2, 200, 200);

 return;

 };

</script>

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

Opis:
Właściwość ImageData.data do odczytu zwraca wartość Uint8ClampedArray zawierającą ImageData dane pikseli obiektu. Dane są przechowywane jako jednowymiarowa tablica w kolejności RGBA, z wartościami całkowitymi od 0 i 255. Wartość Uint8ClampedArray.

Zobacz też: