function processImage(originalImg) {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set 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 image data from the canvas
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Apply grayscale filter
for (let i = 0; i < data.length; i += 4) {
// Calculate the grayscale value using the luminosity method
// (0.299 * R + 0.587 * G + 0.114 * B)
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const gray = 0.299 * r + 0.587 * g + 0.114 * b;
// Set R, G, and B components to the grayscale value
data[i] = gray; // Red
data[i + 1] = gray; // Green
data[i + 2] = gray; // Blue
// Alpha (data[i + 3]) remains unchanged
}
// Put the modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
// Return the canvas element
return canvas;
}The Image Grayscale Filter Application allows users to transform images into grayscale by applying a luminosity-based filter. This tool is useful for creating black-and-white versions of photos, enhancing artistic expression, or preparing images for printing. It can be used in various scenarios including graphic design, photography, and web development where a monochrome effect is desired.