hdr-canvas 0.0.9 → 0.0.10

package/dist/hdr-canvas.d.ts

@@ -1,5 +1,27 @@
 import { ColorTypes } from 'colorjs.io';
 
+// See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
+/// <reference lib="dom" />
+
+type HDRHTMLCanvasOptionsType = "mode";
+type HDRHTMLCanvasOptions = { [key in HDRHTMLCanvasOptionsType]?: string };
+
+interface HDRHTMLCanvasElement extends HTMLCanvasElement {
+  configureHighDynamicRange(options: HDRHTMLCanvasOptions): void;
+  _getContext(contextId: string, options?: object): RenderingContext | null;
+}
+
+interface HDRImageData {
+  readonly colorSpace: PredefinedColorSpace;
+  readonly data: Uint8ClampedArray | Uint16Array;
+  readonly height: number;
+  readonly width: number;
+}
+
+// See https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md
+// "rec2100-display-linear" is left out beacause of mapping issues
+type HDRPredefinedColorSpace = "display-p3" | "srgb" | "rec2100-hlg" | "rec2100-pq";
+
 type Uint16ImagePixelCallback = (red: number, green: number, blue: number, alpha: number) => Uint16Array;
 declare class Uint16Image {
     height: number;

package/dist/hdr-canvas.js

@@ -5750,6 +5750,18 @@ Color.extend(interpolation);
 Color.extend(contrastMethods);
 
 class Uint16Image {
+    height;
+    width;
+    data;
+    static DEFAULT_COLORSPACE = "rec2100-hlg";
+    static SDR_MULTIPLIER = 2 ** 16 - 1;
+    static COLORSPACES = {
+        "rec2100-hlg": "rec2100hlg",
+        "display-p3": "p3",
+        srgb: "sRGB",
+        "rec2100-pq": "rec2100pq"
+    };
+    colorSpace;
     constructor(width, height, colorspace) {
         if (colorspace === undefined || colorspace === null) {
             this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
@@ -5791,10 +5803,12 @@ class Uint16Image {
         if (this.data === undefined || this.data === null) {
             return null;
         }
-        return new ImageData(this.data, this.width, this.height, { colorSpace: this.colorSpace });
+        return new ImageData(this.data, this.width, this.height, {
+            colorSpace: this.colorSpace
+        });
     }
     static convertPixelToRec2100_hlg(pixel) {
-        const colorJScolorSpace = (Uint16Image.COLORSPACES["rec2100-hlg"]);
+        const colorJScolorSpace = Uint16Image.COLORSPACES["rec2100-hlg"];
         const srgbColor = new Color("srgb", Array.from(pixel.slice(0, 3)).map((band) => {
             return band / 255;
         }), pixel[3] / 255);
@@ -5829,11 +5843,11 @@ class Uint16Image {
             const { width, height } = bitmap;
             const offscreen = new OffscreenCanvas(width, height);
             const ctx = offscreen.getContext("2d");
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(bitmap, 0, 0);
+            ctx?.drawImage(bitmap, 0, 0);
             return ctx;
         })
             .then((ctx) => {
-            return ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, ctx === null || ctx === void 0 ? void 0 : ctx.canvas.width, ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
+            return ctx?.getImageData(0, 0, ctx?.canvas.width, ctx?.canvas.height);
         });
     }
     static fromImageData(imageData) {
@@ -5876,22 +5890,13 @@ class Uint16Image {
         return i;
     }
 }
-Uint16Image.DEFAULT_COLORSPACE = "rec2100-hlg";
-Uint16Image.SDR_MULTIPLIER = 2 ** 16 - 1;
-Uint16Image.COLORSPACES = {
-    "rec2100-hlg": "rec2100hlg",
-    "display-p3": "p3",
-    srgb: "sRGB",
-    "rec2100-pq": "rec2100pq",
-};
 
 function checkHDR() {
     try {
         const bitsPerChannel = screen.colorDepth / 3;
         const hdrSupported = bitsPerChannel > 8;
         const dynamicRangeHighMQ = window.matchMedia("(dynamic-range: high)").matches;
-        const colorGamutMQ = window.matchMedia("(color-gamut: rec2020)").matches ||
-            window.matchMedia("(color-gamut: p3)").matches;
+        const colorGamutMQ = window.matchMedia("(color-gamut: rec2020)").matches || window.matchMedia("(color-gamut: p3)").matches;
         if (colorGamutMQ && dynamicRangeHighMQ) {
             if (bitsPerChannel !== Math.round(bitsPerChannel)) {
                 return false;
@@ -5917,17 +5922,17 @@ function checkHDRCanvas() {
         if (!canvas.getContext) {
             return false;
         }
-        const ctx = (canvas.getContext("2d", {
+        const ctx = canvas.getContext("2d", {
             colorSpace: colorSpace,
-            pixelFormat: "float16",
-        }));
+            pixelFormat: "float16"
+        });
         if (ctx === null) {
             return false;
         }
         return true;
     }
     catch (e) {
-        console.error("Bad canvas ColorSpace test", e);
+        console.error("Bad canvas ColorSpace test - make sure that the Chromium browser flag 'enable-experimental-web-platform-features' has been enabled");
         return false;
     }
 }