Better fallback for HDR

cmahnke · Jul 13, 2024 · 7878f1f · 7878f1f
1 parent b8112bf
commit 7878f1f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/assets/js/slider-canvas.js b/assets/js/slider-canvas.js
@@ -1,4 +1,4 @@
-import {Uint16Image} from 'hdr-canvas';
+import {checkHDRCanvas, Uint16Image} from 'hdr-canvas';
 
 const colorSpace = 'rec2100-hlg';
 const colors = {'red': 0, 'green': 0, 'blue': 0};
@@ -26,14 +26,33 @@ function setupCanvas(canvas, width, height) {
   if (height !== undefined && height != 0) {
     canvas.height = height;
   }
-  canvas.configureHighDynamicRange({mode:'extended'});
-  /* See https://github.com/Fyrd/caniuse/issues/6504#issuecomment-1426886762 */
-  const ctx = canvas.getContext("2d", {colorSpace: colorSpace, pixelFormat:'float16'});
-  ctx.imageSmoothingEnabled = false;
+
+  let ctx;
+  if (checkHDRCanvas()) {
+    canvas.configureHighDynamicRange({mode:'extended'});
+    /* See https://github.com/Fyrd/caniuse/issues/6504#issuecomment-1426886762 */
+    ctx = canvas.getContext("2d", {colorSpace: colorSpace, pixelFormat:'float16'});
+    ctx.imageSmoothingEnabled = false;
+  } else {
+    console.log("Canvas ist't HDR enabled");
+    ctx = canvas.getContext("2d");
+  }
   return ctx;
 }
 
 export function initCanvas(canvas, imageUrl) {
+  if (!checkHDRCanvas()) {
+    loadSDRImage(imageUrl)
+    .then((imageData) => {
+      ctx = setupCanvas(canvas, imageData.width, imageData.height);
+      ctx.putImageData(imageData, 0, 0);
+      ctx.font = "bold 36px sans-serif";
+      ctx.fillStyle = "#ff0000";
+      ctx.fillText("HDR not supported!", 90, 100);
+      ctx.fillText("Image manipulation disabled", 10, 150);
+    });
+    return;
+  }
   loadSDRImage(imageUrl)
   .then((imageData) => {
     hdrCtx = setupCanvas(canvas, imageData.width, imageData.height);

diff --git a/assets/scss/base.scss b/assets/scss/base.scss
@@ -949,14 +949,14 @@ a:visited {
     }
 
     .odd .meta .tags {
-        justify-content: flex-end;
+        flex-direction: row-reverse !important;
+
         a {
-          padding-left: 1rem
+            padding-left: 1rem
         }
     }
 
     .even .meta .tags {
-        justify-content: flex-start;
         a {
           padding-right: 1rem
         }

diff --git a/content/post/hdr-image-analysis/index.en.md b/content/post/hdr-image-analysis/index.en.md
@@ -1,10 +1,10 @@
 ---
 date: 2024-06-06T11:33:44+02:00
 title: "Contrast enhancement for UV images using HDR"
-draft: true
 tags:
   - light
   - Licht2024
+  - digitalImages
 ---
 
 # Image analysis using HDR visualisation

diff --git a/content/post/hdr-image-analysis/index.md b/content/post/hdr-image-analysis/index.md
@@ -1,10 +1,10 @@
 ---
 date: 2024-06-06T11:33:44+02:00
 title: "Kontrasterhöhung für UV Aufnahmen mittels HDR Darstellung"
-draft: true
 tags:
   - light
   - Licht2024
+  - digitalImages
 ---
 
 # Bildanalyse mittels HDR Darstellung