hdr-canvas 0.0.12 → 0.1.0

package/dist/hdr-canvas.js

@@ -1,3 +1,57 @@
+class HDRImage {
+    static DEFAULT_COLORSPACE = "rec2100-hlg";
+    static SDR_MULTIPLIER = 2 ** 16 - 1;
+    static COLORSPACES = {
+        "rec2100-hlg": "rec2100hlg",
+        "display-p3": "p3",
+        srgb: "sRGB",
+        "rec2100-pq": "rec2100pq"
+    };
+    data;
+    height;
+    width;
+    constructor(width, height) {
+        this.height = height;
+        this.width = width;
+    }
+    static fromImageData(imageData) {
+        throw new Error("Method not implemented!");
+    }
+    static fromImageDataArray(width, height, imageDataArray) {
+        throw new Error("Method not implemented!");
+    }
+    static async loadSDRImageData(url) {
+        return fetch(url)
+            .then((response) => response.blob())
+            .then((blob) => {
+            return createImageBitmap(blob);
+        })
+            .then((bitmap) => {
+            const { width, height } = bitmap;
+            const offscreen = new OffscreenCanvas(width, height);
+            const ctx = offscreen.getContext("2d");
+            ctx.drawImage(bitmap, 0, 0);
+            return ctx.getImageData(0, 0, width, height);
+        });
+    }
+    getPixel(w, h) {
+        const pos = (h * this.width + w) * 4;
+        return this.data.slice(pos, pos + 4);
+    }
+    setPixel(w, h, px) {
+        const pos = (h * this.width + w) * 4;
+        this.data[pos + 0] = px[0];
+        this.data[pos + 1] = px[1];
+        this.data[pos + 2] = px[2];
+        this.data[pos + 3] = px[3];
+    }
+    clone() {
+        const copy = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copy, this);
+        return copy;
+    }
+}
+
 // A is m x n. B is n x p. product is m x p.
 function multiplyMatrices (A, B) {
 	let m = A.length;
@@ -1610,7 +1664,7 @@ const LMStoXYZ_M$1 = [
 ];
 const LMStoLab_M = [
 	[ 0.2104542683093140,  0.7936177747023054, -0.0040720430116193 ],
-	[ 1.9779985324311684, -2.4285922420485799,  0.4505937096174110 ],
+	[ 1.9779985324311684, -2.42859224204858,  0.4505937096174110 ],
 	[ 0.0259040424655478,  0.7827717124575296, -0.8086757549230774 ],
 ];
 // LMStoIab_M inverted
@@ -1903,7 +1957,7 @@ const d0 = 1.6295499532821566E-11;
 
 const XYZtoCone_M = [
 	[  0.41478972, 0.579999,  0.0146480 ],
-	[ -0.2015100,  1.120649,  0.0531008 ],
+	[ -0.20151,  1.120649,  0.0531008 ],
 	[ -0.0166008,  0.264800,  0.6684799 ],
 ];
 // XYZtoCone_M inverted
@@ -2106,7 +2160,7 @@ const im2 = 32 / 2523;
 // The matrix below includes the 4% crosstalk components
 // and is from the Dolby "What is ICtCp" paper"
 const XYZtoLMS_M = [
-	[  0.3592832590121217,  0.6976051147779502, -0.0358915932320290 ],
+	[  0.3592832590121217,  0.6976051147779502, -0.035891593232029 ],
 	[ -0.1920808463704993,  1.1004767970374321,  0.0753748658519118 ],
 	[  0.0070797844607479,  0.0748396662186362,  0.8433265453898765 ],
 ];
@@ -2255,7 +2309,7 @@ const tau = 2 * Math.PI;
 const cat16 = [
 	[  0.401288,  0.650173, -0.051461 ],
 	[ -0.250268,  1.204414,  0.045854 ],
-	[ -0.002079,  0.048952,  0.953127 ],
+	[ -2079e-6,  0.048952,  0.953127 ],
 ];
 
 const cat16Inv = [
@@ -2266,8 +2320,8 @@ const cat16Inv = [
 
 const m1 = [
 	[460.0, 451.0, 288.0],
-	[460.0, -891.0, -261.0],
-	[460.0, -220.0, -6300.0],
+	[460.0, -891, -261],
+	[460.0, -220, -6300],
 ];
 
 const surroundMap = {
@@ -3219,7 +3273,7 @@ const toXYZ_M$5 = [
 
 // from ITU-R BT.2124-0 Annex 2 p.3
 const fromXYZ_M$5 = [
-	[  1.716651187971268,  -0.355670783776392, -0.253366281373660  ],
+	[  1.716651187971268,  -0.355670783776392, -0.25336628137366  ],
 	[ -0.666684351832489,   1.616481236634939,  0.0157685458139111 ],
 	[  0.017639857445311,  -0.042770613257809,  0.942103121235474  ],
 ];
@@ -4578,7 +4632,7 @@ const toXYZ_M$1 = [
 
 const fromXYZ_M$1 = [
 	[  1.34578688164715830, -0.25557208737979464, -0.05110186497554526 ],
-	[ -0.54463070512490190,  1.50824774284514680,  0.02052744743642139 ],
+	[ -0.5446307051249019,  1.50824774284514680,  0.02052744743642139 ],
 	[  0.00000000000000000,  0.00000000000000000,  1.21196754563894520 ],
 ];
 
@@ -5228,13 +5282,13 @@ function adapt (W1, W2, id = "Bradford") {
 defineCAT({
 	id: "von Kries",
 	toCone_M: [
-		[  0.4002400,  0.7076000, -0.0808100 ],
-		[ -0.2263000,  1.1653200,  0.0457000 ],
+		[  0.4002400,  0.7076000, -0.08081 ],
+		[ -0.2263,  1.1653200,  0.0457000 ],
 		[  0.0000000,  0.0000000,  0.9182200 ],
 	],
 	fromCone_M: [
 		[ 1.8599363874558397, -1.1293816185800916,   0.21989740959619328     ],
-		[ 0.3611914362417676,  0.6388124632850422,  -0.000006370596838649899 ],
+		[ 0.3611914362417676,  0.6388124632850422,  -6370596838649899e-21 ],
 		[ 0,                   0,                    1.0890636230968613      ],
 	],
 });
@@ -5244,9 +5298,9 @@ defineCAT({
 	// Convert an array of XYZ values in the range 0.0 - 1.0
 	// to cone fundamentals
 	toCone_M: [
-		[  0.8951000,  0.2664000, -0.1614000 ],
-		[ -0.7502000,  1.7135000,  0.0367000 ],
-		[  0.0389000, -0.0685000,  1.0296000 ],
+		[  0.8951000,  0.2664000, -0.1614 ],
+		[ -0.7502,  1.7135000,  0.0367000 ],
+		[  0.0389000, -0.0685,  1.0296000 ],
 	],
 	// and back
 	fromCone_M: [
@@ -5260,8 +5314,8 @@ defineCAT({
 	id: "CAT02",
 	// with complete chromatic adaptation to W2, so D = 1.0
 	toCone_M: [
-		[  0.7328000,  0.4296000, -0.1624000 ],
-		[ -0.7036000,  1.6975000,  0.0061000 ],
+		[  0.7328000,  0.4296000, -0.1624 ],
+		[ -0.7036,  1.6975000,  0.0061000 ],
 		[  0.0030000,  0.0136000,  0.9834000 ],
 	],
 	fromCone_M: [
@@ -5276,7 +5330,7 @@ defineCAT({
 	toCone_M: [
 		[  0.401288,  0.650173, -0.051461 ],
 		[ -0.250268,  1.204414,  0.045854 ],
-		[ -0.002079,  0.048952,  0.953127 ],
+		[ -2079e-6,  0.048952,  0.953127 ],
 	],
 	// the extra precision is needed to avoid roundtripping errors
 	fromCone_M: [
@@ -5611,14 +5665,14 @@ class Color {
 		}
 	}
 
-	static extend (exports) {
-		if (exports.register) {
-			exports.register(Color);
+	static extend (exports$1) {
+		if (exports$1.register) {
+			exports$1.register(Color);
 		}
 		else {
 			// No register method, just add the module's functions
-			for (let name in exports) {
-				Color.defineFunction(name, exports[name]);
+			for (let name in exports$1) {
+				Color.defineFunction(name, exports$1[name]);
 			}
 		}
 	}
@@ -5749,29 +5803,19 @@ Color.extend(luminance);
 Color.extend(interpolation);
 Color.extend(contrastMethods);
 
-class Uint16Image {
-    height;
-    width;
+class Uint16Image extends HDRImage {
     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) {
+        super(width, height);
         if (colorspace === undefined || colorspace === null) {
-            this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
+            this.colorSpace = HDRImage.DEFAULT_COLORSPACE;
         }
         else {
             this.colorSpace = colorspace;
         }
-        this.height = height;
-        this.width = width;
         this.data = new Uint16Array(height * width * 4);
+        console.warn("Uint16Image isn't suported anymore, your browser will certainly drop support soon, use Float16Image instead.");
     }
     fill(color) {
         if (color.length != 4) {
@@ -5785,17 +5829,6 @@ class Uint16Image {
         }
         return this;
     }
-    getPixel(w, h) {
-        const pos = (h * this.width + w) * 4;
-        return this.data.slice(pos, pos + 4);
-    }
-    setPixel(w, h, px) {
-        const pos = (h * this.width + w) * 4;
-        this.data[pos + 0] = px[0];
-        this.data[pos + 1] = px[1];
-        this.data[pos + 2] = px[2];
-        this.data[pos + 3] = px[3];
-    }
     static scaleUint8ToUint16(val) {
         return (val << 8) | val;
     }
@@ -5833,29 +5866,12 @@ class Uint16Image {
             this.data.set(fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]), i);
         }
     }
-    static async loadSDRImageData(url) {
-        return fetch(url)
-            .then((response) => response.blob())
-            .then((blob) => {
-            return createImageBitmap(blob);
-        })
-            .then((bitmap) => {
-            const { width, height } = bitmap;
-            const offscreen = new OffscreenCanvas(width, height);
-            const ctx = offscreen.getContext("2d");
-            ctx?.drawImage(bitmap, 0, 0);
-            return ctx;
-        })
-            .then((ctx) => {
-            return ctx?.getImageData(0, 0, ctx?.canvas.width, ctx?.canvas.height);
-        });
-    }
     static fromImageData(imageData) {
         const i = new Uint16Image(imageData.width, imageData.height);
         if (imageData.colorSpace == "srgb") {
             i.data = Uint16Image.convertArrayToRec2100_hlg(imageData.data);
         }
-        else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
+        else if (imageData.colorSpace == HDRImage.DEFAULT_COLORSPACE) {
             i.data = imageData.data;
         }
         else {
@@ -5876,19 +5892,180 @@ class Uint16Image {
         if (imageData.colorSpace == "srgb") {
             this.data = Uint16Image.convertArrayToRec2100_hlg(imageData.data);
         }
-        else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
+        else if (imageData.colorSpace == HDRImage.DEFAULT_COLORSPACE) {
             this.data = imageData.data;
         }
         else {
             throw new Error(`ColorSpace ${imageData.colorSpace} isn't supported!`);
         }
-        this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
+        this.colorSpace = HDRImage.DEFAULT_COLORSPACE;
     }
-    clone() {
-        const i = new Uint16Image(this.width, this.height, this.colorSpace);
-        i.data = this.data.slice();
+}
+
+class Float16Image extends HDRImage {
+    data;
+    static DEFAULT_PIXELFORMAT = "rgba-float16";
+    colorSpace;
+    pixelFormat;
+    constructor(width, height, colorspace, pixelFormat) {
+        super(width, height);
+        if (colorspace === undefined || colorspace === null) {
+            this.colorSpace = Float16Image.DEFAULT_COLORSPACE;
+        }
+        else {
+            this.colorSpace = colorspace;
+        }
+        if (pixelFormat === undefined || pixelFormat === null || (pixelFormat !== "rgba-unorm8" && pixelFormat !== "rgba-float16")) {
+            pixelFormat = Float16Image.DEFAULT_PIXELFORMAT;
+        }
+        this.pixelFormat = pixelFormat;
+        this.data = new Float16Array(height * width * 4);
+    }
+    fill(color) {
+        if (color.length != 4) {
+            return;
+        }
+        for (let i = 0; i < this.data.length; i += 4) {
+            this.data[i] = color[0];
+            this.data[i + 1] = color[1];
+            this.data[i + 2] = color[2];
+            this.data[i + 3] = color[3];
+        }
+        return this;
+    }
+    static scaleUint8ToFloat16(val) {
+        return (val << 8) | val;
+    }
+    getImageData() {
+        if (this.data === undefined || this.data === null) {
+            return null;
+        }
+        return new ImageData(this.data, this.width, this.height, {
+            colorSpace: this.colorSpace,
+            pixelFormat: this.pixelFormat
+        });
+    }
+    static convertPixelToRec2100_hlg(pixel) {
+        const colorJScolorSpace = Float16Image.COLORSPACES["rec2100-hlg"];
+        const srgbColor = new Color("srgb", Array.from(pixel.slice(0, 3)).map((band) => {
+            return band / 255;
+        }), pixel[3] / 255);
+        const rec2100hlgColor = srgbColor.to(colorJScolorSpace);
+        const hlg = rec2100hlgColor.coords.map((band) => {
+            return Math.round(band * Float16Image.SDR_MULTIPLIER);
+        });
+        hlg.push(rec2100hlgColor.alpha * Float16Image.SDR_MULTIPLIER);
+        return Float16Array.from(hlg);
+    }
+    static convertArrayToRec2100_hlg(data) {
+        const uint16Data = new Float16Array(data.length);
+        for (let i = 0; i < data.length; i += 4) {
+            const rgbPixel = data.slice(i, i + 4);
+            const pixel = Float16Image.convertPixelToRec2100_hlg(rgbPixel);
+            uint16Data.set(pixel, i);
+        }
+        return uint16Data;
+    }
+    pixelCallback(fn) {
+        for (let i = 0; i < this.data.length; i += 4) {
+            this.data.set(fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]), i);
+        }
+    }
+    static fromImageData(imageData) {
+        const i = new Float16Image(imageData.width, imageData.height);
+        if (imageData.colorSpace == "srgb") {
+            i.data = Float16Image.convertArrayToRec2100_hlg(imageData.data);
+        }
+        else if (imageData.colorSpace == HDRImage.DEFAULT_COLORSPACE) {
+            i.data = imageData.data;
+        }
+        else {
+            throw new Error(`ColorSpace ${imageData.colorSpace} isn't supported!`);
+        }
         return i;
     }
+    static fromImageDataArray(width, height, imageDataArray) {
+        const i = new Float16Image(width, height);
+        i.data = Float16Image.convertArrayToRec2100_hlg(imageDataArray);
+        return i;
+    }
+    static async fromURL(url) {
+        return Float16Image.loadSDRImageData(url).then((data) => {
+            if (data !== undefined) {
+                return Float16Image.fromImageData(data);
+            }
+        });
+    }
+    setImageData(imageData) {
+        this.width = imageData.width;
+        this.height = imageData.height;
+        if (imageData.colorSpace == "srgb") {
+            this.data = Float16Image.convertArrayToRec2100_hlg(imageData.data);
+        }
+        else if (imageData.colorSpace == HDRImage.DEFAULT_COLORSPACE) {
+            this.data = imageData.data;
+        }
+        else {
+            throw new Error(`ColorSpace ${imageData.colorSpace} isn't supported!`);
+        }
+        this.colorSpace = HDRImage.DEFAULT_COLORSPACE;
+    }
+    clone() {
+        const c = new Float16Image(this.width, this.height, this.colorSpace, this.pixelFormat);
+        c.data = this.data.slice();
+        return c;
+    }
+}
+
+function getBrowserVersion() {
+    const majorVersionStr = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+    if (majorVersionStr == null) {
+        console.warn(`Unsupported / untested browser (${navigator.userAgent}) detected - using more modern defaults`);
+    }
+    else if (majorVersionStr.length >= 3) {
+        return Number(majorVersionStr[2]);
+    }
+    return null;
+}
+
+function getHdrOptions() {
+    const hdrOptions = { colorSpace: HDRImage.DEFAULT_COLORSPACE };
+    const browserMajorVersion = getBrowserVersion();
+    if (browserMajorVersion == null) {
+        console.warn(`Unsupported / untested browser (${navigator.userAgent}) detected - using more modern defaults`);
+        hdrOptions["colorType"] = "float16";
+    }
+    else {
+        if (browserMajorVersion < 134) {
+            console.warn("Older Chrome / chromium based browser detected, using older `pixelFormat`");
+        }
+        else {
+            hdrOptions["pixelFormat"] = "float16";
+        }
+    }
+    return hdrOptions;
+}
+function initHDRCanvas(canvas) {
+    canvas.configureHighDynamicRange({ mode: "extended" });
+    const ctx = canvas.getContext("2d", getHdrOptions());
+    return ctx;
+}
+function defaultGetContextHDR() {
+    HTMLCanvasElement.prototype._getContext = HTMLCanvasElement.prototype.getContext;
+    HTMLCanvasElement.prototype.getContext = function (type, options) {
+        if (options !== undefined) {
+            options = Object.assign({}, options, getHdrOptions());
+        }
+        else {
+            options = getHdrOptions();
+        }
+        return this._getContext(type, options);
+    };
+}
+function resetGetContext() {
+    if (typeof HTMLCanvasElement.prototype._getContext === "function") {
+        HTMLCanvasElement.prototype.getContext = HTMLCanvasElement.prototype._getContext;
+    }
 }
 
 function checkHDR() {
@@ -5911,55 +6088,28 @@ function checkHDR() {
         return false;
     }
     catch (e) {
-        console.error("Bad window.screen test", e);
+        console.error("Exception during check for HDR", e);
         return false;
     }
 }
 function checkHDRCanvas() {
-    const colorSpace = "rec2100-pq";
     try {
         const canvas = document.createElement("canvas");
         if (!canvas.getContext) {
             return false;
         }
-        const ctx = canvas.getContext("2d", {
-            colorSpace: colorSpace,
-            pixelFormat: "float16"
-        });
+        const options = getHdrOptions();
+        const ctx = canvas.getContext("2d", options);
         if (ctx === null) {
             return false;
         }
         return true;
     }
-    catch (e) {
+    catch {
         console.error("Bad canvas ColorSpace test - make sure that the Chromium browser flag 'enable-experimental-web-platform-features' has been enabled");
         return false;
     }
 }
 
-const hdr_options = { colorSpace: Uint16Image.DEFAULT_COLORSPACE, pixelFormat: "float16" };
-function initHDRCanvas(canvas) {
-    canvas.configureHighDynamicRange({ mode: "extended" });
-    const ctx = canvas.getContext("2d", hdr_options);
-    return ctx;
-}
-function defaultGetContextHDR() {
-    HTMLCanvasElement.prototype._getContext = HTMLCanvasElement.prototype.getContext;
-    HTMLCanvasElement.prototype.getContext = function (type, options) {
-        if (options !== undefined) {
-            options = Object.assign({}, options, hdr_options);
-        }
-        else {
-            options = hdr_options;
-        }
-        return this._getContext(type, options);
-    };
-}
-function resetGetContext() {
-    if (typeof HTMLCanvasElement.prototype._getContext === "function") {
-        HTMLCanvasElement.prototype.getContext = HTMLCanvasElement.prototype._getContext;
-    }
-}
-
-export { Uint16Image, checkHDR, checkHDRCanvas, defaultGetContextHDR, initHDRCanvas, resetGetContext };
+export { Float16Image, HDRImage, Uint16Image, checkHDR, checkHDRCanvas, defaultGetContextHDR, initHDRCanvas, resetGetContext };
 //# sourceMappingURL=hdr-canvas.js.map