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

ImageData.colorSpace

[_] [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
 
 const obrazY = ctx.getImageData(0, 0, 10, 10, { colorSpace: "srgb" });
 console.log(obrazY.colorSpace); // srgb
 
 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.colorSpace do odczytu ImageData.colorSpace to ciąg znaków wskazujący przestrzeń kolorów danych obrazu. Przestrzeń kolorów można ustawić podczas ImageData inicjalizacji za pomocą ImageData() konstruktora lub createImageData() metody. Wartość ta właściwość może przyjmować następujące wartości: "srgb" reprezentującą przestrzeń barw sRGB. "display-p3" reprezentujący przestrzeń kolorów display-p3.

Zobacz też:
canvas createImageData() - Tworzy nowy, pusty ImageData obiekt o określonych wymiarach