code format and ui minor improvement

worker return file format for downloading; show error msg while keep image

Author: MenxLi

app/script.js

@@ -33,7 +33,7 @@ async function getInputBlob() {
     return new Uint8Array(arrayBuffer);
 }
 
-function checkInput() {
+function checkInputRaise() {
     if (fileInput.files.length === 0) {
         showError("No image file selected");
         throw new Error("No image file selected");
@@ -67,7 +67,7 @@ function resetOutput() {
     footer.style.top = '-3rem';
 }
 
-async function showImage(imBlob) {
+async function showImage(imBlob, format) {
     resetOutput();
     ensureOutput();
 
@@ -85,16 +85,16 @@ async function showImage(imBlob) {
         const a = document.createElement('a');
         a.href = url;
         const timeName = new Date().toISOString().replace(/[:.]/g, '-');
-        a.download = `img-${timeName}.${imTypeSelect.value}`;
+        a.download = `img-${timeName}.${format}`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
     };
 }
 
 async function encode_image() {
+    checkInputRaise();
     resetOutput();
-    checkInput();
 
     const inputBlob = await getInputBlob();
     hintLabel.textContent = `Encoding...`;
@@ -110,8 +110,8 @@ async function encode_image() {
 }
 
 async function decode_image() {
+    checkInputRaise();
     resetOutput();
-    checkInput();
 
     const inputBlob = await getInputBlob();
     hintLabel.textContent = `Decoding...`;
@@ -132,7 +132,10 @@ worker.onmessage = async (event) => {
         console.error(event.data.error);
         return;
     }
-    await showImage(event.data.buffer);
+    await showImage(
+        event.data.buffer, 
+        event.data.format
+    );
 };
 
 // Event listeners for inputs

app/worker.js

@@ -11,11 +11,11 @@ self.onmessage = async function(event) {
 
     if (type === 'encode') {
         const encoded = encode(buffer, secret, maxSide, outputAs);
-        self.postMessage({ type: 'encoded', buffer: encoded });
+        self.postMessage({ type: 'encoded', buffer: encoded, format: outputAs });
     }
 
     if (type === 'decode') {
         const decoded = decode(buffer, secret, maxSide, outputAs);
-        self.postMessage({ type: 'decoded', buffer: decoded });
+        self.postMessage({ type: 'decoded', buffer: decoded, format: outputAs });
     }
 }

src/lib.rs

@@ -31,6 +31,7 @@ fn str2f(s: &str) -> f64 {
 
 fn maybe_resize(img: image::RgbImage, max_side: u32) -> (image::RgbImage, u32, u32) {
     let (width, height) = img.dimensions();
+
     if width > max_side || height > max_side {
         let scale = max_side as f64 / width.max(height) as f64;
         let new_width = (width as f64 * scale).round() as u32;
@@ -48,15 +49,18 @@ fn maybe_resize(img: image::RgbImage, max_side: u32) -> (image::RgbImage, u32, u
 fn img2vec(im: &[u8], limit_max_side: Option<u32>) -> (Vec<u8>, ImageOptions) {
     let img = image::load_from_memory(im).expect("Failed to load image");
     let mut rgb = img.to_rgb8();
+
     if let Some(max_side) = limit_max_side {
         (rgb, _, _) = maybe_resize(rgb, max_side);
     }
+
     let mut pixels = Vec::with_capacity(rgb.width() as usize * rgb.height() as usize * 3);
     for pixel in rgb.pixels() {
         pixels.push(pixel[0]);
         pixels.push(pixel[1]);
         pixels.push(pixel[2]);
     };
+
     (pixels, ImageOptions {
         width: rgb.width(),
         height: rgb.height(),
@@ -72,6 +76,7 @@ enum ImageType {
 fn vec2imblob(pixels: &Vec<u8>, im_opt: ImageOptions, limit_max_side: Option<u32>, im_type: ImageType) -> Box<[u8]> {
     let ImageOptions { mut width, mut height , channels} = im_opt;
     let mut img = image::RgbImage::new(width, height);
+
     for (i, pixel) in pixels.chunks(channels as usize).enumerate() {
         let x = (i % width as usize) as u32;
         let y = (i / width as usize) as u32;
@@ -81,9 +86,11 @@ fn vec2imblob(pixels: &Vec<u8>, im_opt: ImageOptions, limit_max_side: Option<u32
             pixel[2],
         ]));
     };
+
     if let Some(max_side) = limit_max_side {
         (img, width, height) = maybe_resize(img, max_side);
     }
+
     let mut buf = Vec::new();
     match im_type {
         ImageType::Png => {
@@ -98,6 +105,7 @@ fn vec2imblob(pixels: &Vec<u8>, im_opt: ImageOptions, limit_max_side: Option<u32
         },
     }
     console_log!("Export image, dimensions: {}x{}", width, height);
+
     buf.into_boxed_slice()
 }
 
@@ -106,9 +114,10 @@ pub fn encode(im: &[u8], secret: &str, max_side: i32, as_type: &str) -> Box<[u8]
     console_log!("Encoding image with secret: {}, max_side: {}", secret, max_side);
     let max_side = if max_side < 1 { None } else { Some(max_side as u32) };
 
-    let (im_v, im_opt) = img2vec(im, max_side);
     let seed = str2f(&secret);
     console_log!("Seed: {}", seed);
+
+    let (im_v, im_opt) = img2vec(im, max_side);
     let pixels = logistic_map::encode::<3>(&im_v, seed);
     vec2imblob(&pixels, im_opt, None, match as_type {
         "png" => ImageType::Png,
@@ -122,9 +131,10 @@ pub fn decode(im: &[u8], secret: &str, max_side: i32, as_type: &str) -> Box<[u8]
     console_log!("Decoding image with secret: {}, max_side: {}", secret, max_side);
     let max_side = if max_side < 1 { None } else { Some(max_side as u32) };
 
-    let (im_v, im_opt) = img2vec(im, None);
     let seed = str2f(&secret);
     console_log!("Seed: {}", seed);
+
+    let (im_v, im_opt) = img2vec(im, None);
     let pixels = logistic_map::decode::<3>(&im_v, seed);
     vec2imblob(&pixels, im_opt, max_side, match as_type {
         "png" => ImageType::Png,

src/logistic_map.rs

@@ -38,9 +38,9 @@ enum DiffuseDirection {
     Forward,
     Backward,
 }
-fn diffuse<T: Copy>(im: &Vec<T>, enc_map: &Vec<f64>, direction: DiffuseDirection, chunk_size: usize) -> Vec<T> 
+fn diffuse<const C: usize>(im: &Vec<u8>, enc_map: &Vec<f64>, direction: DiffuseDirection) -> Vec<u8> 
 {
-    let enc_map = enc_map[..im.len()/chunk_size]
+    let enc_map = enc_map[..im.len()/C]
         .iter()
         .map(|&x| x.to_bits())
         .collect();
@@ -50,20 +50,20 @@ fn diffuse<T: Copy>(im: &Vec<T>, enc_map: &Vec<f64>, direction: DiffuseDirection
     match direction {
         DiffuseDirection::Forward => {
             for &index in &indices {
-                for i in 0..chunk_size {
-                    let index = index * chunk_size + i;
+                for i in 0..C {
+                    let index = index * C + i;
                     diffuse_pixels.push(im[index]);
                 }
             }
         },
         DiffuseDirection::Backward => {
-            let mut lookup: Vec<usize> = vec![0; im.len() / chunk_size];
+            let mut lookup: Vec<usize> = vec![0; im.len() / C];
             for (i, &index) in indices.iter().enumerate() {
                 lookup[index] = i;
             }
             for &index in &lookup {
-                for i in 0..chunk_size {
-                    let index = index * chunk_size + i;
+                for i in 0..C {
+                    let index = index * C + i;
                     diffuse_pixels.push(im[index]);
                 }
             }
@@ -72,14 +72,15 @@ fn diffuse<T: Copy>(im: &Vec<T>, enc_map: &Vec<f64>, direction: DiffuseDirection
     diffuse_pixels
 }
 
-// C: channel size, e.g. 3 for RGB
+// C: channel size for diffusion process, reduce computation with higher C
 pub fn encode<const C: usize>(im: &Vec<u8>, x0: f64) -> Vec<u8> {
     let enc_map = generate_map(LogisticMapOptions {
         x: x0,
         r: R,  
         size: im.len(),
     });
-    let im = diffuse(&im, &enc_map, DiffuseDirection::Forward, C);
+
+    let im = diffuse::<C>(&im, &enc_map, DiffuseDirection::Forward);
     confuse_xor(&im, &enc_map)
 }
 
@@ -89,6 +90,7 @@ pub fn decode<const C:usize>(im: &Vec<u8>, x0: f64) -> Vec<u8> {
         r: R,  
         size: im.len(),
     });
+
     let im = confuse_xor(&im, &enc_map);
-    diffuse(&im, &enc_map, DiffuseDirection::Backward, C)
+    diffuse::<C>(&im, &enc_map, DiffuseDirection::Backward)
 }