minor

Author: MenxLi

app/script.js

@@ -67,12 +67,18 @@ function resetOutput() {
     footer.style.top = '-3rem';
 }
 
-async function showImage(imBlob, format) {
+/**
+ * Prepare the output area: display the image, and set up the download button.
+ * @param {string} type - 'encoded' / 'decoded'
+ * @param {Uint8Array} imBlob - The image data as a Uint8Array
+ * @param {string} format - The image format, 'png'/'jpeg'
+ */
+async function showImage(type, imBlob, format) {
     resetOutput();
     ensureOutput();
 
     hintLabel.textContent = '';
-    const blob = new Blob([imBlob], { type: 'image/png' });
+    const blob = new Blob([imBlob], { type: `image/${format}` });
     const url = URL.createObjectURL(blob);
 
     const imgElem = document.createElement('img');
@@ -84,8 +90,8 @@ async function showImage(imBlob, format) {
     downloadBtn.onclick = () => {
         const a = document.createElement('a');
         a.href = url;
-        const timeName = new Date().toISOString().replace(/[:.]/g, '-');
-        a.download = `img-${timeName}.${format}`;
+        const uuid = crypto.randomUUID().slice(0, 8);
+        a.download = `${type}-${uuid}.${format}`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
@@ -130,9 +136,11 @@ worker.onmessage = async (event) => {
     if (event.data.error) {
         await showError(`Error: ${event.data.error}`);
         console.error(event.data.error);
+        hintLabel.textContent = '';
         return;
     }
     await showImage(
+        event.data.type,
         event.data.buffer, 
         event.data.format
     );
@@ -154,10 +162,10 @@ worker.onmessage = async (event) => {
 
     fileInput.addEventListener('change', ()=>{
         resetOutput();
-        hintLabel.textContent = '(The selected image)';
         const file = fileInput.files[0];
         if (file) {
             ensureOutput();
+            hintLabel.textContent = '(The selected image)';
             const imgElem = document.createElement('img');
             imgElem.src = URL.createObjectURL(file);
             imgElem.alt = 'Selected Image';

app/worker.js

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

src/lib.rs

@@ -2,11 +2,9 @@ mod logistic_map;
 
 use std::collections::hash_map::DefaultHasher;
 use std::hash::{Hash, Hasher};
-use std::u8;
-use wasm_bindgen::prelude::*;
 use image::{self, ImageEncoder};
+use wasm_bindgen::prelude::*;
 
-// https://rustwasm.github.io/wasm-bindgen/examples/console-log.html
 #[wasm_bindgen]
 extern "C" {
     #[wasm_bindgen(js_namespace = console)]
@@ -19,7 +17,6 @@ macro_rules! console_log {
 pub struct ImageOptions {
     pub width: u32,
     pub height: u32,
-    pub channels: u32,
 }
 
 fn str2f(s: &str) -> f64 {
@@ -65,7 +62,6 @@ fn img2vec(im: &[u8], limit_max_side: Option<u32>) -> Result<(Vec<u8>, ImageOpti
     Ok((pixels, ImageOptions {
         width: rgb.width(),
         height: rgb.height(),
-        channels: 3,
     }))
 }
 
@@ -75,10 +71,10 @@ enum ImageType {
 }
 
 fn vec2imblob(pixels: &Vec<u8>, im_opt: ImageOptions, limit_max_side: Option<u32>, im_type: ImageType) -> Result<Box<[u8]>, String> {
-    let ImageOptions { mut width, mut height , channels} = im_opt;
+    let ImageOptions { mut width, mut height } = im_opt;
     let mut img = image::RgbImage::new(width, height);
 
-    for (i, pixel) in pixels.chunks(channels as usize).enumerate() {
+    for (i, pixel) in pixels.chunks(3).enumerate() {
         let x = (i % width as usize) as u32;
         let y = (i / width as usize) as u32;
         img.put_pixel(x, y, image::Rgb([