/**
* Applies an X-ray effect to an image.
* This is achieved by converting the image to grayscale, inverting the colors,
* and adjusting brightness and contrast.
*
* @param {HTMLImageElement} originalImg The original image element to process.
* @param {number} [brightness=1.2] The brightness level of the X-ray effect. 1 is normal.
* @param {number} [contrast=1.5] The contrast level of the X-ray effect. 1 is normal.
* @returns {HTMLCanvasElement} A new canvas element with the X-ray effect applied.
*/
function processImage(originalImg, brightness = 1.2, contrast = 1.5) {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
const width = originalImg.naturalWidth || originalImg.width;
const height = originalImg.naturalHeight || originalImg.height;
canvas.width = width;
canvas.height = height;
// Construct the CSS filter string for the X-ray effect.
// The core of the effect is grayscale and inversion.
// Brightness and contrast are adjusted to enhance the look.
const filterString = `grayscale(1) invert(1) brightness(${brightness}) contrast(${contrast})`;
// Apply the filter to the canvas context
ctx.filter = filterString;
// Draw the original image onto the canvas.
// The filter will be applied during this drawing operation.
ctx.drawImage(originalImg, 0, 0, width, height);
// Return the canvas with the X-ray image
return canvas;
}The X Ray Image Viewer is a tool that allows users to apply an X-ray effect to images. By converting images to grayscale, inverting colors, and adjusting brightness and contrast, this tool creates a unique visual representation of the original content. It can be particularly useful for medical professionals or educators looking to enhance the presentation of X-ray images, or for artists and designers seeking innovative methods to manipulate and display images creatively.