Image Chemical Process Filter Effect Tool

function processImage(originalImg, contrast = 1.4, blueBias = 0.2) {
    const canvas = document.createElement('canvas');
    // Use { willReadFrequently: true } for potential performance optimization if available
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure canvas dimensions are set from the image's natural dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Get the pixel data from the canvas
    // A try-catch block is good practice for getImageData, as it can fail for
    // cross-origin images if the canvas becomes tainted.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting ImageData for Chemical Process Filter:", e);
        // Fallback: Return the canvas with the original image drawn if processing cannot proceed.
        // (The original image is already on the canvas at this point)
        return canvas;
    }
    
    const data = imageData.data;

    // Parameters:
    // contrast: Typically 1.0 to 2.0. Default 1.4. Controls overall contrast.
    // blueBias: Typically 0.0 to 0.5. Default 0.2. Controls the blue channel manipulation.
    //   0.0 means less blue channel alteration before overall contrast.
    //   0.2 provides a noticeable "cross-processed" blue/cyan tint.
    //   0.5 would make the blue channel uniformly 0.5 before overall contrast.

    for (let i = 0; i < data.length; i += 4) {
        // Normalize pixel channel values to [0, 1] range
        let r = data[i] / 255;
        let g = data[i + 1] / 255;
        let b = data[i + 2] / 255;
        // Alpha channel (data[i + 3]) is preserved

        // 1. Apply quadratic contrast curve to Red and Green channels
        // This curve increases the contrast within these specific channels.
        // Formula: val_new = (val < 0.5) ? (2 * val^2) : (1 - 2 * (1 - val)^2)
        r = (r < 0.5) ? (2 * r * r) : (1 - 2 * (1 - r) * (1 - r));
        g = (g < 0.5) ? (2 * g * g) : (1 - 2 * (1 - g) * (1 - g));
        
        // 2. Modify Blue channel
        // This simulates a common characteristic of cross-processing effects.
        // The `blueBias` parameter influences how the blue channel is scaled and offset.
        // If blueBias = 0.0, blue channel is b_processed = b * 1.0 + 0.0 (original b).
        // If blueBias = 0.2 (default), b_processed = b * 0.6 + 0.2.
        //   (Dark blues map to 0.2, mid blues to 0.5, light blues to 0.8).
        // If blueBias = 0.5, b_processed = b * 0.0 + 0.5 = 0.5 (blue channel flattened to 0.5).
        let blueScale = 1.0 - blueBias * 2.0;
        if (blueScale < 0) { // Prevent blueScale from being negative if blueBias > 0.5
            blueScale = 0;
        }
        b = b * blueScale + blueBias;

        // 3. Apply overall contrast adjustment to all processed channels (r, g, b)
        // Formula: val_new = (val - 0.5) * contrast_factor + 0.5
        // This pushes values away from (or towards, if contrast < 1) the midpoint 0.5.
        if (contrast !== 1.0) { // Optimization: Skip if contrast is neutral (1.0)
            r = (r - 0.5) * contrast + 0.5;
            g = (g - 0.5) * contrast + 0.5;
            b = (b - 0.5) * contrast + 0.5;
        }

        // Clamp all channel values to the [0, 1] range
        r = Math.max(0, Math.min(1, r));
        g = Math.max(0, Math.min(1, g));
        b = Math.max(0, Math.min(1, b));

        // Denormalize values back to [0, 255] and update pixel data
        data[i]     = r * 255;
        data[i + 1] = g * 255;
        data[i + 2] = b * 255;
        // data[i + 3] (alpha) remains unchanged
    }

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

    return canvas;
}