Image Satellite View Filter Effect Tool

function processImage(originalImg, contrastLevel = 30, brightnessOffset = -10, saturationBoost = 20, coolTemperature = 15) {
    const canvas = document.createElement('canvas');
    
    // Use natural dimensions of the image for the canvas
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    if (w === 0 || h === 0) {
        console.error("Image has zero dimensions. Ensure it's loaded and valid.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas; // Return an empty canvas
    }

    canvas.width = w;
    canvas.height = h;

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This should ideally not happen in common browser environments
        console.error("Could not get 2D rendering context for the canvas.");
        // Return the empty canvas or throw an error, depending on desired error handling
        return canvas; 
    }

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data. This can happen due to cross-origin restrictions if the image is hosted on a different domain without CORS headers.", e);
        // Fallback: return a canvas with the original image drawn, as processing is not possible.
        // The user of this function should be aware of same-origin policy for images or ensure images have appropriate CORS headers.
        return canvas;
    }

    const data = imageData.data;

    // --- Parameter Normalization ---

    // Brightness: brightnessOffset is used directly. Range e.g., -100 to 100.
    //
    // Contrast: Map contrastLevel (0-100 recommended range) to a factor.
    // A contrastLevel of 0 means C=0, factor=1 (no change).
    // A contrastLevel of 100 means C=128, factor approx 2.97 (high contrast).
    const C = (contrastLevel / 100.0) * 128.0; 
    const contrastFactor = (259.0 * (C + 255.0)) / (255.0 * (259.0 - C));

    // Saturation: Map saturationBoost (-100 to 100 recommended range) to a multiplier.
    // -100 results in saturationMultiplier = 0 (grayscale).
    // 0 results in saturationMultiplier = 1 (no change).
    // 100 results in saturationMultiplier = 2 (doubled saturation).
    const saturationMultiplier = 1.0 + (saturationBoost / 100.0);

    // Cool Temperature: coolTemperature (e.g., 0-50) is an offset value to shift colors.

    // --- Pixel Processing Loop ---
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved.

        // 1. Apply Brightness
        // Adjusts the overall lightness of the pixel.
        r += brightnessOffset;
        g += brightnessOffset;
        b += brightnessOffset;

        // 2. Apply Contrast
        // Increases or decreases the difference between light and dark areas.
        // The value 128.0 is the pivot point (mid-gray).
        r = contrastFactor * (r - 128.0) + 128.0;
        g = contrastFactor * (g - 128.0) + 128.0;
        b = contrastFactor * (b - 128.0) + 128.0;
        
        // 3. Apply Saturation
        // Adjusts the intensity of colors.
        // Standard luminance calculation weights (often cited as NTSC/BT.601).
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // For sRGB/BT.709, weights would be: 0.2126 * r + 0.7152 * g + 0.0722 * b;
        // The difference is usually subtle for this type of filter.

        r = lum + (r - lum) * saturationMultiplier;
        g = lum + (g - lum) * saturationMultiplier;
        b = lum + (b - lum) * saturationMultiplier;
        
        // 4. Apply Cool Temperature
        // Adds to blue and subtracts from red to give a cooler color cast.
        // This effect is subtle with the default 'coolTemperature' value.
        b += coolTemperature;
        r -= coolTemperature * 0.5; // Reduce red to enhance coolness.

        // Final Clamp: Ensure RGB values are within the 0-255 range.
        data[i]    = Math.max(0, Math.min(255, Math.round(r)));
        data[i+1]  = Math.max(0, Math.min(255, Math.round(g)));
        data[i+2]  = Math.max(0, Math.min(255, Math.round(b)));
    }

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