communicate with web assembly

Author: HHMagnus

index.html

@@ -92,7 +92,15 @@ <h1>Offline Image Converter</h1>
 
     <input type="file" id="fileInput" accept="image/*" />
 
-    <button id="convertBtn" onclick="convert"></button>
+    <select id="outputType">
+      <option value="png">PNG</option>
+      <option value="jpeg">JPEG</option>
+      <option value="image/webp">WEBP</option>
+      <option value="image/bmp">BMP</option>
+      <option value="image/tiff">TIFF</option>
+    </select>
+
+    <button id="convertBtn" onclick="convert()">Convert</button>
 
     <div id="loader" style="display: none;">
       <span class="loader"></span>
@@ -153,7 +161,7 @@ <h1>Offline Image Converter</h1>
 
       let workerReady = false;
       worker.onmessage = (event) => {
-        const { type, pdf, message, fileName} = event.data;
+        const { type, imageData, message, fileName, outputType} = event.data;
         if (type === "ready") {
           workerReady = true;
           return;
@@ -165,13 +173,45 @@ <h1>Offline Image Converter</h1>
         }
 
         if (type === "done") {
-          downloadPdf(pdf, fileName);
+          downloadPdf(imageData, fileName, outputType);
         } else if (type === "error") {
           showError(message);
         }
         hideLoader();
       };
 
+      const fileInput = document.getElementById('fileInput');
+      const outputTypeElement = document.getElementById("outputType");
+      async function convert() {
+        const file = fileInput.files[0];
+        if (!file) {
+          showError("Select a file before continueing.");
+          return;
+        }
+
+        if (!workerReady) {
+          showError("Worker is not ready yet, please wait a moment and try again.");
+          return;
+        }
+
+        const outputType = outputTypeElement.value;
+        if (!outputType) {
+          showError("Select an output type before continueing.");
+          return;
+        }
+
+        showLoader();
+        hideError();
+
+        // TODO remove dot from filename if present
+        const fileName = file.name;
+        const inputType = "png";
+        const imageData = await file.arrayBuffer();
+
+        worker.postMessage({ imageData, fileName, inputType, outputType });
+      }
+      window.convert = convert;
+
     </script>
   </body>
 </html>

src/lib.rs

@@ -8,29 +8,34 @@ fn map_image_err(err: ImageError) -> String {
     format!("Image processing error: {}", err)
 }
 
-fn convert(image_data: Vec<u8>, output: ImageFormat) -> Result<Vec<u8>, String> {
+fn convert(image_data: Vec<u8>, input: ImageFormat, output: ImageFormat) -> Result<Vec<u8>, String> {
 	report_progress("Loading image...");
-    let img = image::load_from_memory(&image_data).map_err(map_image_err)?;
+    let img = image::load_from_memory_with_format(&image_data, input).map_err(map_image_err)?;
     let mut output_data: Vec<u8> = Vec::new();
 	report_progress("Converting to new format...");
     img.write_to(&mut Cursor::new(&mut output_data), output).map_err(map_image_err)?;
 	report_progress("Completed conversion.");
     Ok(output_data)
 }
 
+fn str_to_type(s: &str) -> Option<ImageFormat> {
+	match s.to_lowercase().as_str() {
+		"png" => Some(ImageFormat::Png),
+		"jpeg" | "jpg" => Some(ImageFormat::Jpeg),
+		"gif" => Some(ImageFormat::Gif),
+		"bmp" => Some(ImageFormat::Bmp),
+		"ico" => Some(ImageFormat::Ico),
+		"tiff" => Some(ImageFormat::Tiff),
+		"webp" => Some(ImageFormat::WebP),
+		_ => None,
+	}
+}
+
 #[wasm_bindgen]
-pub fn convert_exposed(image_data: Vec<u8>, output: String) -> Result<Vec<u8>, String> {
-    let output = match output.to_lowercase().as_str() {
-        "png" => ImageFormat::Png,
-        "jpeg" | "jpg" => ImageFormat::Jpeg,
-        "gif" => ImageFormat::Gif,
-        "bmp" => ImageFormat::Bmp,
-        "ico" => ImageFormat::Ico,
-        "tiff" => ImageFormat::Tiff,
-        "webp" => ImageFormat::WebP,
-        _ => return Err("Unsupported output format".to_string()),
-    } ;
-    convert(image_data, output)
+pub fn convert_exposed(image_data: Vec<u8>, input: String, output: String) -> Result<Vec<u8>, String> {
+    let input = str_to_type(&input).ok_or_else(|| format!("Unsupported input format: {}", input))?;
+    let output = str_to_type(&output).ok_or_else(|| format!("Unsupported output format: {}", output))?;
+    convert(image_data, input, output)
 }
 
 fn report_progress(message: &str) {

worker.js

@@ -16,12 +16,12 @@ onmessage = async (event) => {
     return;
   }
 
-  const { imageData, fileName, outputType } = event.data;
+  const { imageData, fileName, inputType, outputType } = event.data;
 
   try {
-    const convertedImage = convert_exposed(imageData, outputType);
+    const convertedImage = convert_exposed(imageData, inputType, outputType);
 
-    postMessage({ type: "done", imageData: convertedImage, fileName }, [mergedPdf.buffer]);
+    postMessage({ type: "done", imageData: convertedImage, fileName, outputType }, [mergedPdf.buffer]);
   } catch (err) {
     if (err instanceof WebAssembly.RuntimeError) {
       postMessage({ type: "error", message: "Unexpected WASM exception: " + err.message });