When Your Frontend Needs to Process Files, Not Just Upload Them: Diving into WebAssembly

import React, { useRef, useState, useEffect, useCallback } from 'react';

// Assuming this is generated by wasm-pack from our Rust project
// It provides the glue code to load and interact with the Wasm module
import init, { decode_heic_to_rgba } from './pkg/heic_decoder';

interface ImageResult {
  url: string;
  name: string;
  size: number;
}

function HeicConverter() {
  const [wasmReady, setWasmReady] = useState(false);
  const [processing, setProcessing] = useState(false);
  const [originalImage, setOriginalImage] = useState<File | null>(null);
  const [convertedImage, setConvertedImage] = useState<ImageResult | null>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    // Initialize the WebAssembly module once when the component mounts
    init().then(() => {
      setWasmReady(true);
      console.log('WebAssembly module loaded successfully.');
    }).catch(console.error);
  }, []);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setOriginalImage(file);
      setConvertedImage(null); // Clear previous conversion
    }
  };

  const convertHeicToJpeg = useCallback(async () => {
    if (!wasmReady || !originalImage || processing) {
      console.warn("Wasm not ready, no file, or already processing.");
      return;
    }

    setProcessing(true);
    setConvertedImage(null);

    try {
      const arrayBuffer = await originalImage.arrayBuffer();
      const heicBytes = new Uint8Array(arrayBuffer);

      console.log(`Decoding HEIC image (${heicBytes.length} bytes)...`);
      // Call the Wasm function directly
      const decodedData = decode_heic_to_rgba(heicBytes);

      if (!decodedData) {
        throw new Error('Failed to decode HEIC image via Wasm.');
      }

      const { rgba_ptr, width, height, data_len } = decodedData;

      // Create a Uint8ClampedArray from the Wasm memory for ImageData
      // Note: This often requires careful memory management, especially freeing it later.
      // wasm-bindgen can help with managing this automatically for simple cases.
      const rgbaArray = new Uint8ClampedArray(
        // Access Wasm's linear memory directly
        window.wasm_memory.buffer, // wasm_memory is often exposed globally by wasm-pack's glue code
        rgba_ptr, // Pointer to the start of our data in Wasm memory
        data_len // Length of the data
      );

      console.log(`Decoded to RGBA: ${width}x${height}, ${data_len} bytes.`);

      const canvas = canvasRef.current;
      if (canvas) {
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        if (ctx) {
          const imageData = new ImageData(rgbaArray, width, height);
          ctx.putImageData(imageData, 0, 0);

          // Convert canvas content to JPEG data URL
          const jpegUrl = canvas.toDataURL('image/jpeg', 0.9); // 0.9 quality
          const jpegBlob = await (await fetch(jpegUrl)).blob();

          setConvertedImage({
            url: jpegUrl,
            name: originalImage.name.replace(/\.[^/.]+$/, ".jpeg"), // Rename file
            size: jpegBlob.size,
          });
        }
      }
    } catch (error) {
      console.error('Error during HEIC to JPEG conversion:', error);
      alert('Failed to convert image. Check console for details.');
    } finally {
      setProcessing(false);
    }
  }, [wasmReady, originalImage, processing]);

  return (
    <div style={{ maxWidth: '800px', margin: 'auto', padding: '20px', fontFamily: 'sans-serif' }}>
      <h2>HEIC to JPEG Converter (Client-Side)</h2>
      <p>This tool converts HEIC images to JPEG entirely in your browser using WebAssembly. Your files never leave your device.</p>

      {!wasmReady && <p>Loading WebAssembly module...</p>}

      <div>
        <input 
          type="file" 
          accept=".heic,.heif" 
          onChange={handleFileChange} 
          disabled={!wasmReady || processing} 
        />
        <button onClick={convertHeicToJpeg} disabled={!wasmReady || !originalImage || processing}>
          {processing ? 'Converting...' : 'Convert to JPEG'}
        </button>
      </div>

      {originalImage && (
        <div style={{ marginTop: '20px' }}>
          <h3>Original File:</h3>
          <p>Name: {originalImage.name}</p>
          <p>Size: {(originalImage.size / 1024 / 1024).toFixed(2)} MB</p>
          <img 
            src={URL.createObjectURL(originalImage)} 
            alt="Original HEIC preview (might not render natively)" 
            style={{ maxWidth: '100%', maxHeight: '300px', border: '1px solid #eee' }}
          />
          <p style={{ fontStyle: 'italic' }}>Note: Your browser might not display HEIC files directly. This is a placeholder.</p>
        </div>
      )}

      {convertedImage && (
        <div style={{ marginTop: '30px' }}>
          <h3>Converted JPEG:</h3>
          <p>Name: {convertedImage.name}</p>
          <p>Size: {(convertedImage.size / 1024).toFixed(2)} KB</p>
          <img 
            src={convertedImage.url} 
            alt="Converted JPEG" 
            style={{ maxWidth: '100%', maxHeight: '300px', border: '1px solid #eee' }}
          />
          <div>
            <a 
              href={convertedImage.url} 
              download={convertedImage.name} 
              style={{ display: 'inline-block', marginTop: '10px', padding: '8px 15px', backgroundColor: '#007bff', color: 'white', textDecoration: 'none', borderRadius: '4px' }}
            >
              Download JPEG
            </a>
          </div>
        </div>
      )}

      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
    </div>
  );
}

export default HeicConverter;

use wasm_bindgen::prelude::*;
use std::io::Cursor;

// Import `web_sys` for console logging, useful for debugging Wasm
#[wasm_bindgen(js_namespace = console)]
extern "C" {
    fn log(s: &str);
}

// Define a struct to hold the decoded image data and dimensions
#[wasm_bindgen]
pub struct DecodedImage {
    rgba_ptr: *const u8,
    width: u32,
    height: u32,
    data_len: usize,
}

// Implement Drop to ensure memory is freed when DecodedImage is dropped in JS
impl Drop for DecodedImage {
    fn drop(&mut self) {
        // In a real scenario, you'd free the memory here. 
        // wasm-bindgen often handles simple return values automatically,
        // but for raw pointers, manual management might be needed.
        // For simplicity in this example, we'll assume wasm-bindgen handles the buffer allocation/deallocation.
        // If not, one might need to use Vec::from_raw_parts and drop it.
    }
}

#[wasm_bindgen]
pub fn decode_heic_to_rgba(heic_bytes: &[u8]) -> Result<DecodedImage, JsValue> {
    log("Rust: Starting HEIC decode...");
    // In a real implementation, you'd use a crate like `libheif-rs` or `heic2rgb`
    // For this example, we'll simulate a decode and return some dummy data.
    // A real implementation would parse `heic_bytes` and generate `rgba_data`

    // Placeholder for actual HEIC decoding logic
    // This part would parse heic_bytes using a specialized library
    // and produce a raw RGBA buffer.
    // let heif_context = libheif::HeifContext::read_from_bytes(heic_bytes)
    //    .map_err(|e| JsValue::from_str(&format!("Failed to read HEIC context: {}", e)))?;
    // let image_handle = heif_context.primary_image_handle()
    //    .map_err(|e| JsValue::from_str(&format!("Failed to get primary image handle: {}", e)))?;
    // let image = image_handle.decode(libheif::ColorSpace::Rgb,
    //                                 libheif::Chroma::Chroma444,
    //                                 None)
    //    .map_err(|e| JsValue::from_str(&format!("Failed to decode image: {}", e)))?;

    // Simulate a 100x100 image for demonstration
    let width = 100u32;
    let height = 100u32;
    let mut rgba_data = Vec::with_capacity((width * height * 4) as usize);
    for y in 0..height {
        for x in 0..width {
            rgba_data.push((x % 255) as u8); // Red
            rgba_data.push((y % 255) as u8); // Green
            rgba_data.push(0);              // Blue
            rgba_data.push(255);            // Alpha
        }
    }

    let data_len = rgba_data.len();
    let rgba_ptr = rgba_data.as_mut_ptr();

    // Prevent Rust from dropping the Vec and freeing the memory
    // The JS side is now responsible for this memory, or it needs to be copied.
    // `wasm-bindgen` handles this for `Vec<u8>` returns usually by copying.
    // If returning a raw pointer, you need to manage memory carefully.
    std::mem::forget(rgba_data);

    log(&format!("Rust: Decoded {}x{} image.", width, height));

    Ok(DecodedImage {
        rgba_ptr: rgba_ptr,
        width,
        height,
        data_len,
    })
}

// For `wasm-bindgen`, it's often better to just return `Vec<u8>` directly
// as it handles the memory copying and freeing automatically.
// The `DecodedImage` struct with raw pointers is more for advanced scenarios 
// where you explicitly want to avoid copies and manage shared memory.
// A more typical wasm-bindgen approach:
// #[wasm_bindgen]
// pub fn decode_heic_to_rgba_vec(heic_bytes: &[u8]) -> Result<Box<[u8]>, JsValue> {
//    // ... actual decoding ...
//    // let rgba_data: Vec<u8> = ...;
//    // Ok(rgba_data.into_boxed_slice())
// }