function processImage(originalImg, intensity = 1.2) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
try {
// Retrieve the pixel data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const floatIntensity = parseFloat(intensity);
// Loop through every pixel (4 elements per pixel: R, G, B, A)
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// Calculate the standard luminance of the pixel
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
// Apply the "Green Out" filter:
// Zero out Red and Blue channels, map the calculated luminance to the Green channel
data[i] = 0; // R
data[i + 1] = Math.min(255, luminance * floatIntensity); // G
data[i + 2] = 0; // B
// data[i + 3] is Alpha, which remains unchanged
}
// Put the modified pixel data back onto the canvas
ctx.putImageData(imageData, 0, 0);
} catch (err) {
console.error("Error applying Green Out effect (possible CORS/tainted canvas issue):", err);
}
return canvas;
}The Green Out Image Effect Generator is a tool that applies a monochromatic green filter to your images. By calculating the luminance of each pixel and mapping it exclusively to the green channel, the tool preserves the original image’s brightness and detail while removing all red and blue color information. This effect can be used for creative digital art, creating night-vision aesthetics, or designing stylized visual content for social media and graphic design projects.