/**
* Applies an X-ray effect to an image.
* This is achieved by converting the image to grayscale and then inverting the colors.
*
* @param {HTMLImageElement} originalImg The original image element to process.
* @returns {HTMLCanvasElement} A new canvas element with the X-ray effect applied.
*/
function processImage(originalImg) {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Ensure the image has loaded to get its dimensions
const width = originalImg.naturalWidth || originalImg.width;
const height = originalImg.naturalHeight || originalImg.height;
// Set canvas dimensions to match the image
canvas.width = width;
canvas.height = height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0, width, height);
// Get the pixel data from the canvas
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
// Loop through each pixel (RGBA)
for (let i = 0; i < data.length; i += 4) {
// Calculate the average of the RGB values to get a grayscale value
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
// Invert the grayscale value (255 is pure white)
const invertedColor = 255 - avg;
// Apply the inverted value to R, G, and B channels
data[i] = invertedColor; // Red
data[i + 1] = invertedColor; // Green
data[i + 2] = invertedColor; // Blue
// The alpha channel (data[i + 3]) remains unchanged
}
// Put the modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
// Return the canvas with the X-ray effect
return canvas;
}The Image X-ray Viewer allows users to apply a striking X-ray effect to images by converting them to grayscale and inverting the colors. This tool is ideal for creating artistic interpretations of photos, enhancing visual presentations, and adding a unique aesthetic to digital art projects. Users can benefit from this tool in various scenarios, such as graphic design, social media content creation, and educational materials where visual effects are desired.