wasm-image-processor 0.3.0 → 0.4.0

package/README.md

@@ -16,7 +16,7 @@ A high-performance image processing toolkit built with Rust and WebAssembly. Pro
 
 ## Demo
 
-Try the live demo at: [https://stanleymasinde.github.io/wasm-image-processor/](https://stanleymasinde.github.io/wasm-image-processor/)
+Try the live demo at: [https://wasm-ip-demo.vercel.app](https://wasm-ip-demo.vercel.app)
 
 - **Basic Resizer**: Resize images to custom dimensions
 - **PWA Icon Generator**: Generate complete icon sets for web apps
@@ -34,57 +34,38 @@ Try the live demo at: [https://stanleymasinde.github.io/wasm-image-processor/](h
 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

package/package.json

@@ -5,7 +5,7 @@
     "Stanley Masinde <hello@stanleymasinde.com>"
   ],
   "description": "High-performance client-side image processing toolkit powered by Rust and WebAssembly",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",