Image Cyanotype Filter Application

function processImage(originalImg, strength = 1.0) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the canvas has the same dimensions as the image.
    // We assume originalImg is a loaded image object (e.g., HTMLImageElement),
    // so naturalWidth and naturalHeight are available.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the image data from the canvas.
    // imageData is an object with width, height, and data (a Uint8ClampedArray).
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Clamp the strength parameter to the [0, 1] range
    const s = Math.max(0, Math.min(1, strength));

    // Iterate over each pixel in the image data.
    // Each pixel is represented by 4 consecutive values in the array: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        const r_orig = data[i];     // Original Red channel value
        const g_orig = data[i + 1]; // Original Green channel value
        const b_orig = data[i + 2]; // Original Blue channel value
        // The Alpha channel (data[i + 3]) will be preserved from the original image.

        // 1. Convert the original pixel color to grayscale using the luminosity method.
        // These coefficients are standard for perceived brightness.
        const gray = 0.299 * r_orig + 0.587 * g_orig + 0.114 * b_orig;

        // 2. Define the target cyanotype color based on the grayscale value.
        // For a cyanotype effect:
        // - Red channel is typically set to 0 or a very low value.
        // - Green channel often takes a significant portion of the grayscale intensity.
        // - Blue channel is dominant and can be amplified.
        const r_cyan = 0;
        const g_cyan = gray;
        const b_cyan = gray * 1.2; // Multiplying by 1.2 enhances the blue tone.
                                   // Uint8ClampedArray will automatically clamp this to 255 if it exceeds it.

        // 3. Blend the original pixel color with the calculated cyanotype color
        // based on the strength parameter.
        // new_color_channel = (1 - strength) * original_channel + strength * cyanotype_channel
        // The results are assigned back to the data array. Uint8ClampedArray handles clamping to [0, 255].
        data[i]     = (1 - s) * r_orig + s * r_cyan;   // New Red
        data[i + 1] = (1 - s) * g_orig + s * g_cyan;   // New Green
        data[i + 2] = (1 - s) * b_orig + s * b_cyan;   // New Blue
    }

    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element with the filtered image
    return canvas;
}