Image X-ray Photography Filter Effect Tool

function processImage(originalImg) {
    // Create a new canvas element to draw the processed image on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth and naturalHeight to get the original dimensions of the image,
    // in case the Image object's width/height properties are styled or not yet reflecting the loaded image's dimensions.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set the canvas dimensions to match the image.
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas.
    // Note: If the image is from a different origin and lacks appropriate CORS headers,
    // this operation will "taint" the canvas. A tainted canvas will cause ctx.getImageData()
    // to throw a security error. The calling environment must ensure the Image object
    // is usable (e.g., by setting originalImg.crossOrigin = "Anonymous" before setting its src
    // if it's a cross-origin image from a server that provides CORS headers).
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get the pixel data from the canvas.
    // This returns an ImageData object containing a Uint8ClampedArray (data.data)
    // representing the pixel data in RGBA order.
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // Layout: [R1, G1, B1, A1, R2, G2, B2, A2, ...]

    // Iterate over each pixel in the image data.
    // We increment by 4 in each step because each pixel consists of 4 components (R, G, B, A).
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Red component of the current pixel
        const g = data[i + 1]; // Green component
        const b = data[i + 2]; // Blue component
        // data[i + 3] is the Alpha component, which we will preserve.

        // Convert the pixel to grayscale using the luminosity method.
        // This formula gives a weighted average of R, G, B that better reflects human perception of brightness.
        // L = 0.299*R + 0.587*G + 0.114*B
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Invert the grayscale value.
        // In an 8-bit color channel, color values range from 0 (black) to 255 (white).
        // Inverting swaps light and dark: new_value = 255 - old_value.
        const invertedGray = 255 - gray;

        // Set the R, G, and B components of the pixel to the new inverted grayscale value.
        data[i] = invertedGray;     // New Red value
        data[i + 1] = invertedGray; // New Green value
        data[i + 2] = invertedGray; // New Blue value
        // The Alpha value (data[i + 3]) remains unchanged to preserve any original transparency.
    }

    // Put the modified pixel data back onto the canvas.
    // This updates the canvas with the X-ray effect.
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element. The caller can then append this canvas to the DOM
    // or use it to generate a new image (e.g., canvas.toDataURL()).
    return canvas;
}