Skip to content

Using Photon on the Web

Installing Photon

Prerequisites

Install via npm:

npm install @silvia-odwyer/photon

Importing

import("@silvia-odwyer/photon").then(photon => {
    // Module has now been imported. 
    // All image processing logic w/ Photon goes here.
    // See sample code below.
}

Usage

Working with Photon involves the use of the HTML5 Canvas element, so you'll need to create a canvas and draw your desired image onto the canvas.

You can then convert this canvas to a PhotonImage, and apply effects to it.

See the sample code below.

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function filterImage() {
    // 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 image = photon.open_image(canvas, ctx);

    // Filter the image, the PhotonImage's raw pixels are modified
    photon.filter(image, "radio");

    // Place the modified image back on the canvas
    photon.putImageData(canvas, ctx, image);
}

Apply Multiple Effects

To apply multiple effects to a single image, you can pass the same image into consecutive calls.

For example, to add a "radio" filter effect, then convert to greyscale, and finally increment the Red channel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
function filterImage() {
    // 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 image = photon.open_image(canvas, ctx);

    // Filter the image, the PhotonImage's raw pixels are modified
    photon.filter(image, "radio");

    photon.grayscale(image);

    photon.alter_red_channel(image, 20);

    // Place the pixels back on the canvas
    photon.putImageData(canvas, ctx, image);
}