Image X-ray Filter

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

    // Ensure the image is loaded to get correct dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // Draw the original image onto the canvas
    // Handle potential errors if the image isn't fully loaded or is invalid
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. It might not be loaded correctly.");
        // Optionally, draw a placeholder or return an empty canvas
        ctx.fillStyle = 'lightgray';
        ctx.fillRect(0,0, canvas.width || 100, canvas.height || 100); // Default size if dimensions unknown
        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';
        ctx.fillText("Error: Image not loaded", canvas.width/2, canvas.height/2);
        return canvas;
    }
    
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get the image data from the canvas
    // This can throw a security error if the image is cross-origin and the canvas becomes tainted.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Failed to getImageData: ", e);
        // Draw an error message on the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous drawing
        ctx.fillStyle = 'lightgray';
        ctx.fillRect(0,0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';
        ctx.font = '16px Arial';
        ctx.fillText("Error: Cannot process cross-origin image.", canvas.width/2, canvas.height/2 - 10);
        ctx.fillText("Ensure the image is from the same origin or has CORS headers.", canvas.width/2, canvas.height/2 + 10);
        return canvas;
    }
    
    const data = imageData.data; // This is an array [R, G, B, A, R, G, B, A, ...]

    // Iterate over each pixel
    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 kept as is

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

        // Invert the grayscale value
        const invertedGray = 255 - gray;

        // Set the new RGB values
        data[i] = invertedGray;     // Red
        data[i + 1] = invertedGray; // Green
        data[i + 2] = invertedGray; // Blue
        // data[i+3] remains unchanged (alpha)
    }

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

    // Return the canvas
    return canvas;
}