jpg output

Author: MenxLi

app/index.html

@@ -10,40 +10,52 @@
     <title>Image encoder</title>
 
     <div id="input-container" class="container">
+        <label>
+            Select an image file and enter a secret to encode / decode
+        </label>
         <div id="secret-container">
             <div id="drop-zone" style="display: none;">
                 <p>Drag and drop an image file here.</p>
                 <p>Supported formats: PNG, JPEG, BMP, ...</p>
             </div>
 
-            <label>Select an image file</label>
             <input type="file" id="fileInput" accept="image/*" required>
             <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>
+                <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">
             <button id="encodeButton">Encode</button>
             <button id="decodeButton">Decode</button>
+            as 
+            <div style="display: flex">
+                <select id="imTypeSelect">
+                    <option value="png">PNG</option>
+                    <option value="jpeg">JPEG</option>
+                </select>
+            </div>
         </div>
     </div>
 
     <div id="output-container" class="container">
+        <label id="hint"></label>
         <div id="error"></div>
-        <div id="downloadBtnContainer" style="display: none">
-            <button id="downloadBtn">Download Image</button>
+        <div id="warning" style="display: none">
+            Encode as JPEG will introduce noise to recovered image.
         </div>
-        <label id="hint">Enter a secret and select an image file to encode / decode</label>
         <div id="inputImg"></div>
         <div id="output"></div>
+        <div id="downloadBtnContainer" style="display: none">
+            <button id="downloadBtn">Download Image</button>
+        </div>
     </div>
 
     <div id="footer">
@@ -58,4 +70,4 @@
 </body>
 
 <script src="./script.js" type="module"></script>
-</html>
+</html>

app/script.js

@@ -15,6 +15,7 @@ const decodeButton = document.getElementById('decodeButton');
 const downloadBtnContainer = document.getElementById('downloadBtnContainer');
 const downloadBtn = document.getElementById('downloadBtn');
 const errorDiv = document.getElementById('error');
+const imTypeSelect = document.getElementById('imTypeSelect');
 const worker = new Worker('./worker.js', { type: 'module' });
 
 const urlParams = new URLSearchParams(window.location.search);
@@ -52,7 +53,7 @@ function resetOutput() {
     errorDiv.textContent = '';
     errorDiv.style.display = 'none';
     downloadBtnContainer.style.display = 'none';
-    hintLabel.textContent = 'Enter a secret and select an image file to encode / decode';
+    hintLabel.textContent = '';
 }
 
 async function showImage(imBlob) {
@@ -71,7 +72,7 @@ async function showImage(imBlob) {
         const a = document.createElement('a');
         a.href = url;
         const timeName = new Date().toISOString().replace(/[:.]/g, '-');
-        a.download = `img-${timeName}.png`;
+        a.download = `img-${timeName}.${imTypeSelect.value}`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
@@ -87,7 +88,8 @@ async function encode_image() {
         type: 'encode', 
         buffer: inputBlob, 
         secret: secretInput.value, 
-        maxSide: limitMaxSideInput.checked ? parseInt(maxSideInput.value) : -1
+        maxSide: limitMaxSideInput.checked ? parseInt(maxSideInput.value) : -1, 
+        outputAs: imTypeSelect.value
         });
 }
 
@@ -100,13 +102,14 @@ async function decode_image() {
         type: 'decode',  
         buffer: inputBlob, 
         secret: secretInput.value, 
-        maxSide: limitMaxSideInput.checked ? parseInt(maxSideInput.value) : -1
+        maxSide: limitMaxSideInput.checked ? parseInt(maxSideInput.value) : -1, 
+        outputAs: imTypeSelect.value
         });
 }
 
 worker.onmessage = async (event) => {
     if (event.data.error) {
-        await showError(`Error decoding: ${event.data.error}`);
+        await showError(`Error: ${event.data.error}`);
         console.error(event.data.error);
         return;
     }
@@ -115,6 +118,15 @@ worker.onmessage = async (event) => {
 
 encodeButton.addEventListener('click', encode_image);
 decodeButton.addEventListener('click', decode_image);
+imTypeSelect.addEventListener('change', () => {
+    const warningDiv = document.getElementById('warning');
+    if (imTypeSelect.value === 'jpeg') {
+        warningDiv.style.display = 'block';
+    }
+    else {
+        warningDiv.style.display = 'none';
+    }
+});
 fileInput.addEventListener('change', ()=>{
     resetOutput();
     hintLabel.textContent += ' (Below is the selected image)';

app/style.css

@@ -50,7 +50,10 @@ div#output-container {
 }
 
 div#button-container {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
 }
 
 img {
@@ -61,4 +64,8 @@ img {
 div#error {
     color: red;
     font-weight: bold;
+}
+div#warning {
+    color: orange;
+    font-weight: bold;
 }

app/worker.js

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

src/lib.rs

@@ -65,7 +65,12 @@ fn img2vec(im: &[u8], limit_max_side: Option<u32>) -> (Vec<u8>, ImageOptions) {
     })
 }
 
-fn vec2pngblob(pixels: &Vec<u8>, im_opt: ImageOptions, limit_max_side: Option<u32>) -> Box<[u8]> {
+enum ImageType {
+    Png, 
+    Jpeg,
+}
+
+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);
@@ -93,20 +98,25 @@ fn vec2pngblob(pixels: &Vec<u8>, im_opt: ImageOptions, limit_max_side: Option<u3
 
     // Encode the image to PNG format
     let mut buf = Vec::new();
-    let encoder = image::codecs::png::PngEncoder::new(&mut buf);
-    encoder.write_image(
-        &img,
-        width,
-        height,
-        image::ExtendedColorType::Rgb8,
-    ).expect("Failed to encode image");
+    match im_type {
+        ImageType::Png => {
+            image::codecs::png::PngEncoder::new(&mut buf)
+                .write_image(&img, width, height, image::ExtendedColorType::Rgb8)
+                .expect("Failed to encode PNG image");
+        },
+        ImageType::Jpeg => {
+            image::codecs::jpeg::JpegEncoder::new_with_quality(&mut buf, 90)
+                .write_image(&img, width, height, image::ExtendedColorType::Rgb8)
+                .expect("Failed to encode JPEG image");
+        },
+    }
 
     console_log!("Export image, dimensions: {}x{}", width, height);
     buf.into_boxed_slice()
 }
 
 #[wasm_bindgen]
-pub fn encode(im: &[u8], secret: &str, max_side: i32) -> Box<[u8]> {
+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) };
 
@@ -116,11 +126,15 @@ pub fn encode(im: &[u8], secret: &str, max_side: i32) -> Box<[u8]> {
 
     let pixels = logistic_map::encode(&im_v, seed);
 
-    vec2pngblob(&pixels, im_opt, None)
+    vec2imblob(&pixels, im_opt, None, match as_type {
+        "png" => ImageType::Png,
+        "jpeg" => ImageType::Jpeg,
+        _ => panic!("Unsupported image type: {}", as_type),
+    })
 }
 
 #[wasm_bindgen]
-pub fn decode(im: &[u8], secret: &str, max_side: i32) -> Box<[u8]> {
+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) };
 
@@ -130,5 +144,9 @@ pub fn decode(im: &[u8], secret: &str, max_side: i32) -> Box<[u8]> {
 
     let pixels = logistic_map::decode(&im_v, seed);
 
-    vec2pngblob(&pixels, im_opt, max_side)
+    vec2imblob(&pixels, im_opt, max_side, match as_type {
+        "png" => ImageType::Png,
+        "jpeg" => ImageType::Jpeg,
+        _ => panic!("Unsupported image type: {}", as_type),
+    })
 }