resize opt

Author: MenxLi

app/index.html

@@ -16,6 +16,13 @@
             <br>
             <label for="secretInput">Secret:</label>
             <input id="secretInput" placeholder="Enter your secret here" autocomplete="off">
+
+            <span style="margin-top: 0.25rem">
+            <input type="checkbox" id="limitMaxSide" checked>
+            <label for="limitMaxSide">Limit max side to </label>
+            <input type="number" id="maxSide" value="1024" min="1" max="25565" step="1" style="width: 4em;">
+            <label for="maxSide">px</label>
+            </span>
         </div>
 
         <div id="button-container">
@@ -34,6 +41,13 @@
         <div id="error"></div>
     </div>
 
+    <div id="footer">
+        <p style="text-align: center; font-size: 0.8em; color: #666">
+            The code runs entirely in your browser using WebAssembly. <br>
+            The source code is available at <a href="https://github.com/MenxLi/chaotic-enc">menxli/chaotic-enc</a>.
+        </p>
+    </div>
+
 </body>
 
 <script type="module">
@@ -43,6 +57,8 @@
 
     const secretInput = document.getElementById('secretInput');
     const fileInput = document.getElementById('fileInput');
+    const limitMaxSideInput = document.getElementById('limitMaxSide');
+    const maxSideInput = document.getElementById('maxSide');
     const inputImgDiv = document.getElementById('inputImg');
     const outputDiv = document.getElementById('output');
     const hintLabel = document.getElementById('hint');
@@ -99,14 +115,14 @@
 
         const imgElem = document.createElement('img');
         imgElem.src = url;
-        imgElem.alt = 'Encoded Image';
+        imgElem.alt = 'Image';
         outputDiv.appendChild(imgElem);
 
         downloadBtn.style.display = 'block';
         downloadBtn.onclick = () => {
             const a = document.createElement('a');
             a.href = url;
-            a.download = 'encoded_image.png';
+            a.download = 'image.png';
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
@@ -118,15 +134,25 @@
         resetOutput();
         const inputBlob = await getInputBlob();
         hintLabel.textContent = `Encoding...`;
-        worker.postMessage({type: 'encode', buffer: inputBlob, secret: secretInput.value });
+        worker.postMessage({
+            type: 'encode', 
+            buffer: inputBlob, 
+            secret: secretInput.value, 
+            maxSide: limitMaxSideInput.checked ? parseInt(maxSideInput.value) : -1
+            });
     }
 
     async function decode_image() {
         checkInput();
         resetOutput();
         const inputBlob = await getInputBlob();
         hintLabel.textContent = `Decoding...`;
-        worker.postMessage({type: 'decode',  buffer: inputBlob, secret: secretInput.value });
+        worker.postMessage({
+            type: 'decode',  
+            buffer: inputBlob, 
+            secret: secretInput.value, 
+            maxSide: limitMaxSideInput.checked ? parseInt(maxSideInput.value) : -1
+            });
     }
 
     worker.onmessage = async (event) => {

app/worker.js

@@ -2,15 +2,17 @@ import init, { encode, decode } from './pkg/chaotic_enc.js';
 
 await init();
 self.onmessage = async function(event) {
-    const { type, buffer, secret } = event.data;
+    const { type, buffer, secret, maxSide } = event.data;
+
+    console.log('Worker received message:', event.data);
 
     if (type === 'encode') {
-        const encoded = encode(buffer, secret);
+        const encoded = encode(buffer, secret, maxSide);
         self.postMessage({ type: 'encoded', buffer: encoded });
     }
 
     if (type === 'decode') {
-        const decoded = decode(buffer, secret);
+        const decoded = decode(buffer, secret, maxSide);
         self.postMessage({ type: 'decoded', buffer: decoded });
     }
 }

src/lib.rs

@@ -6,6 +6,20 @@ use std::u8;
 use wasm_bindgen::prelude::*;
 use image::{self, ImageEncoder};
 
+// https://rustwasm.github.io/wasm-bindgen/examples/console-log.html
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = console)]
+    fn log(s: &str);
+    #[wasm_bindgen(js_namespace = console, js_name = log)]
+    fn log_u32(a: u32);
+    #[wasm_bindgen(js_namespace = console, js_name = log)]
+    fn log_many(a: &str, b: &str);
+}
+macro_rules! console_log {
+    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
+}
+
 pub struct ImageOptions {
     pub width: u32,
     pub height: u32,
@@ -19,9 +33,23 @@ fn str2f(s: &str) -> f32 {
     x
 }
 
-fn img2vec(im: &[u8]) -> (Vec<[u8; 3]>, ImageOptions) {
+fn img2vec(im: &[u8], limit_max_side: Option<u32>) -> (Vec<[u8; 3]>, ImageOptions) {
     let img = image::load_from_memory(im).expect("Failed to load image");
-    let rgb = img.to_rgb8();
+    let mut rgb = img.to_rgb8();
+
+    if let Some(max_side) = limit_max_side {
+        let (mut width, mut height) = rgb.dimensions();
+        if width > max_side || height > max_side {
+            let scale = max_side as f32 / width.max(height) as f32;
+            width = (width as f32 * scale).round() as u32;
+            height = (height as f32 * scale).round() as u32;
+            rgb = image::imageops::resize(
+                &rgb, width, height, 
+                image::imageops::FilterType::Lanczos3
+            );
+        }
+    }
+
     let mut pixels = Vec::with_capacity(rgb.width() as usize * rgb.height() as usize);
     for pixel in rgb.pixels() {
         pixels.push([pixel[0], pixel[1], pixel[2]]);
@@ -33,8 +61,8 @@ fn img2vec(im: &[u8]) -> (Vec<[u8; 3]>, ImageOptions) {
     })
 }
 
-fn vec2pngblob(pixels: &Vec<[u8; 3]>, im_opt: ImageOptions) -> Box<[u8]> {
-    let ImageOptions { width, height } = im_opt;
+fn vec2pngblob(pixels: &Vec<[u8; 3]>, im_opt: ImageOptions, limit_max_side: Option<u32>) -> Box<[u8]> {
+    let ImageOptions { mut width, mut height } = im_opt;
 
     let mut img = image::RgbImage::new(width, height);
     for (i, pixel) in pixels.iter().enumerate() {
@@ -43,6 +71,18 @@ fn vec2pngblob(pixels: &Vec<[u8; 3]>, im_opt: ImageOptions) -> Box<[u8]> {
         img.put_pixel(x, y, image::Rgb(*pixel));
     };
 
+    if let Some(max_side) = limit_max_side {
+        if width > max_side || height > max_side {
+            let scale = max_side as f32 / width.max(height) as f32;
+            width = (width as f32 * scale).round() as u32;
+            height = (height as f32 * scale).round() as u32;
+            img = image::imageops::resize(
+                &img, width, height, 
+                image::imageops::FilterType::Lanczos3
+            );
+        }
+    }
+
     // Encode the image to PNG format
     let mut buf = Vec::new();
     let encoder = image::codecs::png::PngEncoder::new(&mut buf);
@@ -53,29 +93,36 @@ fn vec2pngblob(pixels: &Vec<[u8; 3]>, im_opt: ImageOptions) -> Box<[u8]> {
         image::ExtendedColorType::Rgb8,
     ).expect("Failed to encode image");
 
+    console_log!("Export image, dimensions: {}x{}", width, height);
     buf.into_boxed_slice()
 }
 
 #[wasm_bindgen]
-pub fn encode(im: &[u8], secret: &str) -> Box<[u8]> {
-    let (mut im_v, im_opt) = img2vec(im);
+pub fn encode(im: &[u8], secret: &str, max_side: i32) -> 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 (mut im_v, im_opt) = img2vec(im, max_side);
 
     let pixels = logistic_map::encode(
         &mut im_v,
         str2f(&secret)
     );
 
-    vec2pngblob(&pixels, im_opt)
+    vec2pngblob(&pixels, im_opt, None)
 }
 
 #[wasm_bindgen]
-pub fn decode(im: &[u8], secret: &str) -> Box<[u8]> {
-    let (im_v, im_opt) = img2vec(im);
+pub fn decode(im: &[u8], secret: &str, max_side: i32) -> 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 pixels = logistic_map::decode(
         &im_v,
         str2f(&secret)
     );
 
-    vec2pngblob(&pixels, im_opt)
+    vec2pngblob(&pixels, im_opt, max_side)
 }