function processImage(originalImg) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions
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 image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Iterate over each pixel
for (let i = 0; i < data.length; i += 4) {
// Calculate grayscale value (average method)
// const gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
// Calculate grayscale value (luminosity method - often preferred)
// L = 0.299 R + 0.587 G + 0.114 B
const red = data[i];
const green = data[i + 1];
const blue = data[i + 2];
const gray = 0.299 * red + 0.587 * green + 0.114 * blue;
// Set R, G, B channels to the grayscale value
data[i] = gray; // Red
data[i + 1] = gray; // Green
data[i + 2] = gray; // Blue
// Alpha channel (data[i + 3]) remains unchanged
}
// Put the modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
return canvas;
}The Image Grayscale Filter Tool allows users to convert color images into grayscale images using a luminosity method for accurate representation of brightness. This tool is useful for various purposes such as creating artistic effects, preparing images for printing, or simplifying designs by reducing the color complexity. It can be utilized by photographers, designers, or anyone looking to enhance images by emphasizing contrast and texture.