Process raw image data from frame

spritefire/Cargo.toml

@@ -25,6 +25,7 @@ postcard = { version = "1.0.0", features = ["alloc"] }
 # all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.7", optional = true }
+web-sys = { version = "0.3.69", features = ["ImageData"] }
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.34"

spritefire/index.html

@@ -11,7 +11,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
 
   <script type="module">
-    import init, {set_db, process_img} from "./pkg/spritefire.js"
+    import init, {set_db, process_img, process_img_data} from "./pkg/spritefire.js"
     await init()
     set_db()
 
@@ -45,15 +45,19 @@
       computeFrame() {
         this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
 
-        this.c1.toBlob(async (blob) => {
+        // this.c1.toBlob(async (blob) => {
 
-          const bytes = new Uint8Array(await blob.arrayBuffer());
+        //   const bytes = new Uint8Array(await blob.arrayBuffer());
 
-          const resultString = process_img(bytes, 4);
-          // Displaying the returned string in the text box
-          document.getElementById("resultText").value = resultString;
-        });
+        //   const resultString = process_img(bytes, 4);
+        //   // Displaying the returned string in the text box
+        //   document.getElementById("resultText").value = resultString;
+        // });
         const frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+        const resultString = process_img_data(frame, 4);
+        // Displaying the returned string in the text box
+        document.getElementById("resultText").value = resultString;
+
 
         return;
       },

spritefire/src/lib.rs

@@ -1,7 +1,8 @@
 use db::EmojiDatabase;
-use image::{load_from_memory_with_format, ImageFormat};
+use image::{load_from_memory, load_from_memory_with_format, ImageFormat, Rgba, RgbaImage};
 use std::sync::OnceLock;
 use wasm_bindgen::prelude::*;
+use web_sys::ImageData;
 
 pub mod db;
 pub mod emoji;
@@ -13,7 +14,7 @@ pub fn set_panic_hook() {
     //
     // For more details see
     // https://github.com/rustwasm/console_error_panic_hook#readme
-    #[cfg(feature = "console_error_panic_hook")]
+    // #[cfg(feature = "console_error_panic_hook")]
     console_error_panic_hook::set_once();
 }
 
@@ -37,3 +38,10 @@ pub fn process_img(buf: &[u8], pool_size: u32) -> String {
     let img = load_from_memory_with_format(buf, ImageFormat::Png).unwrap();
     get_db().emojify_image_to_string(img, pool_size)
 }
+
+#[wasm_bindgen]
+pub fn process_img_data(img_data: ImageData, pool_size: u32) -> String {
+    let img = RgbaImage::from_raw(img_data.width(), img_data.height(), img_data.data().0).unwrap();
+    let img = image::DynamicImage::ImageRgba8(img);
+    get_db().emojify_image_to_string(img, pool_size)
+}