Merge pull request #7 from StanleyMasinde/dev

V0.4.0

Author: StanleyMasinde

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "wasm-image-processor"
-version = "0.3.0"
+version = "0.4.0"
 edition = "2021"
 authors = ["Stanley Masinde <[email protected]>"]
 description = "High-performance client-side image processing toolkit powered by Rust and WebAssembly"

README.md

@@ -34,57 +34,38 @@ Try the live demo at: [https://wasm-ip-demo.vercel.app](https://wasm-ip-demo.ver
 npm i wasm-image-processor
 ```
 
-## Building
-
-### Prerequisites
-
-- [Rust](https://rustup.rs/)
-- [wasm-pack](https://rustwasm.github.io/wasm-pack/)
-
-### Steps
-1. Clone the repository:
-```bash
-git clone https://github.com/yourusername/wasm-image-processor.git
-cd wasm-image-processor
-```
-
-2. Build the WASM package:
-```bash
-wasm-pack build --target web
-```
+### Usage
 
-3. Copy files to demo directory:
-```bash
-# Copy JS and WASM files to demo folder
-./prep-demo.sh
-```
+Include the WASM module in your web page:
 
-4. Serve the demo locally:
-```bash
-# Using Node.js
-npx serve .
+```javascript
+import { resize_square } from "wasm-image-processor";
 
-# Or any other static file server
-```
+// Example: resize an image uploaded via <input type="file">
+const fileInput = document.querySelector<HTMLInputElement>("#fileInput")!;
 
-5. Open `http://localhost:3000/demo` in your browser
+fileInput.addEventListener("change", () => {
+  const file = fileInput.files?.[0]
+  if (!file) return
 
-### Usage
+  const reader = new FileReader()
+  reader.onload = () => {
+    const arrayBuffer = reader.result as ArrayBuffer
+    const uint8Array = new Uint8Array(arrayBuffer)
 
-Include the WASM module in your web page:
+    // Resize to 512x512
+    const resizedBytes = resize_square(uint8Array, 512)
 
-```html
-<script type="module">
-  import init, { resize_square } from "pwa_image_generator";
+    // Create a new File from the resized bytes
+    const resizedImage = new File([resizedBytes], "resized.png", {
+      type: "image/png",
+    })
 
-  init().then(() => {
-    // WASM module is ready
-    const imageData = new Uint8Array(/* your image data */);
-    const resizedBytes = resize_square(Array.from(imageData), 500);
+    console.log("Resized image:", resizedImage)
+  }
 
-    // Use resizedBytes as needed
-  });
-</script>
+  reader.readAsArrayBuffer(file)
+})
 ```
 
 ### API Reference