Make work better on Safari by manual posterization

tomayac · Sep 28, 2023 · 5d7967e · 5d7967e
1 parent a39f451
commit 5d7967e
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 22 deletions.
diff --git a/docs/assets/collect-3e738344.js → docs/assets/collect-9cb57440.js b/docs/assets/collect-3e738344.js → docs/assets/collect-9cb57440.js
diff --git a/docs/assets/filehandling-01abf381.js → docs/assets/filehandling-e9a81a95.js b/docs/assets/filehandling-01abf381.js → docs/assets/filehandling-e9a81a95.js
diff --git a/docs/assets/index-c3c47574.js → docs/assets/index-567ccd08.js b/docs/assets/index-c3c47574.js → docs/assets/index-567ccd08.js
diff --git a/docs/assets/install-2c7186a7.js → docs/assets/install-49bda3c1.js b/docs/assets/install-2c7186a7.js → docs/assets/install-49bda3c1.js
diff --git a/docs/assets/share-4940c82e.js → docs/assets/share-8dfeeb31.js b/docs/assets/share-4940c82e.js → docs/assets/share-8dfeeb31.js
diff --git a/docs/assets/windowcontrols-23e4325e.js → docs/assets/windowcontrols-56fcfc9e.js b/docs/assets/windowcontrols-23e4325e.js → docs/assets/windowcontrols-56fcfc9e.js
diff --git a/docs/index.html b/docs/index.html
@@ -101,7 +101,7 @@
       }
     </script>
     <base target="_blank" />
-    <script type="module" crossorigin src="/assets/index-c3c47574.js"></script>
+    <script type="module" crossorigin src="/assets/index-567ccd08.js"></script>
     <link rel="stylesheet" href="/assets/style-02ad85c7.css">
   <link rel="manifest" href="/manifest.webmanifest"></head>
   <body>

diff --git a/docs/sw.js b/docs/sw.js
diff --git a/src/js/preprocess.js b/src/js/preprocess.js
@@ -127,16 +127,41 @@ if (supportsOffscreenCanvas) {
     canvasMain.width = width;
     canvasMain.height = height;
     ctxMain.clearRect(0, 0, width, height);
-    ctxMain.filter = getFilterString();
     ctxMain.setTransform(1, 0, 0, 1, width / 2, height / 2);
-    const rotate = Number(filterInputs[SCALE_ROTATION.rotation].value);
-    ctxMain.rotate((rotate * Math.PI) / 180);
     ctxMain.drawImage(
       inputImage,
       (-factor * inputImage.naturalWidth * shrinkFactor) / 2,
       (-factor * inputImage.naturalHeight * shrinkFactor) / 2,
     );
-    return ctxMain.getImageData(0, 0, width, height);
+    const rotate = Number(filterInputs[SCALE_ROTATION.rotation].value);
+    ctxMain.rotate((rotate * Math.PI) / 180);
+    ctxMain.filter = getFilterString();
+    const imgData = ctxMain.getImageData(
+      0,
+      0,
+      canvasMain.width,
+      canvasMain.height,
+    );
+    const redSteps = filterInputs[COLORS.red].value;
+    const greenSteps = filterInputs[COLORS.green].value;
+    const blueSteps = filterInputs[COLORS.blue].value;
+    const alphaSteps = filterInputs[COLORS.alpha].value + 1;
+    for (let i = 0; i < imgData.data.length; i += 4) {
+      imgData.data[i] =
+        Math.floor((imgData.data[i] / 255) * (redSteps - 1)) *
+        (255 / (redSteps - 1));
+      imgData.data[i + 1] =
+        Math.floor((imgData.data[i + 1] / 255) * (greenSteps - 1)) *
+        (255 / (greenSteps - 1));
+      imgData.data[i + 2] =
+        Math.floor((imgData.data[i + 2] / 255) * (blueSteps - 1)) *
+        (255 / (blueSteps - 1));
+      imgData.data[i + 3] =
+        Math.floor((imgData.data[i + 3] / 255) * (alphaSteps - 1)) *
+        (255 / (alphaSteps - 1));
+    }
+    ctxMain.putImageData(imgData, 0, 0);
+    return imgData;
   };
 }