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

ImageData.width

[_] [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", { colorSpace: "display-p3" , willReadFrequently: true });
 
 ctx.fillStyle = "color(display-p3 0.5 0 0)";
 ctx.fillRect(0, 0, 100, 100);
 
 const obrazX = ctx.getImageData(0, 0, 10, 10);
 console.log(obrazX.colorSpace); // display-p3
 
 console.log(obrazX.height); // 10
 console.log(obrazX.width); // 10 
 
 const obrazY = ctx.getImageData(0, 0, 10, 10, { colorSpace: "srgb" });
 console.log(obrazY.colorSpace); // srgb

 console.log(obrazY.height); // 10
 console.log(obrazY.width); // 10 
 
 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);
 
 console.log(obraz.height); // 50
 console.log(obraz.width); // 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.width zwraca liczbę pikseli w wierszu ImageData obiektu. Wartość Numer.

Zobacz też: