Image Cooling Filter Effect Tool

function processImage(originalImg, intensity = 30) {
    // Ensure intensity is a valid number.
    let effectStrength = Number(intensity);

    // If intensity is not a number (e.g., passed as "abc") or if it's NaN,
    // fall back to a default value. The initial default (30) handles 'undefined'.
    if (isNaN(effectStrength)) {
        effectStrength = 30; 
    }

    // For a "cooling" filter, negative strength would act as a "warming" filter.
    // We'll clamp it to be non-negative to ensure it's always a cooling effect.
    // If warming for negative values is desired, this line can be removed.
    effectStrength = Math.max(0, effectStrength);
    
    // Create a new canvas element.
    const canvas = document.createElement('canvas');
    
    // Set canvas dimensions to the original image's intrinsic dimensions.
    // Using naturalWidth/naturalHeight for the actual size of the image data.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Get the 2D rendering context.
    const ctx = canvas.getContext('2d');

    // Check if context was successfully created (it generally is in modern browsers).
    if (!ctx) {
        console.error("Failed to get 2D context from canvas. Your browser may not support it.");
        // Return the canvas, which might be empty or in an unexpected state.
        return canvas;
    }

    // Handle cases where the image might not be fully loaded or has no dimensions.
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image has zero width or height. Cannot process. Ensure the image is loaded and valid.");
        // Return the canvas (which will be 0x0 or match invalid image dimensions).
        return canvas;
    }

    // Draw the original image onto the canvas.
    // The dWidth and dHeight arguments ensure we draw using the image's intrinsic size.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Optimization: if effectStrength is 0, no pixel manipulation is needed.
    // The canvas already has the original image drawn on it.
    if (effectStrength === 0) {
        return canvas;
    }

    // Get the ImageData object from the canvas. This object contains the raw pixel data.
    // This operation can throw a SecurityError if the image is drawn from a cross-origin source
    // without proper CORS headers, tainting the canvas.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Failed to get image data from canvas. This can happen due to cross-origin restrictions if the image source is from a different domain without CORS enabled.", e);
        // In case of error (e.g., tainted canvas), return the canvas with the original image drawn,
        // as pixel manipulation is not possible.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Iterate over each pixel in the image data.
    // Each pixel is represented by 4 consecutive values in the array: Red, Green, Blue, Alpha.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Current Red channel value
        // const g = data[i+1]; // Current Green channel value - not modified in this simple filter
        const b = data[i+2]; // Current Blue channel value
        // const a = data[i+3]; // Current Alpha channel value - not modified

        // Apply the cooling effect:
        // Decrease the red component, ensuring it doesn't go below 0.
        data[i] = Math.max(0, r - effectStrength);
        
        // Green component (data[i+1]) remains unchanged for this basic cooling filter.
        
        // Increase the blue component, ensuring it doesn't exceed 255.
        data[i+2] = Math.min(255, b + effectStrength);
        
        // Alpha component (data[i+3]) remains unchanged.
    }

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

    // Return the canvas element with the processed image.
    return canvas;
}