🐛 Fix SVG text rendering on thumbnails

frontend/src/app/util/thumbnails.cljs

@@ -0,0 +1,29 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.util.thumbnails
+  (:require
+   [app.common.math :as mth]))
+
+(def ^:const min-size 250)
+(def ^:const max-size 2000)
+
+(defn get-proportional-size
+  "Returns a proportional size given a width and height and some size constraints."
+  ([width height]
+   (get-proportional-size width height min-size max-size min-size max-size))
+  ([width height min-size max-size]
+   (get-proportional-size width height min-size max-size min-size max-size))
+  ([width height min-width max-width min-height max-height]
+   (let [[fixed-width fixed-height]
+          (if (> width height)
+            [(mth/clamp width min-width max-width)
+             (/ (* height (mth/clamp width min-width max-width)) width)]
+            [(/ (* width (mth/clamp height min-height max-height)) height)
+             (mth/clamp height min-height max-height)])]
+      [fixed-width fixed-height])))
+
+

frontend/src/app/util/webapi.cljs

@@ -11,6 +11,7 @@
    [app.common.exceptions :as ex]
    [app.common.logging :as log]
    [app.util.object :as obj]
+   [app.util.thumbnails :as th]
    [beicon.core :as rx]
    [cuerdas.core :as str]
    [promesa.core :as p]))
@@ -130,12 +131,40 @@
            (map #(.item ^js file-list %))
            (filter #(str/starts-with? (.-type %) "image/"))))))
 
+(defn create-canvas-element
+  [width height]
+  (let [canvas (.createElement js/document "canvas")]
+    (obj/set! canvas "width" width)
+    (obj/set! canvas "height" height)
+    canvas))
+
+(defn create-offscreen-canvas
+  [width height]
+  (if (obj/in? js/window "OffscreenCanvas")
+    (js/OffscreenCanvas. width height)
+    (create-canvas-element width height)))
+
 (defn create-image-bitmap
   ([image]
    (js/createImageBitmap image))
   ([image options]
    (js/createImageBitmap image options)))
 
+;; Why this? Because as described in https://bugs.chromium.org/p/chromium/issues/detail?id=1463435
+;; the createImageBitmap seems to apply premultiplied alpha multiples times on the same image
+;; which results in harsh borders around text being rendered. This is a workaround to avoid this issue.
+(defn create-image-bitmap-with-workaround
+  ([image]
+   (create-image-bitmap-with-workaround image nil))
+  ([image options]
+   (let [width (.-value (.-baseVal (.-width image)))
+         height (.-value (.-baseVal (.-height image)))
+         [width height] (th/get-proportional-size width height)
+         offscreen-canvas (create-offscreen-canvas width height)
+         offscreen-context (.getContext offscreen-canvas "2d")]
+     (.drawImage offscreen-context image 0 0)
+     (create-image-bitmap offscreen-canvas options))))
+
 (defn request-fullscreen
   [el]
   (cond