Favicon PNG encoder in WASM instead of JS

.gitignore

@@ -2,4 +2,6 @@ node_modules/
 dist
 dev
 temp
-src/credentials.js
+src/credentials.js
+/src/wasm_png_compression/target/
+.idea

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "browser-image-compression": "^1.0.14",
+    "wasm_png_compression": "file:./src/wasm_png_compression/pkg",
     "browser-info": "^1.2.0",
     "clone": "^2.1.2",
     "lodash": "^4.17.21",
@@ -38,7 +39,7 @@
     "css-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^9.0.0",
+    "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
     "webpack": "^5.88.2",
     "webpack-cli": "^4.8.0",

src/common/compressDataUrl.js

@@ -1,19 +1,23 @@
 import imageCompression from 'browser-image-compression';
 
+import { ImageUtil } from 'wasm_png_compression';
+
 export const compressDataUrl = async dataUrl => {
   try {
-    const file = await imageCompression.getFilefromDataUrl(dataUrl, "");
-    const compressedFile = await imageCompression(file, {
-      maxWidthOrHeight: 32,
-      initialQuality: 0.5,
-      maxIteration: 1,
-      useWebWorker: false
-    });
+    const wasm_compressed = ImageUtil.compress_image(dataUrl);
+    const wasm_blob = new Blob([wasm_compressed], { type: 'image/png' });
 
+    // const file = await imageCompression.getFilefromDataUrl(dataUrl, "");
+    // const compressedFile = await imageCompression(file, {
+    //   maxWidthOrHeight: 32,
+    //   initialQuality: 0.5,
+    //   maxIteration: 1,
+    //   useWebWorker: false
+    // });
     const reader = new FileReader();
     return new Promise(resolve => {
       reader.onload = e => resolve(e.target.result);
-      reader.readAsDataURL(compressedFile);
+      reader.readAsDataURL(wasm_blob);
     });
   }
   catch {

src/manifest-ff.json

@@ -55,5 +55,8 @@
     "exportSessions": {
       "description": "__MSG_exportSessionsDescription__"
     }
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'"
   }
 }

src/manifest.json

@@ -52,5 +52,8 @@
       "description": "__MSG_exportSessionsDescription__"
     }
   },
-  "incognito": "spanning"
+  "incognito": "spanning",
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'"
+  }
 }

src/wasm_png_compression/Cargo.toml

@@ -0,0 +1,36 @@
+[package]
+name = "wasm_png_compression"
+version = "0.1.0"
+authors = ["bwdq"]
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+wasm-bindgen = "0.2.63"
+base64 = "0.22.1"
+js-sys = "0.3.69"
+web-sys = "0.3.69"
+image = "0.25.2"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.6", optional = true }
+
+# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
+# compared to the default allocator's ~10K. It is slower than the default
+# allocator, however.
+wee_alloc = { version = "0.4.5", optional = true }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.13"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"

src/wasm_png_compression/src/lib.rs

@@ -0,0 +1,40 @@
+mod utils;
+
+use wasm_bindgen::prelude::*;
+
+use std::io::Cursor;
+use wasm_bindgen::JsValue;
+use js_sys::Uint8Array;
+
+use image::{EncodableLayout, ImageReader};
+use base64::{Engine as _, engine::{general_purpose}};
+
+#[cfg(feature = "wee_alloc")]
+#[global_allocator]
+static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+#[wasm_bindgen]
+extern {
+    fn alert(s: &str);
+}
+
+#[wasm_bindgen]
+pub struct ImageUtil {}
+
+#[wasm_bindgen]
+impl ImageUtil {
+
+    pub fn compress_image(image: &str) -> Result< JsValue, JsValue>{
+        let base64_image = image.split(",").collect::<Vec<&str>>()[1];
+        let bytes = general_purpose::STANDARD
+        .decode(base64_image).unwrap();
+        let img = ImageReader::new(Cursor::new(bytes)).with_guessed_format().unwrap().decode().unwrap();
+        //shrink to max dimension of 32
+        let img = img.thumbnail(32, 32);
+        let mut buf = Vec::new();
+        img.write_to(&mut Cursor::new(&mut buf), image::ImageFormat::Png).unwrap();
+
+        Ok(JsValue::from(Uint8Array::from(buf.as_slice())))
+    }
+
+}

src/wasm_png_compression/src/utils.rs

@@ -0,0 +1,10 @@
+pub fn set_panic_hook() {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+}

webpack.config.dev.js

@@ -24,7 +24,8 @@ const generalConfig = {
     },
     fallback: {
       "url": require.resolve("url/")
-    }
+    },
+    extensions: [".js", ".jsx", ".wasm"]
   },
   module: {
     rules: [
@@ -33,7 +34,7 @@ const generalConfig = {
         exclude: /node_modules/,
         test: /\.(js|jsx)$/,
         resolve: {
-          extensions: [".js", ".jsx"]
+          extensions: [".js", ".jsx", ".wasm"]
         }
       },
       {
@@ -56,8 +57,15 @@ const generalConfig = {
       {
         test: /\.svg$/,
         use: ["@svgr/webpack"]
+      },
+      {
+        test: /\.wasm$/,
+        type: 'webassembly/async'
       }
     ]
+  },
+  experiments: {
+    asyncWebAssembly: true
   }
 };
 

webpack.config.dist.js

@@ -30,7 +30,8 @@ const generalConfig = {
     },
     fallback: {
       "url": require.resolve("url/")
-    }
+    },
+    extensions: [".js", ".jsx", ".wasm"]
   },
   module: {
     rules: [
@@ -39,7 +40,7 @@ const generalConfig = {
         exclude: /node_modules/,
         test: /\.(js|jsx)$/,
         resolve: {
-          extensions: [".js", ".jsx"]
+          extensions: [".js", ".jsx", ".wasm"]
         }
       },
       {
@@ -62,8 +63,15 @@ const generalConfig = {
       {
         test: /\.svg$/,
         use: ["@svgr/webpack"]
+      },
+      {
+        test: /\.wasm$/,
+        type: 'webassembly/async'
       }
     ]
+  },
+  experiments: {
+    asyncWebAssembly: true
   }
 };