🐛 Fix SVG text rendering on thumbnails

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