/**
* Converts an image to grayscale.
*
* @param {HTMLImageElement} originalImg The original image element to process.
* @returns {HTMLCanvasElement} A new canvas element with the grayscale version of the image.
*/
function processImage(originalImg) {
// Create a new canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set the canvas dimensions to match the original image
canvas.width = originalImg.naturalWidth || originalImg.width;
canvas.height = originalImg.naturalHeight || originalImg.height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Get the pixel data from the canvas
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Iterate over each pixel in the image data
for (let i = 0; i < data.length; i += 4) {
const red = data[i];
const green = data[i + 1];
const blue = data[i + 2];
// Calculate the grayscale value using the luminosity method,
// which weighs colors according to human perception.
// Formula: gray = 0.299*R + 0.587*G + 0.114*B
const gray = 0.299 * red + 0.587 * green + 0.114 * blue;
// Set the red, green, and blue values for the pixel to the calculated grayscale value
data[i] = gray; // Red channel
data[i + 1] = gray; // Green channel
data[i + 2] = gray; // Blue channel
// The alpha channel (data[i + 3]) is left untouched
}
// Put the modified pixel data back onto the canvas
ctx.putImageData(imageData, 0, 0);
// Return the canvas element containing the grayscale image
return canvas;
}The Image To Grayscale Converter is a tool that allows users to transform colorful images into grayscale versions. This conversion is useful for various purposes, such as creating artistic effects, preparing images for printing, or enhancing the focus on shapes and textures without the distraction of color. Users can easily upload their images, and the tool will convert them into grayscale, providing a clear visualization with adjusted contrast and tone.