function processImage(originalImg, radius = 3) {
const canvas = document.createElement('canvas');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const filterRadius = parseFloat(radius);
if (filterRadius > 0) {
// A low-pass filter in spatial image processing allows low-frequency signals to pass
// while attenuating high-frequency details (such as edges and noise).
// This process is functionally equivalent to applying a blur.
// We utilize the Canvas 2D API's built-in Gaussian blur to achieve an optimal low-pass filter.
ctx.filter = `blur(${filterRadius}px)`;
}
// Draw the processed image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Reset filter to avoid side effects if context is reused
ctx.filter = 'none';
return canvas;
}The Image Low Pass Filter Tool allows users to reduce high-frequency details in an image, such as sharp edges and digital noise, by applying a blur effect. This tool is useful for smoothing out textures, softening backgrounds, or prepping images for further processing where fine-grained detail might be undesirable.