DOCSEARCHbyAlgolia
Submit Docs

Photon

repository·master·Indexed 26 days ago

https://github.com/silvia-odwyer/photon

A high-performance, cross-platform image processing library written in Rust (photon-rs v0.3.3). It supports native use, Node.js, and the browser via WebAssembly. The library provides high-level filters and low-level pixel/channel manipulation across modules including effects, transform, correction, and convolution. Supported image formats include PNG, JPEG, BMP, ICO, TIFF, and WEBP.

Tokens
23.3K
Snippets
132
Records
153
Agent score
86%

What's inside photon

  1. Overview of Photon image processing

    master
    Photon is a high-performance image processing library written in Rust and compilable to WebAssembly. It is designed for use both natively and on the web. It provides over 80 effects, including transformations, filters, channel manipulation, special effects, and color correction. It is optimized for speed, outperforming libraries like ImageMagick and the Python Imaging Library in various benchmarks.

  2. Test against a locally compiled Photon crate

    master

    If you want to test the React demo against a custom or locally compiled version of the Photon Rust crate:

    1. Navigate to the crate/ directory.
    2. Run wasm-pack build to generate the WebAssembly package.
    3. Point the demo at the generated crate/pkg output (for example, using npm link).

  4. Run the Photon Webpack Demo

    master

    To run the pre-configured Webpack 5 and TypeScript demo locally for development, clone the repository, install dependencies, and start the development server. The server supports hot reloads for src/index.ts and assets, serving the project at http://localhost:8080.

    git clone https://github.com/silvia-odwyer/photon
cd photon
npm install
npm run dev

  5. Use Photon React Demo scripts

    master

    The react_app_demo package provides several npm scripts for development, building, and linting:

    • npm run dev: Starts the development server at http://localhost:5173 with hot module replacement.
    • npm run build: Generates an optimized production bundle in the dist/ directory and runs the TypeScript compiler.
    • npm run preview: Serves the local production bundle for verification.
    • npm run lint: Runs TypeScript type-checking (tsc --noEmit) without generating build artifacts.
    npm run dev
npm run build
npm run preview
npm run lint

  10. Process images in the browser using WebAssembly

    master

    To use Photon in a web environment, you must bridge the gap between browser ImageData and the Rust-based PhotonImage.

    1. Draw your image onto a <canvas> element.
    2. Use module.open_image(canvas, ctx) to convert the canvas data into a PhotonImage that the Rust library can process.
    3. Call the desired WASM-friendly processing function (e.g., module.filter) on the PhotonImage.
    4. Use ctx.putImageData(rust_image, 0, 0) to place the modified pixels back onto the canvas.

    Note: Only functions annotated with #[wasm_bindgen] in the Rust core are available in the WebAssembly module.

    function filterImage(event) {
    // Create a canvas and get a 2D context from the canvas
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    // Draw the image element onto the canvas
    ctx.drawImage(newimg, 0, 0);
    
    // Convert the ImageData found in the canvas to a PhotonImage (so that it can communicate with the core Rust library)
    let rust_image = module.open_image(canvas, ctx);

    // Filter the image, the PhotonImage's raw pixels are modified
    module.filter(rust_image, "radio");
    
    // Place the pixels back on the canvas
    ctx.putImageData(rust_image, 0, 0)
  }

  12. Run Photon native examples

    master

    To run Photon examples natively using Rust, clone the repository and use cargo run. Ensure you use the --release flag for performance. Outputted images are saved to the example_output directory.

    To run the default example.rs:

    cargo run --example example --release

    To run the text addition example:

    cargo run --example add_text
    cargo run --example example --release