function processImage(originalImg, intensity = 100) {
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Fallback if image has 0 width or height
if (canvas.width === 0 || canvas.height === 0) {
return canvas;
}
// Retrieve image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Parse intensity and constrain it between 0 and 1
const factor = Math.max(0, Math.min(100, Number(intensity))) / 100;
// Loop through all pixels
for (let i = 0; i < data.length; i += 4) {
// For a red filter, we reduce the green and blue channels
// based on the applied intensity factor.
// Red channel (data[i]) remains unchanged.
data[i + 1] = Math.round(data[i + 1] * (1 - factor)); // Green
data[i + 2] = Math.round(data[i + 2] * (1 - factor)); // Blue
}
// Put the modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
return canvas;
}The Red Image Filter tool applies a red-toned overlay to your images by adjusting the green and blue color channels. Users can control the strength of the effect using an intensity setting, allowing for subtle tinting or a dramatic monochromatic look. This tool is useful for creating stylized social media content, applying artistic color grading, or adding a specific mood to photography.