wasm-image-processor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Stanley Masinde
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,195 @@
+# WASM Image Processor
+> Process images offline in the Browser.
+
+**⚠️ Early Development Notice**: This project is in active development. APIs may change and there is no npm package available yet. Use at your own risk for production applications.
+
+A high-performance image processing toolkit built with Rust and WebAssembly. Process images entirely client-side with no server uploads required.
+
+## Features
+
+- **Offline Processing**: All image operations happen in your browser
+- **High Performance**: Powered by Rust and WebAssembly
+- **No Data Transfer**: Images never leave your device
+- **PWA Icon Generation**: Create complete icon sets for Progressive Web Apps
+- **Multiple Formats**: Support for JPEG, PNG, WebP, and more
+- **Batch Processing**: Generate multiple sizes from a single image
+
+## Demo
+
+Try the live demo at: [https://stanleymasinde.github.io/wasm-image-processor/](https://stanleymasinde.github.io/wasm-image-processor/)
+
+- **Basic Resizer**: Resize images to custom dimensions
+- **PWA Icon Generator**: Generate complete icon sets for web apps
+
+## Current Features
+
+### Image Resizing
+- Resize images to any dimensions up to 5000x5000 pixels
+- Maintain aspect ratio or force specific dimensions
+- High-quality filtering algorithms
+
+
+## Installation
+
+**Note**: No npm package is available yet. You need to build from source.
+
+### Prerequisites
+
+- [Rust](https://rustup.rs/)
+- [wasm-pack](https://rustwasm.github.io/wasm-pack/)
+
+### Building
+
+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
+```
+
+3. Copy files to demo directory:
+```bash
+# Copy JS and WASM files to demo folder
+./prep-demo.sh
+```
+
+4. Serve the demo locally:
+```bash
+# Using Node.js
+npx serve .
+
+# Or any other static file server
+```
+
+5. Open `http://localhost:3000/demo` in your browser
+
+### Usage
+
+Include the WASM module in your web page:
+
+```html
+<script type="module">
+  import init, { resize_square } from "./pwa_image_generator.js";
+
+  init().then(() => {
+    // WASM module is ready
+    const imageData = new Uint8Array(/* your image data */);
+    const resizedBytes = resize_image(Array.from(imageData), 500);
+
+    // Use resizedBytes as needed
+  });
+</script>
+```
+
+### API Reference
+
+#### `resize_image(image_data: Vec<u8>, side: u32) -> Vec<u8>`
+
+Resizes an image to a square with the specified side length.
+
+**Parameters:**
+- `image_data`: Image data as a byte array
+- `side`: Target width/height in pixels (1-5000)
+
+**Returns:**
+- PNG-encoded image data as byte array
+
+**Example:**
+```javascript
+const resizedBytes = resize_image(imageBytes, 256);
+const blob = new Blob([new Uint8Array(resizedBytes)], { type: 'image/png' });
+```
+
+## Project Structure
+
+```
+wasm-image-processor/
+├── src/
+│   └─- lib.rs              # Main Rust library
+├── demo/
+│   ├── index.html          # Basic resizer demo
+│   ├── pwa-generator.html  # PWA icon generator
+│   ├── pwa_image_generator.js    # Generated JS bindings
+│   └── pwa_image_generator_bg.wasm  # Generated WASM binary
+├── pkg/                    # wasm-pack output
+├── tests/                  # Test files
+├── copy_pkg.sh            # Build script
+├── Cargo.toml
+└── README.md
+```
+
+## Development
+
+### Running Tests
+
+```bash
+# Run Rust tests
+cargo test
+
+# Test with sample images
+cargo test test_resize_logic --lib
+```
+
+### Adding New Features
+
+The codebase is structured to easily add new image processing functions:
+
+1. Add your function to `src/lib.rs`
+2. Mark it with `#[wasm_bindgen]`
+3. Rebuild with `wasm-pack build --target web`
+4. Update the demo pages to use your new function
+
+## Roadmap
+
+**Near Term:**
+- [ ] Stable API design
+- [ ] npm package publication
+- [ ] Comprehensive documentation
+- [ ] CI/CD pipeline
+
+**Future Features:**
+- [ ] Image format conversion (PNG ↔ JPEG ↔ WebP)
+- [ ] Image compression with quality settings
+- [ ] Batch processing for multiple images
+- [ ] Image filters (blur, sharpen, brightness, contrast)
+- [ ] Custom crop functionality
+- [ ] Image rotation and flipping
+- [ ] Metadata preservation and editing
+- [ ] Advanced resizing algorithms
+
+## Browser Support
+
+- Chrome/Edge 57+
+- Firefox 52+
+- Safari 11+
+- Any browser with WebAssembly support
+
+## Performance
+
+Processing is done entirely client-side using WebAssembly, providing:
+- **Fast processing**: Near-native performance
+- **Privacy**: Images never leave your device
+- **Offline capability**: Works without internet connection
+- **Scalability**: No server resources required
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Built with [Rust](https://www.rust-lang.org/) and [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/)
+- Image processing powered by the [image](https://github.com/image-rs/image) crate
+- Inspired by the need for client-side image processing tools

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "wasm-image-processor",
+  "type": "module",
+  "collaborators": [
+    "Stanley Masinde <hello@stanleymasinde.com>"
+  ],
+  "description": "High-performance client-side image processing toolkit powered by Rust and WebAssembly",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/StanleyMasinde/wasm-image-processor"
+  },
+  "files": [
+    "wasm_image_processor_bg.wasm",
+    "wasm_image_processor.js",
+    "wasm_image_processor_bg.js",
+    "wasm_image_processor.d.ts"
+  ],
+  "main": "wasm_image_processor.js",
+  "homepage": "https://github.com/StanleyMasinde/wasm-image-processor",
+  "types": "wasm_image_processor.d.ts",
+  "sideEffects": [
+    "./wasm_image_processor.js",
+    "./snippets/*"
+  ],
+  "keywords": [
+    "wasm",
+    "image",
+    "processing",
+    "resize",
+    "pwa"
+  ]
+}

package/wasm_image_processor.d.ts

@@ -0,0 +1,11 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Resize an image by the given dimension.
+ * The first parameter is an array of bytes.
+ * The second parameter is the size of the sides.
+ * This function returns square images. It does not respect the aspect
+ * Ratio of the photo.
+ * It is is ideal for icon resizing.
+ */
+export function resize_square(image_data: Uint8Array, side: number): Uint8Array;

package/wasm_image_processor.js

@@ -0,0 +1,5 @@
+import * as wasm from "./wasm_image_processor_bg.wasm";
+export * from "./wasm_image_processor_bg.js";
+import { __wbg_set_wasm } from "./wasm_image_processor_bg.js";
+__wbg_set_wasm(wasm);
+wasm.__wbindgen_start();

package/wasm_image_processor_bg.js

@@ -0,0 +1,59 @@
+let wasm;
+export function __wbg_set_wasm(val) {
+    wasm = val;
+}
+
+
+let cachedUint8ArrayMemory0 = null;
+
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+/**
+ * Resize an image by the given dimension.
+ * The first parameter is an array of bytes.
+ * The second parameter is the size of the sides.
+ * This function returns square images. It does not respect the aspect
+ * Ratio of the photo.
+ * It is is ideal for icon resizing.
+ * @param {Uint8Array} image_data
+ * @param {number} side
+ * @returns {Uint8Array}
+ */
+export function resize_square(image_data, side) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.resize_square(ptr0, len0, side);
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
+
+export function __wbindgen_init_externref_table() {
+    const table = wasm.__wbindgen_export_0;
+    const offset = table.grow(4);
+    table.set(0, undefined);
+    table.set(offset + 0, undefined);
+    table.set(offset + 1, null);
+    table.set(offset + 2, true);
+    table.set(offset + 3, false);
+    ;
+};
+