Image Cyanotype Process Filter Effect

function processImage(originalImg, 
                      darkR = 0,   // Red component for darkest areas
                      darkG = 51,  // Green component for darkest areas (e.g., #003366 Prussian Blue type color)
                      darkB = 102, // Blue component for darkest areas
                      lightR = 220, // Red component for lightest areas (e.g., near-white paper color)
                      lightG = 230, // Green component for lightest areas
                      lightB = 255  // Blue component for lightest areas
                     ) {
    const canvas = document.createElement('canvas');
    // Using 'willReadFrequently: true' can optimize repeated getImageData/putImageData calls in some browsers
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth/Height for intrinsic dimensions of the image.
    // Fallback to width/height, though for a loaded Image object, natural dimensions are preferred.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    // The explicit width and height parameters ensure correct scaling if originalImg has different display size.
    ctx.drawImage(originalImg, 0, 0, width, height);

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

    // Iterate over each pixel in the image. Each pixel consists of 4 bytes (R, G, B, A).
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Original Red component
        const g = data[i + 1]; // Original Green component
        const b = data[i + 2]; // Original Blue component
        // const alpha = data[i + 3]; // Original Alpha component - we'll preserve this

        // Convert the pixel to grayscale using the luminosity method (standard NTSC weights).
        // This gives a value between 0 (black) and 255 (white).
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        
        // Normalize the grayscale value to a 0.0 to 1.0 range (L_norm for luminance normalized).
        // This L_norm acts as the interpolation factor.
        const L_norm = gray / 255.0;

        // Linearly interpolate between the 'dark cyanotype' color and 'light cyanotype/paper' color.
        // When L_norm = 0 (pixel was black), the color will be (darkR, darkG, darkB).
        // When L_norm = 1 (pixel was white), the color will be (lightR, lightG, lightB).
        // Mid-tones will be a blend of these two colors.
        // The formula for linear interpolation (lerp) is: (1 - t) * start + t * end
        data[i]   = (1 - L_norm) * darkR   + L_norm * lightR;   // New Red channel
        data[i+1] = (1 - L_norm) * darkG + L_norm * lightG; // New Green channel
        data[i+2] = (1 - L_norm) * darkB  + L_norm * lightB;  // New Blue channel
        // data[i+3] (alpha channel) remains unchanged, preserving transparency.
    }

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

    // Return the canvas element with the cyanotype effect applied
    return canvas;
}