Image Solarpunk Filter Effect Tool

function processImage(originalImg, greenBoost = 1.4, warmth = 0.2, brightness = 10) {
    // Ensure parameters are numeric. The default values in the signature
    // handle cases where arguments are not provided.
    // These conversions handle cases where arguments are provided but might be strings (e.g., "1.5").
    const G_BOOST = Number(greenBoost);
    const WARMTH = Number(warmth);
    const BRIGHTNESS = Number(brightness);

    // Validate that after conversion, parameters are actual numbers.
    // If not, fallback to the default values (redundant due to signature defaults, but safe).
    const finalGreenBoost = isNaN(G_BOOST) ? 1.4 : G_BOOST;
    const finalWarmth = isNaN(WARMTH) ? 0.2 : WARMTH;
    const finalBrightness = isNaN(BRIGHTNESS) ? 10 : BRIGHTNESS;

    // Create a canvas element
    const canvas = document.createElement('canvas');
    // Use { willReadFrequently: true } for potential performance optimization hint
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Set canvas dimensions to match the original image's intrinsic dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image dimensions are 0. The image might not be loaded or is invalid. Returning an empty canvas.");
        return canvas;
    }

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

        // Get the image data from the canvas
        // This can throw a security error if the canvas is tainted (e.g., cross-origin image without CORS)
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const pixels = imageData.data; // This is a Uint8ClampedArray

        // Iterate over each pixel (each pixel has 4 components: R, G, B, A)
        for (let i = 0; i < pixels.length; i += 4) {
            let r = pixels[i];     // Red
            let g = pixels[i + 1]; // Green
            let b = pixels[i + 2]; // Blue
            // Alpha channel (pixels[i+3]) is not modified for this filter

            // 1. Apply green boost: Enhances the lush, natural feel of Solarpunk
            g *= finalGreenBoost;

            // 2. Apply warmth: Simulates golden sunlight and an optimistic atmosphere
            // Positive warmth increases red/yellow tones and reduces blue.
            // Negative warmth would create a cooler effect.
            r *= (1 + finalWarmth);
            g *= (1 + finalWarmth * 0.3); // Green also gets a slight warmth boost to make it yellowish-green
            b *= (1 - finalWarmth * 0.4); // Blue is reduced to enhance overall warmth

            // 3. Apply brightness: Overall lift to the image, contributing to the bright, optimistic aesthetic
            r += finalBrightness;
            g += finalBrightness;
            b += finalBrightness;

            // Clamp values to the 0-255 range to ensure they are valid color values
            pixels[i] = Math.max(0, Math.min(255, r));
            pixels[i + 1] = Math.max(0, Math.min(255, g));
            pixels[i + 2] = Math.max(0, Math.min(255, b));
        }

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

    } catch (e) {
        console.error("Error processing image for Solarpunk filter: ", e);
        // If getImageData failed (e.g., tainted canvas), the canvas currently holds the original image
        // (if drawImage succeeded). Returning the canvas in this state is a fallback.
        // If drawImage itself failed, the canvas might be blank.
        // This catch block primarily handles issues with pixel manipulation after drawing.
    }

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