async function processImage(originalImg, radius = 5) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = originalImg.naturalWidth;
canvas.height = originalImg.naturalHeight;
// Apply Gaussian blur using the filter property
// The radius parameter for a CSS blur filter is a CSS <length>,
// not necessarily an integer, but we'll treat it as pixels here.
// A larger value will create more blur.
ctx.filter = `blur(${radius}px)`;
// Draw the image onto the canvas. The filter will be applied during this drawing.
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Note: Applying filter directly to ctx might not be supported in all older browsers.
// For wider compatibility, a manual convolution (more complex) or an SVG filter could be used.
// However, modern browsers generally support ctx.filter.
// If direct ctx.filter is not desired or has issues,
// an alternative is to create an SVG filter and apply it,
// or implement the Gaussian blur algorithm manually by manipulating pixel data.
// For simplicity and adherence to using built-in Web APIs where possible,
// ctx.filter is the most straightforward approach.
// To ensure the filter is applied before returning, we can draw the canvas
// to another canvas or get its image data, but in most cases,
// just drawing and returning the canvas is enough as the filter is applied
// to subsequent drawing operations on that context.
// If the filter was not applied before drawing, you would draw the image first,
// then apply the filter, then draw the filtered image (e.g., from another canvas or self).
// However, setting ctx.filter *before* drawing ensures the draw operation itself is filtered.
return canvas;
}The Image Gaussian Blur Filter tool allows users to apply a Gaussian blur effect to images, enhancing visual aesthetics by softening details and reducing sharpness. This tool is useful for creating backgrounds, focusing attention on specific elements in an image, and improving the overall composition. Whether for graphic design, photography editing, or web development, this tool provides a simple way to manipulate and enhance images with a customizable blur radius.