Image X-Ray Vision Filter Effect Tool

function processImage(originalImg, contrastLevel = 50) {
    // 1. Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the original image
    // Use naturalWidth/Height for actual image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 4. Get the image data from the canvas
    try {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

        // Validate and clamp contrastLevel: should be a number between -100 and 100
        let actualContrast = parseFloat(contrastLevel);
        if (isNaN(actualContrast)) {
            actualContrast = 50; // Default if parsing failed
        }
        actualContrast = Math.max(-100, Math.min(100, actualContrast));
        
        // Calculate contrast factor:
        // contrastLevel = 0   => factor = 1.0 (no change)
        // contrastLevel = 100 => factor = 2.0 (max contrast increase)
        // contrastLevel = -100 => factor = 0.0 (min contrast / basically gray)
        const factor = (actualContrast / 100.0) + 1.0;

        // 5. Process each pixel to apply the X-Ray effect
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i+1];
            const b = data[i+2];
            // Alpha (data[i+3]) is not modified

            // a. Convert to grayscale (luminance method)
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;

            // b. Invert the grayscale value
            let invertedGray = 255 - gray;

            // c. Apply contrast adjustment
            // Pixels are adjusted relative to the midpoint (128)
            invertedGray = (invertedGray - 128) * factor + 128;

            // d. Clamp the value to the valid range [0, 255]
            invertedGray = Math.max(0, Math.min(255, invertedGray));

            // e. Set the new R, G, B values
            data[i] = invertedGray;     // Red channel
            data[i+1] = invertedGray; // Green channel
            data[i+2] = invertedGray; // Blue channel
        }

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

    } catch (e) {
        // Handle potential errors, e.g., canvas tainting with cross-origin images
        console.error("Error processing image for X-Ray effect: ", e);
        // Optionally, draw an error message on the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous drawing
        ctx.font = "16px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Error: Could not apply X-Ray effect.", canvas.width / 2, canvas.height / 2);
        // This provides visual feedback in case of an error.
    }

    // 7. Return the canvas with the X-Ray effect applied
    return canvas;
}