Please bookmark this page to avoid losing your image tool!

Image Satellite View Filter Effect Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Satellite View Filter Effect Tool allows users to enhance their images with a satellite view aesthetic by adjusting various parameters such as contrast, brightness, saturation, and color temperature. This tool is ideal for users looking to create visually striking images that mimic the appearance of satellite imagery, making it suitable for applications in photography, graphic design, and social media content creation.

Leave a Reply

Your email address will not be published. Required fields are marked *