Image Moon Surface Filter Effect Tool

function processImage(originalImg, contrastFactor = 1.8, brightnessOffset = -15, noiseAmount = 20) {
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height
    const W = originalImg.naturalWidth || originalImg.width;
    const H = originalImg.naturalHeight || originalImg.height;

    canvas.width = W;
    canvas.height = H;

    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // If context cannot be created, return an empty canvas of the correct size.
        // This indicates failure to process but fulfills canvas return type.
        console.error("Unable to get 2D context from canvas.");
        return canvas;
    }

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, W, H);
    } catch (e) {
        // This might happen if originalImg is not a valid image source (e.g. broken URL, incomplete load)
        console.error("Error drawing image to canvas:", e);
        // Return the canvas, which might be empty or partially drawn, indicating an issue.
        return canvas;
    }

    // Get image data if canvas is not tainted
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, W, H);
    } catch (e) {
        // This error occurs if the canvas is tainted (e.g., cross-origin image without CORS headers)
        console.error("Error getting ImageData from canvas. Canvas may be tainted by cross-origin data:", e);
        // Return the canvas with the original image drawn, as pixel manipulation is not possible.
        return canvas;
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

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

        // 1. Convert to grayscale using the luminosity method
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply contrast
        // The formula C' = F * (C - M) + M adjusts contrast around a midpoint M (128 for 8-bit).
        gray = contrastFactor * (gray - 128) + 128;

        // 3. Apply brightness offset
        gray += brightnessOffset;

        // 4. Add noise
        if (noiseAmount > 0) {
            // Generate noise in the range [-noiseAmount, +noiseAmount]
            const noise = (Math.random() * 2 - 1) * noiseAmount;
            gray += noise;
        }
        
        // 5. Assign the calculated gray value to R, G, B channels.
        // The Uint8ClampedArray automatically handles clamping values to [0, 255]
        // and rounding to the nearest integer.
        data[i] = gray;     // Red channel
        data[i + 1] = gray; // Green channel
        data[i + 2] = gray; // Blue channel
    }

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

    return canvas;
}