Signatur
Beschreibung
Die Eigenschaft ImageData.colorSpace gibt an, in welchem Farbraum die Pixelwerte im Array ImageData.data vorliegen. Mögliche Werte sind "srgb" (Standard-Farbraum des Webs) und "display-p3" (größerer Farbraum für Wide-Gamut-Displays, etwa bei aktuellen Apple-Geräten).
Welcher Farbraum gilt, legst du beim Erzeugen fest: entweder über die Option colorSpace im Konstruktor new ImageData(width, height, { colorSpace }), über CanvasRenderingContext2D.createImageData() oder getImageData() mit derselben Option. Ohne Angabe übernimmt getImageData() den Farbraum des Canvas-Kontexts, den du mit canvas.getContext("2d", { colorSpace: "display-p3" }) einstellen kannst.
Wichtig ist die Eigenschaft, wenn du Pixeldaten direkt bearbeitest oder zwischen Canvas-Elementen austauschst. Die gleichen RGBA-Bytes stehen in "display-p3" für andere, teils sattere Farben als in "srgb". Schreibst du Daten mit putImageData() in einen Kontext mit anderem Farbraum, rechnet der Browser sie um. Dabei können Farben aus dem größeren Farbraum verloren gehen.
Rückgabewert
Beispiele
Farbraum eines neuen ImageData-Objekts auslesen
// Standard: sRGB
const standard = new ImageData(10, 10);
console.log(standard.colorSpace);
// Display P3 explizit anfordern
const p3 = new ImageData(10, 10, { colorSpace: "display-p3" });
console.log(p3.colorSpace);Farbraum vom Canvas-Kontext übernehmen
const canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
const ctx = canvas.getContext("2d", { colorSpace: "display-p3" });
ctx.fillStyle = "color(display-p3 1 0 0)"; // sattes P3-Rot
ctx.fillRect(0, 0, 100, 100);
// Ohne Option erbt getImageData den Farbraum des Kontexts
const pixels = ctx.getImageData(0, 0, 1, 1);
console.log(pixels.colorSpace, [...pixels.data]);
// Oder gezielt in sRGB umgerechnet auslesen
const srgbPixels = ctx.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(srgbPixels.colorSpace, [...srgbPixels.data]);Mit Feature-Erkennung auf Wide Gamut prüfen
const supportsP3 = () => {
try {
const img = new ImageData(1, 1, { colorSpace: "display-p3" });
return img.colorSpace === "display-p3";
} catch {
return false;
}
};
const wideGamutScreen = matchMedia("(color-gamut: p3)").matches;
const colorSpace = supportsP3() && wideGamutScreen ? "display-p3" : "srgb";
console.log(`Verwende Farbraum: ${colorSpace}`);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
img.colorSpace = "display-p3"wird ignoriert, im Strict Mode gibt es einenTypeError. Um den Farbraum zu wechseln, musst du ein neuesImageData-Objekt erzeugen oder die Daten erneut mitgetImageData(..., { colorSpace })auslesen. - Keine Umrechnung der Bytes: Die Eigenschaft beschreibt nur, wie die Bytes in
datazu deuten sind. Übergibst du ein bestehendesUint8ClampedArrayannew ImageData(data, w, h, { colorSpace }), werden die Werte nicht umgerechnet, sondern nur anders gedeutet. - Verlust beim Umrechnen: Bei
putImageData()in einen Kontext mit anderem Farbraum rechnet der Browser um. Von P3 nach sRGB werden Farben außerhalb des sRGB-Bereichs abgeschnitten. - Genauigkeit: Pro Kanal gibt es weiterhin nur 8 Bit. Bei P3 sind die Farbabstufungen deshalb gröber als bei sRGB, und bei Verläufen kann Banding auftreten.
- Kompatibilität: Chromium-Browser und Safari unterstützen die Eigenschaft seit Längerem, Firefox erst seit neueren Versionen. Ältere Browser kennen die Eigenschaft nicht (
undefined) und ignorieren die OptioncolorSpace. Prüfe das per Feature-Erkennung. Ein unbekannter Wert wie"rec2020"löst einenTypeErroraus.