Image Coral Reef Filter Effect Tool

async function processImage(originalImg, redChannelFactorParam = 0.8, greenChannelFactorParam = 1.1, blueChannelFactorParam = 1.3, brightnessParam = 1.0) {
    // Default values for the filter parameters
    const DEFAULT_RED_FACTOR = 0.8;
    const DEFAULT_GREEN_FACTOR = 1.1;
    const DEFAULT_BLUE_FACTOR = 1.3;
    const DEFAULT_BRIGHTNESS = 1.0;

    // Parse parameters, falling back to defaults if invalid
    let rFactor = Number(redChannelFactorParam);
    if (isNaN(rFactor)) {
        rFactor = DEFAULT_RED_FACTOR;
    }

    let gFactor = Number(greenChannelFactorParam);
    if (isNaN(gFactor)) {
        gFactor = DEFAULT_GREEN_FACTOR;
    }

    let bFactor = Number(blueChannelFactorParam);
    if (isNaN(bFactor)) {
        bFactor = DEFAULT_BLUE_FACTOR;
    }

    let brightness = Number(brightnessParam);
    if (isNaN(brightness)) {
        brightness = DEFAULT_BRIGHTNESS;
    }

    const canvas = document.createElement('canvas');
    // Add willReadFrequently for potential performance optimization when using getImageData
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure image is loaded before trying to get its dimensions
    // The function expects originalImg to be a loaded Image object.
    // If originalImg.width or originalImg.height are 0, it might mean the image isn't loaded.
    let imgWidth = originalImg.naturalWidth || originalImg.width;
    let imgHeight = originalImg.naturalHeight || originalImg.height;

    if (imgWidth === 0 || imgHeight === 0) {
        // Fallback for unloaded or zero-dimension images - attempt to wait for load
        // This is a basic attempt; robust loading should be handled by the caller.
        if (typeof originalImg.decode === 'function') {
            try {
                await originalImg.decode();
                imgWidth = originalImg.naturalWidth || originalImg.width;
                imgHeight = originalImg.naturalHeight || originalImg.height;
            } catch (error) {
                console.error("Error decoding image:", error);
                // If still no dimensions, create a tiny placeholder canvas or throw error
                canvas.width = 1;
                canvas.height = 1;
                return canvas;
            }
        } else {
             // If decode is not available, and dimensions are still 0, it's problematic
             // For simplicity, we'll proceed, but drawImage might not work correctly.
             // A more robust solution would involve ensuring the image is fully loaded by the caller.
            if(imgWidth === 0 || imgHeight === 0) {
                console.warn("Image dimensions are zero. The image might not be loaded or is invalid.");
                // Create a small placeholder canvas to avoid errors down the line
                canvas.width = 1; 
                canvas.height = 1;
                // Optionally, draw a small indicator or return here
                // ctx.fillStyle = 'red';
                // ctx.fillRect(0,0,1,1); // Indicate error visually
                return canvas;
            }
        }
    }
    
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Get the ImageData object from the canvas.
    // This can be computationally intensive for very large images.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // data is a Uint8ClampedArray: R,G,B,A,R,G,B,A...

    // Iterate over each pixel in the ImageData
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];     // Red channel
        let g = data[i + 1]; // Green channel
        let b = data[i + 2]; // Blue channel
        // Alpha channel (data[i+3]) is left unchanged

        // 1. Apply individual channel factors for "Coral Reef" color shift
        r *= rFactor;
        g *= gFactor;
        b *= bFactor;

        // 2. Apply overall brightness adjustment
        r *= brightness;
        g *= brightness;
        b *= brightness;
        
        // Assign modified values back.
        // Uint8ClampedArray automatically clamps values to the 0-255 range.
        // e.g., if r becomes 300, it's clamped to 255. If -50, clamped to 0.
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
    }

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

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