Image Coral Fluorescence Filter Effect Tool

function processImage(originalImg, blueReductionFactor = 0.15, greenBoostFactor = 1.2, redBoostFactor = 1.1) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can optimize calls to getImageData/putImageData
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure parameters are numeric. If conversion to Number results in NaN (e.g., for an invalid string),
    // fall back to the default values.
    const numBlueReductionFactor = isNaN(Number(blueReductionFactor)) ? 0.15 : Number(blueReductionFactor);
    const numGreenBoostFactor = isNaN(Number(greenBoostFactor)) ? 1.2 : Number(greenBoostFactor);
    const numRedBoostFactor = isNaN(Number(redBoostFactor)) ? 1.1 : Number(redBoostFactor);

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;
    
    // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        // In a real application, you might want to log an error or throw.
        // For this context, returning an empty canvas is a silent failure if dimensions are bad.
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (error) {
        // This can happen due to CORS restrictions if the image is from a different origin
        // or other security-related issues.
        // Returning the canvas with the original image drawn is a graceful fallback.
        // console.warn("Could not get image data for processing due to: ", error);
        return canvas;
    }
    
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Red channel
        const g = data[i + 1]; // Green channel
        const b = data[i + 2]; // Blue channel
        // data[i + 3] is the Alpha channel, which we'll preserve.

        // Apply the fluorescence filter effect:
        // Simulate a yellow/orange filter by reducing the blue channel.
        // Boost green and red channels to simulate fluorescent colors "popping".
        const newR = r * numRedBoostFactor;
        const newG = g * numGreenBoostFactor;
        const newB = b * numBlueReductionFactor;

        // Clamp values to the 0-255 range and round to nearest integer
        data[i] = Math.round(Math.min(255, Math.max(0, newR)));
        data[i + 1] = Math.round(Math.min(255, Math.max(0, newG)));
        data[i + 2] = Math.round(Math.min(255, Math.max(0, newB)));
        // Alpha channel (data[i + 3]) remains unchanged.
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}