Blur an image
Blur transformation allows users to apply a blur effect to an image. It is a type of image filter that reduces the amount of detail and sharpness in an image, creating a blurrier appearance.
The transformation is done through the Gaussian Blur technique. This method produces a soft and subtle blurring of the image. The use of Gaussian blur with a blur radius of float.
Params
Sigma (s
)
This parameter helps users to determine the amount of blurring applied to the image.
The sigma value of the Gaussian kernel controls the amount of blurring applied to the image. A higher sigma value will result in more blurring, while a lower sigma value will result in less blurring.
The default value of s
is 0.3
. The minimum value is 0.3
and the maximum is 100
, where sigma = 1 + radius / 2
.
When used without parameters, it performs a fast 3x3 box blur (equivalent to a box linear filter). When a sigma is provided, it performs a slower, more accurate Gaussian blur.
- Original
- Blur with sigma=5
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_pink_flower.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.blur(s:5)/images/transformation/basic_pink_flower.jpeg" />
DPR (dpr
)
Device Pixel Ratio (DPR) refers to the ratio between physical pixels on a device's screen and logical pixels that are used to define the size and position of elements on a web page. In the context of blurring an image, DPR is not directly related to the blurring process itself, but it may affect how the blurred image is displayed on different devices.
The default dpr
value is 1
. The minimum value users can set is 0.1
and the maximum is 5
and floating point numbers are valid parameters.
In image processing, the amount of blurring or smoothing applied to an image can be adjusted using the sigma and dpr values. These values are multiplied together to produce the desired output. For instance, if we have (sigma=3, dpr=5), then the resulting output will be 15 (3 x 5 = 15). Similarly, (sigma=5, dpr=3) and (sigma=15, dpr=1) will also give an output of 15.
- Original
- Blur with (sigma=3,dpr=5)
- Blur with (sigma=5,dpr=3)
- Blur with (sigma=15,dpr=1)
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/baseball-game.jpg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.blur(s:3,dpr:5)/images/transformation/baseball-game.jpg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.blur(s:5,dpr:3)/images/transformation/baseball-game.jpg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.blur(s:15,dpr:1)/images/transformation/baseball-game.jpg" />