Image Mars Landscape Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for actual image dimensions.
    // Fallback to width/height attributes if natural dimensions aren't available (e.g., SVG or image not fully loaded).
    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 source),
    // manipulations might fail or be meaningless. Return the canvas (which will be 0x0).
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

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

        // 2. Get the image data from the canvas
        // This operation can throw a security error if the image is loaded from a different
        // origin without proper CORS headers (tainted canvas).
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data; // This is a Uint8ClampedArray

        // 3. Define color transformation factors for the Mars landscape effect.
        // These factors aim to produce a reddish-orange tint, characteristic of Mars imagery.
        // - Increase red component to make the image warmer.
        // - Reduce green component, shifting greens towards brownish/yellowish tones.
        // - Significantly reduce blue component to remove blue casts (e.g., from Earth skies)
        //   and enhance the overall orange/red warmth.
        const rFactor = 1.5; 
        const gFactor = 0.7; 
        const bFactor = 0.4; 

        // 4. Iterate through each pixel and apply the color transformation
        // Each pixel is represented by 4 consecutive values in the data array: R, G, B, A.
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];     // Original Red value
            const g = data[i + 1]; // Original Green value
            const b = data[i + 2]; // Original Blue value
            // Alpha channel (data[i + 3]) is typically preserved

            // Apply factors and ensure values remain within the 0-255 range
            data[i] = Math.min(255, r * rFactor);     // New Red
            data[i + 1] = Math.min(255, g * gFactor); // New Green
            data[i + 2] = Math.min(255, b * bFactor); // New Blue
        }

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

    } catch (e) {
        // Log any errors that occur during processing (e.g., CORS security error with getImageData)
        console.error("Error applying Mars Landscape filter: ", e);
        // If an error occurred (most likely with getImageData), the canvas, at this point,
        // would contain the original image drawn by ctx.drawImage.
        // So, returning the canvas in its current state is a reasonable fallback.
        // The caller should be aware of potential cross-origin issues if using remote images.
    }

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