Please bookmark this page to avoid losing your image tool!

Image Blur Filter Application

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, blurRadius = 5) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Ensure blurRadius is a non-negative number
  const radius = Math.max(0, Number(blurRadius));

  canvas.width = originalImg.naturalWidth;
  canvas.height = originalImg.naturalHeight;

  // Apply the blur filter
  // Note: The canvas filter property is a CSS filter string.
  // It affects how elements are drawn onto the canvas.
  ctx.filter = `blur(${radius}px)`;

  // Draw the original image onto the canvas. The filter will be applied.
  ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

  // If you want the blur to be "baked" into the pixel data itself,
  // rather than just a display effect, you would typically implement
  // a convolution filter (e.g., Gaussian blur).
  // However, for simple blurring, the CSS filter on the context is much easier
  // and widely supported for display purposes.

  // If a more "permanent" blur is needed (i.e., pixel data modified),
  // we would have to implement a manual blur algorithm or use a library.
  // The prompt prefers built-in Web APIs. So, we'll stick to the CSS filter for now.

  // To make the blur "permanent" in the sense that further drawings
  // on this canvas are not blurred, or if you want to get blurred image data,
  // you could draw the blurred image to *another* canvas.
  // For this tool's purpose, returning this canvas is sufficient as it will display blurred.

  // It's important to note that ctx.filter applies to *subsequent drawing operations*.
  // So, drawing the image *after* setting the filter is correct.

  return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

The Image Blur Filter Application is a tool designed to apply a blur effect to images with customizable intensity. Users can adjust the blur radius to achieve their desired level of blurriness, making it suitable for a variety of use cases such as creating soft backgrounds, adding artistic effects, obscuring sensitive information, or enhancing privacy in images. Simply upload an image, set your preferred blur radius, and download the processed image for use in personal or professional projects.