wasm-image-processor 0.4.0 → 0.6.0

package/README.md

@@ -1,175 +1,267 @@
 # WASM Image Processor
-> Process images offline in the Browser.
 
-**⚠️ Early Development Notice**: This project is in active development. APIs may change. Use at your own risk for production applications.
+> High-performance client-side image processing powered by Rust and WebAssembly
 
-A high-performance image processing toolkit built with Rust and WebAssembly. Process images entirely client-side with no server uploads required.
+Process images entirely in the browser with near-native performance. No server uploads, works offline, respects user privacy.
 
-## Features
+**[Live Demo](https://wasm-ip-demo.vercel.app)** | **[Full Documentation](https://wip-docs.vercel.app)** | **[npm Package](https://www.npmjs.com/package/wasm-image-processor)**
 
-- **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
+## Quick Start
 
-Try the live demo at: [https://wasm-ip-demo.vercel.app](https://wasm-ip-demo.vercel.app)
+### For JavaScript Users
 
-- **Basic Resizer**: Resize images to custom dimensions
-- **PWA Icon Generator**: Generate complete icon sets for web apps
+```bash
+npm install wasm-image-processor
+```
+
+**Vite users:** Install `vite-plugin-wasm` and add it to your config (see [setup guide](https://wip-docs.vercel.app/getting-started.html#vite-configuration))
 
-## Current Features
+```javascript
+import { resize_square, blur, grayscale } from "wasm-image-processor";
 
-### Image Resizing
-- Resize images to any dimensions up to 5000x5000 pixels
-- Maintain aspect ratio or force specific dimensions
-- High-quality filtering algorithms
+// Resize an image to 512x512
+const resizedBytes = resize_square(imageUint8Array, 512);
 
+// Apply Gaussian blur
+const blurredBytes = blur(imageUint8Array, 5.0);
 
-## Installation
-```shell
-npm i wasm-image-processor
+// Convert to grayscale
+const grayBytes = grayscale(imageUint8Array);
 ```
 
-### Usage
+**Key features:**
+- Auto-initializes WASM (no manual setup)
+- ~150KB gzipped bundle size
+- TypeScript types included
+- Supports PNG and JPEG formats
+- See [complete documentation](https://wip-docs.vercel.app) for all functions
 
-Include the WASM module in your web page:
+---
 
-```javascript
-import { resize_square } from "wasm-image-processor";
+### For Rust Contributors
 
-// Example: resize an image uploaded via <input type="file">
-const fileInput = document.querySelector<HTMLInputElement>("#fileInput")!;
+**Project structure:**
+```
+src/
+  lib.rs          # WASM bindings & public API
+  processing/     # Core image processing logic
+  utils/          # Helpers
+Cargo.toml
+```
 
-fileInput.addEventListener("change", () => {
-  const file = fileInput.files?.[0]
-  if (!file) return
+**Local development:**
+```bash
+# Build for web
+wasm-pack build --target web --out-dir pkg
 
-  const reader = new FileReader()
-  reader.onload = () => {
-    const arrayBuffer = reader.result as ArrayBuffer
-    const uint8Array = new Uint8Array(arrayBuffer)
+# Run tests
+cargo test
+wasm-pack test --headless --firefox
 
-    // Resize to 512x512
-    const resizedBytes = resize_square(uint8Array, 512)
+# Test in browser
+cd example && npm install && npm run dev
+```
 
-    // Create a new File from the resized bytes
-    const resizedImage = new File([resizedBytes], "resized.png", {
-      type: "image/png",
-    })
+**Key dependencies:**
+- `image = "0.24"` for core processing
+- `wasm-bindgen = "0.2"` for JS interop
+- Safe Rust only, panic-safe for WASM context
 
-    console.log("Resized image:", resizedImage)
-  }
+**Contributing:** Fork the repo, create a feature branch, and open a PR. See [documentation repo](https://github.com/StanleyWorks/wasm-image-processor-docs) for docs contributions.
 
-  reader.readAsArrayBuffer(file)
-})
-```
+---
 
-### API Reference
+## Available Functions
 
-#### `resize_square(image_data: Vec<u8>, side: u32) -> Vec<u8>`
+**Core Operations:**
+- `resize_square(bytes, size)` - Resize to square dimensions
+- `resize(bytes, width, height)` - Resize to custom dimensions
+- `crop(bytes, x, y, width, height)` - Crop to region
+- `thumbnail(bytes, width, height)` - Generate thumbnail
 
-Resizes an image to a square with the specified side length.
+**Filters & Adjustments:**
+- `blur(bytes, sigma)` - Gaussian blur
+- `fast_blur(bytes, sigma)` - Optimized blur
+- `contrast(bytes, value)` - Adjust contrast (-100 to 100)
+- `brighten(bytes, value)` - Adjust brightness (-100 to 100)
+- `grayscale(bytes)` - Convert to grayscale
+- `invert(bytes)` - Invert colors
+- `hue_rotate(bytes, degrees)` - Rotate hue (0-360)
 
-**Parameters:**
-- `image_data`: Image data as a byte array
-- `side`: Target width/height in pixels (1-5000)
+**Coming Soon:**
+- `rotate(bytes, degrees)` - Rotate image
 
-**Returns:**
-- PNG-encoded image data as byte array
+See [full API documentation](https://wip-docs.vercel.app/api.html) with live examples for each function.
 
-**Example:**
-```javascript
-const resizedBytes = resize_square(imageBytes, 256);
-const blob = new Blob([new Uint8Array(resizedBytes)], { type: 'image/png' });
-```
+---
 
-## Project Structure
+## Why Use This?
 
-```
-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
-├── prep-demo.sh            # Copy the build to the demo folder
-├── Cargo.toml
-└── README.md
-```
+**For end users:**
+- Privacy: Images never leave your device
+- Speed: Process images in milliseconds
+- Offline: Works without internet connection
+- Universal: Runs in any modern browser
 
-## Development
+**For developers:**
+- Rust performance in JavaScript
+- Simple, predictable API
+- Tree-shakeable ES modules
+- No server infrastructure needed
 
-### Running Tests
+---
 
-```bash
-# Run Rust tests
-cargo test
-```
+## Use Cases
+
+**Profile picture editors:**
+Generate multiple sizes for avatars without server round-trips. Resize to 32px, 64px, 128px, 256px instantly in the browser.
+
+**Photo galleries & portfolios:**
+Create thumbnails client-side before upload. Apply filters for preview without processing server load.
+
+**PWA & offline apps:**
+Process images when users have no internet connection. Perfect for field work apps, travel journals, or offline-first tools.
 
-### Adding New Features
+**Privacy-sensitive applications:**
+Medical imaging viewers, legal document processors, or any app where images contain sensitive data that shouldn't touch external servers.
 
-The codebase is structured to easily add new image processing functions:
+**Image compression tools:**
+Build "TinyPNG alternatives" that run entirely in the browser. Users maintain full control of their files.
 
-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
+**Batch processing utilities:**
+Resize hundreds of product photos, apply watermarks, or normalize images for e-commerce without server costs or upload time.
 
-## Roadmap
+**Design tools & editors:**
+Add real-time image adjustments (brightness, contrast, blur) to your web app without heavy JavaScript libraries.
 
-**Near Term:**
-- [ ] Stable API design
-- [x] npm package publication
-- [ ] Comprehensive documentation
-- [x] CI/CD pipeline
+**Form enhancements:**
+Automatically resize large images before form submission to reduce upload size and improve UX.
 
-**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
+- Any browser with [WebAssembly support](https://caniuse.com/wasm)
+
+---
+
+## Complete Example
+
+```html
+<input type="file" id="fileInput" />
+<button id="downloadBtn" style="display: none;">Download Processed Image</button>
+
+<script type="module">
+  import { resize_square, blur } from "wasm-image-processor";
+
+  const input = document.getElementById("fileInput");
+  const downloadBtn = document.getElementById("downloadBtn");
+
+  input.addEventListener("change", async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    try {
+      // Read file
+      const arrayBuffer = await file.arrayBuffer();
+      const uint8Array = new Uint8Array(arrayBuffer);
+
+      // Process: resize and blur
+      const resized = resize_square(uint8Array, 512);
+      const processed = blur(resized, 2.0);
+
+      // Create downloadable blob
+      const blob = new Blob([processed], { type: "image/png" });
+      const url = URL.createObjectURL(blob);
+
+      // Setup download
+      downloadBtn.style.display = "block";
+      downloadBtn.onclick = () => {
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "processed-image.png";
+        a.click();
+        URL.revokeObjectURL(url);
+      };
+    } catch (error) {
+      console.error("Processing failed:", error);
+    }
+  });
+</script>
+```
+
+See [more examples](https://wip-docs.vercel.app/examples.html) including Vue, Nuxt, and React patterns.
+
+---
 
 ## 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
+Processing happens entirely client-side using WebAssembly, providing:
+- Fast processing with near-native performance
+- Complete privacy - images never uploaded
+- Offline capability
+- Zero server costs
+
+**Typical operations:**
+- Resize 4K image: ~45ms
+- Apply blur filter: ~30ms
+- Grayscale conversion: ~10ms
+
+Performance varies by device and image size.
+
+---
+
+## Documentation
+
+- [Getting Started Guide](https://wip-docs.vercel.app/getting-started.html)
+- [Complete API Reference](https://wip-docs.vercel.app/api.html)
+- [Live Examples](https://wip-docs.vercel.app/examples.html)
+- [Changelog](https://wip-docs.vercel.app/changelog.html)
+
+---
+
+## Common Issues
+
+**Import errors:** Ensure your bundler supports WebAssembly. Vite users need `vite-plugin-wasm` installed and configured.
+
+**"Failed to read image":** Only PNG and JPEG formats are currently supported.
+
+**Memory issues:** Large images may cause problems on mobile devices. Consider resizing or adding file size limits.
+
+See [troubleshooting guide](https://wip-docs.vercel.app/getting-started.html#troubleshooting) for more help.
+
+---
 
 ## Contributing
 
+Contributions welcome! To contribute:
+
 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`)
+2. Create a feature branch: `git checkout -b feature/amazing-feature`
+3. Commit your changes: `git commit -m 'Add amazing feature'`
+4. Push to branch: `git push origin feature/amazing-feature`
 5. Open a Pull Request
 
+For documentation improvements, contribute to the [docs repository](https://github.com/StanleyWorks/wasm-image-processor-docs).
+
+---
+
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+MIT License - see [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
+Built with:
+- [Rust](https://www.rust-lang.org/) and [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/)
+- [image-rs](https://github.com/image-rs/image) crate for image processing
+- Inspired by the need for privacy-respecting browser-based tools
+
+**Questions?** Open an [issue](../../issues) or check the [documentation](https://wip-docs.vercel.app).

package/package.json

@@ -1,11 +1,10 @@
 {
   "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.4.0",
+  "version": "0.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,7 +16,7 @@
     "wasm_image_processor_bg.js",
     "wasm_image_processor.d.ts"
   ],
-  "main": "wasm_image_processor.js",
+  "module": "wasm_image_processor.js",
   "homepage": "https://github.com/StanleyMasinde/wasm-image-processor",
   "types": "wasm_image_processor.d.ts",
   "sideEffects": [

package/wasm_image_processor.d.ts

@@ -1,5 +1,144 @@
 /* tslint:disable */
 /* eslint-disable */
+
+/**
+ * Builder-style image processor for JS/Wasm usage.
+ *
+ * ```javascript
+ * // Browser usage (after wasm-bindgen or bundler setup)
+ * // const { ImageProcessor } = await init();
+ * const input = document.querySelector("#file");
+ * const outputImg = document.querySelector("#output");
+ *
+ * input.addEventListener("change", async (event) => {
+ *   const file = event.target.files[0];
+ *   if (!file) return;
+ *
+ *   const inputBytes = new Uint8Array(await file.arrayBuffer());
+ *   const outputBytes = new ImageProcessor(inputBytes)
+ *     .resize(512, 512)
+ *     .grayscale()
+ *     .contrast(25.0)
+ *     .process();
+ *
+ *   const blob = new Blob([outputBytes], { type: file.type });
+ *   outputImg.src = URL.createObjectURL(blob);
+ * });
+ * ```
+ *
+ * ```javascript
+ * // Canvas usage (after wasm-bindgen or bundler setup)
+ * // const { ImageProcessor } = await init();
+ * const input = document.querySelector("#file");
+ * const canvas = document.querySelector("#canvas");
+ * const ctx = canvas.getContext("2d");
+ *
+ * input.addEventListener("change", async (event) => {
+ *   const file = event.target.files[0];
+ *   if (!file) return;
+ *
+ *   const inputBytes = new Uint8Array(await file.arrayBuffer());
+ *   const outputBytes = new ImageProcessor(inputBytes)
+ *     .resize(512, 512)
+ *     .blur(2.0)
+ *     .process();
+ *
+ *   const blob = new Blob([outputBytes], { type: file.type });
+ *   const bitmap = await createImageBitmap(blob);
+ *   canvas.width = bitmap.width;
+ *   canvas.height = bitmap.height;
+ *   ctx.clearRect(0, 0, canvas.width, canvas.height);
+ *   ctx.drawImage(bitmap, 0, 0);
+ * });
+ * ```
+ */
+export class ImageProcessor {
+    private constructor();
+    free(): void;
+    [Symbol.dispose](): void;
+    blur(sigma: number): ImageProcessor;
+    brighten(value: number): ImageProcessor;
+    contrast(value: number): ImageProcessor;
+    crop(x: number, y: number, width: number, height: number): ImageProcessor;
+    fast_blur(sigma: number): ImageProcessor;
+    grayscale(): ImageProcessor;
+    hue_rotate(degrees: number): ImageProcessor;
+    invert(): ImageProcessor;
+    /**
+     * Create a new processor from raw image bytes.
+     */
+    static new(image: Uint8Array): ImageProcessor;
+    /**
+     * Calling this returns the final image bytes.
+     */
+    process(): Uint8Array;
+    resize(width: number, height: number): ImageProcessor;
+    resize_square(side: number): ImageProcessor;
+    thumbnail(width: number, height: number): ImageProcessor;
+}
+
+/**
+ * Performs a Gaussian blur on this image.
+ * `sigma` is a measure of how much to blur by.
+ * Use a value of less than 5
+ */
+export function blur(image_data: Uint8Array, sigma: number): Uint8Array;
+
+/**
+ * Brighten image
+ * The value is -100 to 100
+ */
+export function brighten(image_data: Uint8Array, value: number): Uint8Array;
+
+/**
+ * Adjust the contrast of this image.
+ * `contrast` is the amount to adjust the contrast by.
+ * Negative values decrease the contrast and positive values increase the contrast.
+ */
+export function contrast(image_data: Uint8Array, value: number): Uint8Array;
+
+/**
+ * Return a cut-out of this image delimited by the bounding rectangle.
+ */
+export function crop(image_data: Uint8Array, x: number, y: number, width: number, height: number): Uint8Array;
+
+/**
+ * Performs a fast blur on this image.
+ * `sigma` is the standard deviation of the
+ * (approximated) Gaussian
+ */
+export function fast_blur(image_data: Uint8Array, sigma: number): Uint8Array;
+
+/**
+ * Add grayscale effect to image
+ * Return a grayscale version of this image.
+ * Returns `Luma` images in most cases. However, for `f32` images,
+ * this will return a grayscale `Rgb/Rgba` image instead.
+ */
+export function grayscale(image_data: Uint8Array): Uint8Array;
+
+/**
+ * Hue rotate the supplied image.
+ * `value` is the degrees to rotate each pixel by.
+ * 0 and 360 do nothing, the rest rotates by the given degree value.
+ * just like the css webkit filter hue-rotate(180)
+ */
+export function hue_rotate(image_data: Uint8Array, degrees: number): Uint8Array;
+
+/**
+ * Invert the colors on this image.
+ */
+export function invert(image_data: Uint8Array): Uint8Array;
+
+/**
+ * Resize an image
+ * Take an array of bytes, the len and the width
+ * The image's aspect ratio is preserved.
+ * The image is scaled to the maximum possible size that fits
+ * within the bounds specified by `width` and `height`
+ */
+export function resize(image_data: Uint8Array, width: number, height: number): Uint8Array;
+
 /**
  * Resize an image by the given dimension.
  * The first parameter is an array of bytes.
@@ -9,3 +148,15 @@
  * It is is ideal for icon resizing.
  */
 export function resize_square(image_data: Uint8Array, side: number): Uint8Array;
+
+/**
+ * Scale this image down to fit within a specific size.
+ * Returns a new image. The image's aspect ratio is preserved.
+ * The image is scaled to the maximum possible size that fits
+ * within the bounds specified by `nwidth` and `nheight`.
+ *
+ * This method uses a fast integer algorithm where each source
+ * pixel contributes to exactly one target pixel.
+ * May give aliasing artifacts if new size is close to old size.
+ */
+export function thumbnail(image_data: Uint8Array, width: number, height: number): Uint8Array;

package/wasm_image_processor.js

@@ -1,5 +1,9 @@
+/* @ts-self-types="./wasm_image_processor.d.ts" */
+
 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();
+export {
+    ImageProcessor, blur, brighten, contrast, crop, fast_blur, grayscale, hue_rotate, invert, resize, resize_square, thumbnail
+} from "./wasm_image_processor_bg.js";

package/wasm_image_processor_bg.js

@@ -1,48 +1,413 @@
-let wasm;
-export function __wbg_set_wasm(val) {
-    wasm = val;
+/**
+ * Builder-style image processor for JS/Wasm usage.
+ *
+ * ```javascript
+ * // Browser usage (after wasm-bindgen or bundler setup)
+ * // const { ImageProcessor } = await init();
+ * const input = document.querySelector("#file");
+ * const outputImg = document.querySelector("#output");
+ *
+ * input.addEventListener("change", async (event) => {
+ *   const file = event.target.files[0];
+ *   if (!file) return;
+ *
+ *   const inputBytes = new Uint8Array(await file.arrayBuffer());
+ *   const outputBytes = new ImageProcessor(inputBytes)
+ *     .resize(512, 512)
+ *     .grayscale()
+ *     .contrast(25.0)
+ *     .process();
+ *
+ *   const blob = new Blob([outputBytes], { type: file.type });
+ *   outputImg.src = URL.createObjectURL(blob);
+ * });
+ * ```
+ *
+ * ```javascript
+ * // Canvas usage (after wasm-bindgen or bundler setup)
+ * // const { ImageProcessor } = await init();
+ * const input = document.querySelector("#file");
+ * const canvas = document.querySelector("#canvas");
+ * const ctx = canvas.getContext("2d");
+ *
+ * input.addEventListener("change", async (event) => {
+ *   const file = event.target.files[0];
+ *   if (!file) return;
+ *
+ *   const inputBytes = new Uint8Array(await file.arrayBuffer());
+ *   const outputBytes = new ImageProcessor(inputBytes)
+ *     .resize(512, 512)
+ *     .blur(2.0)
+ *     .process();
+ *
+ *   const blob = new Blob([outputBytes], { type: file.type });
+ *   const bitmap = await createImageBitmap(blob);
+ *   canvas.width = bitmap.width;
+ *   canvas.height = bitmap.height;
+ *   ctx.clearRect(0, 0, canvas.width, canvas.height);
+ *   ctx.drawImage(bitmap, 0, 0);
+ * });
+ * ```
+ */
+export class ImageProcessor {
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(ImageProcessor.prototype);
+        obj.__wbg_ptr = ptr;
+        ImageProcessorFinalization.register(obj, obj.__wbg_ptr, obj);
+        return obj;
+    }
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        ImageProcessorFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_imageprocessor_free(ptr, 0);
+    }
+    /**
+     * @param {number} sigma
+     * @returns {ImageProcessor}
+     */
+    blur(sigma) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_blur(ptr, sigma);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} value
+     * @returns {ImageProcessor}
+     */
+    brighten(value) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_brighten(ptr, value);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} value
+     * @returns {ImageProcessor}
+     */
+    contrast(value) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_contrast(ptr, value);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @returns {ImageProcessor}
+     */
+    crop(x, y, width, height) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_crop(ptr, x, y, width, height);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} sigma
+     * @returns {ImageProcessor}
+     */
+    fast_blur(sigma) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_fast_blur(ptr, sigma);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @returns {ImageProcessor}
+     */
+    grayscale() {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_grayscale(ptr);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} degrees
+     * @returns {ImageProcessor}
+     */
+    hue_rotate(degrees) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_hue_rotate(ptr, degrees);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @returns {ImageProcessor}
+     */
+    invert() {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_invert(ptr);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * Create a new processor from raw image bytes.
+     * @param {Uint8Array} image
+     * @returns {ImageProcessor}
+     */
+    static new(image) {
+        const ptr0 = passArray8ToWasm0(image, wasm.__wbindgen_malloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.imageprocessor_new(ptr0, len0);
+        return ImageProcessor.__wrap(ret);
+    }
+    /**
+     * Calling this returns the final image bytes.
+     * @returns {Uint8Array}
+     */
+    process() {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_process(ptr);
+        var v1 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+        wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+        return v1;
+    }
+    /**
+     * @param {number} width
+     * @param {number} height
+     * @returns {ImageProcessor}
+     */
+    resize(width, height) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_resize(ptr, width, height);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} side
+     * @returns {ImageProcessor}
+     */
+    resize_square(side) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_resize_square(ptr, side);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
+    /**
+     * @param {number} width
+     * @param {number} height
+     * @returns {ImageProcessor}
+     */
+    thumbnail(width, height) {
+        const ptr = this.__destroy_into_raw();
+        const ret = wasm.imageprocessor_thumbnail(ptr, width, height);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return ImageProcessor.__wrap(ret[0]);
+    }
 }
+if (Symbol.dispose) ImageProcessor.prototype[Symbol.dispose] = ImageProcessor.prototype.free;
 
+/**
+ * Performs a Gaussian blur on this image.
+ * `sigma` is a measure of how much to blur by.
+ * Use a value of less than 5
+ * @param {Uint8Array} image_data
+ * @param {number} sigma
+ * @returns {Uint8Array}
+ */
+export function blur(image_data, sigma) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.blur(ptr0, len0, sigma);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
 
-const lTextDecoder = typeof TextDecoder === 'undefined' ? (0, module.require)('util').TextDecoder : TextDecoder;
-
-let cachedTextDecoder = new lTextDecoder('utf-8', { ignoreBOM: true, fatal: true });
-
-cachedTextDecoder.decode();
+/**
+ * Brighten image
+ * The value is -100 to 100
+ * @param {Uint8Array} image_data
+ * @param {number} value
+ * @returns {Uint8Array}
+ */
+export function brighten(image_data, value) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.brighten(ptr0, len0, value);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
 
-let cachedUint8ArrayMemory0 = null;
+/**
+ * Adjust the contrast of this image.
+ * `contrast` is the amount to adjust the contrast by.
+ * Negative values decrease the contrast and positive values increase the contrast.
+ * @param {Uint8Array} image_data
+ * @param {number} value
+ * @returns {Uint8Array}
+ */
+export function contrast(image_data, value) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.contrast(ptr0, len0, value);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
 
-function getUint8ArrayMemory0() {
-    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
-        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+/**
+ * Return a cut-out of this image delimited by the bounding rectangle.
+ * @param {Uint8Array} image_data
+ * @param {number} x
+ * @param {number} y
+ * @param {number} width
+ * @param {number} height
+ * @returns {Uint8Array}
+ */
+export function crop(image_data, x, y, width, height) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.crop(ptr0, len0, x, y, width, height);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
     }
-    return cachedUint8ArrayMemory0;
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
 }
 
-function getStringFromWasm0(ptr, len) {
-    ptr = ptr >>> 0;
-    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+/**
+ * Performs a fast blur on this image.
+ * `sigma` is the standard deviation of the
+ * (approximated) Gaussian
+ * @param {Uint8Array} image_data
+ * @param {number} sigma
+ * @returns {Uint8Array}
+ */
+export function fast_blur(image_data, sigma) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.fast_blur(ptr0, len0, sigma);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
 }
 
-let WASM_VECTOR_LEN = 0;
+/**
+ * Add grayscale effect to image
+ * Return a grayscale version of this image.
+ * Returns `Luma` images in most cases. However, for `f32` images,
+ * this will return a grayscale `Rgb/Rgba` image instead.
+ * @param {Uint8Array} image_data
+ * @returns {Uint8Array}
+ */
+export function grayscale(image_data) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.grayscale(ptr0, len0);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
 
-function passArray8ToWasm0(arg, malloc) {
-    const ptr = malloc(arg.length * 1, 1) >>> 0;
-    getUint8ArrayMemory0().set(arg, ptr / 1);
-    WASM_VECTOR_LEN = arg.length;
-    return ptr;
+/**
+ * Hue rotate the supplied image.
+ * `value` is the degrees to rotate each pixel by.
+ * 0 and 360 do nothing, the rest rotates by the given degree value.
+ * just like the css webkit filter hue-rotate(180)
+ * @param {Uint8Array} image_data
+ * @param {number} degrees
+ * @returns {Uint8Array}
+ */
+export function hue_rotate(image_data, degrees) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.hue_rotate(ptr0, len0, degrees);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
 }
 
-function takeFromExternrefTable0(idx) {
-    const value = wasm.__wbindgen_export_0.get(idx);
-    wasm.__externref_table_dealloc(idx);
-    return value;
+/**
+ * Invert the colors on this image.
+ * @param {Uint8Array} image_data
+ * @returns {Uint8Array}
+ */
+export function invert(image_data) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.invert(ptr0, len0);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
 }
 
-function getArrayU8FromWasm0(ptr, len) {
-    ptr = ptr >>> 0;
-    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+/**
+ * Resize an image
+ * Take an array of bytes, the len and the width
+ * The image's aspect ratio is preserved.
+ * The image is scaled to the maximum possible size that fits
+ * within the bounds specified by `width` and `height`
+ * @param {Uint8Array} image_data
+ * @param {number} width
+ * @param {number} height
+ * @returns {Uint8Array}
+ */
+export function resize(image_data, width, height) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.resize(ptr0, len0, width, height);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
 }
+
 /**
  * Resize an image by the given dimension.
  * The first parameter is an array of bytes.
@@ -66,19 +431,175 @@ export function resize_square(image_data, side) {
     return v2;
 }
 
+/**
+ * Scale this image down to fit within a specific size.
+ * Returns a new image. The image's aspect ratio is preserved.
+ * The image is scaled to the maximum possible size that fits
+ * within the bounds specified by `nwidth` and `nheight`.
+ *
+ * This method uses a fast integer algorithm where each source
+ * pixel contributes to exactly one target pixel.
+ * May give aliasing artifacts if new size is close to old size.
+ * @param {Uint8Array} image_data
+ * @param {number} width
+ * @param {number} height
+ * @returns {Uint8Array}
+ */
+export function thumbnail(image_data, width, height) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.thumbnail(ptr0, len0, width, height);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
+export function __wbg_Error_8c4e43fe74559d73(arg0, arg1) {
+    const ret = Error(getStringFromWasm0(arg0, arg1));
+    return ret;
+}
+export function __wbg___wbindgen_string_get_72fb696202c56729(arg0, arg1) {
+    const obj = arg1;
+    const ret = typeof(obj) === 'string' ? obj : undefined;
+    var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    var len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg___wbindgen_throw_be289d5034ed271b(arg0, arg1) {
+    throw new Error(getStringFromWasm0(arg0, arg1));
+}
+export function __wbindgen_cast_0000000000000001(arg0, arg1) {
+    // Cast intrinsic for `Ref(String) -> Externref`.
+    const ret = getStringFromWasm0(arg0, arg1);
+    return ret;
+}
 export function __wbindgen_init_externref_table() {
-    const table = wasm.__wbindgen_export_0;
+    const table = wasm.__wbindgen_externrefs;
     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);
-    ;
-};
+}
+const ImageProcessorFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_imageprocessor_free(ptr >>> 0, 1));
 
-export function __wbindgen_string_new(arg0, arg1) {
-    const ret = getStringFromWasm0(arg0, arg1);
-    return ret;
-};
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
+let cachedDataViewMemory0 = null;
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return decodeText(ptr, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+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 passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
 
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function takeFromExternrefTable0(idx) {
+    const value = wasm.__wbindgen_externrefs.get(idx);
+    wasm.__externref_table_dealloc(idx);
+    return value;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+
+let wasm;
+export function __wbg_set_wasm(val) {
+    wasm = val;
+}