1. Gaussian blur:


Gaussian blur is an algorithm for image blur effect, using normal distribution to smooth data.

Principle: 1.

The so-called “blur” can be understood as each pixel takes the average of the surrounding pixels. In the figure below, 2 is the middle point and all the surrounding points are 1’s. If you take the average of the surrounding points, you get a 1, which is the graphical equivalent of “blurring”, where the “middle point” loses detail.


Obviously, when calculating the average, the larger the range of values, the stronger the “blurring effect”. Below is the original image, blur radius 3 pixels, blur radius 10 pixels. The larger the blur radius, the more blurred the image.

The next question is how to assign weight to each point, since each point averages the surrounding pixels. If you use a simple average, it’s obviously not very reasonable, because the graph is continuous, the closer the points are, the more distant the points are. Therefore, the weighted average is more reasonable. The closer the distance is, the greater the weight is, and the farther the distance is, the smaller the weight is.

2. Weight of normal distribution (Gaussian distribution)

The following are density curves of normal distribution one and two dimensions respectively:


The density function of normal distribution is called “Gaussian function”. Its one-dimensional form is:

Two-dimensional Gaussian function:

3. Weight matrix

Assuming the coordinates of the central point are (0,0), then the coordinates of the eight nearest points are as follows, and the more distant points and so on:

To compute the weight matrix, you need to set the value of sigma. Assuming σ=1.5, the weight matrix of fuzzy radius 1 is as follows:

The sum of the weights of the 9 points is equal to 0.4787147. If only the weighted average of the 9 points is calculated, the sum of their weights must be equal to 1. Therefore, the above 9 values should be divided by 0.4787147 respectively to obtain the final weight matrix:

4. Calculate gaussian blur:

With the weight matrix, you can calculate the value of gaussian blur. Assume that there are 9 pixels in a black and white image, and the gray values (0-255) are as follows:

Each point is multiplied by its own weight value to obtain:

Add these nine values together and you get the gaussian blur value for the center point. Repeat the process for all points, and you get a Gaussian blurred image. If the original image is a color image, you can do Gaussian blur for RGB three channels respectively. If a point is at the edge of the image and there are not enough points around it, there are several common ways to deal with it, such as repeating the boundary points directly. The visual differences between these methods are not obvious.

2. Gauss Blur API added in Android12:

Android 12 makes it easier to apply commonly used graphics effects to views with the addition of the setRenderEffect interface:

public void setRenderEffect(@Nullable RenderEffect renderEffect) {... }Copy the code

RenderEffect is a new class that allows you to set rendering effects, such as blur and color filters, directly on a View. If the argument is passed null, the effect is removed.

Static method for Gaussian blur in RenderEffect:

public static RenderEffect createBlurEffect(float radiusX, float radiusY, @NonNull TileMode edgeTreatment)
Copy the code
  • RadiusX and radiusY refer to the radius of gaussian blur on the X and Y axes
  • EdgeTreatment is used for how to blur the content near the edges of an image, with four modes

Example:

imageView.setRenderEffect(RenderEffect.createBlurEffect(3F.3F, Shader.TileMode.CLAMP))
Copy the code

That is, the X-axis and Y-axis of the imageView are gaussian blurred with a radius of 3 pixels, and the boundary points are repeated. The effect is as follows:

CreateBlurEffect also has four parameter versions:

public static RenderEffect createBlurEffect(float radiusX, float radiusY, 
              @NonNull RenderEffect inputEffect, @NonNull TileMode edgeTreatment)
Copy the code
  • InputEffect refers to making a corresponding effect rendering first and then gaussian blur.

Rendereffects also provide a number of other corresponding methods for effects:

Note that using it on devices lower than Android 12 will cause crashes.

3. Comparison with previous methods:

RenderScript is a high-performance framework for running intensive computations on Android, and gaussian blur has traditionally been implemented using this library. Call as follows:

private fun getBlurBitmap(radius: Int, bitmap: Bitmap): Bitmap {
        val renderScript = RenderScript.create(this)
        val input: Allocation = Allocation.createFromBitmap(renderScript, bitmap)
        val output: Allocation = Allocation.createTyped(renderScript, input.type)
        val scriptIntrinsicBlur: ScriptIntrinsicBlur =
            ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript))
        scriptIntrinsicBlur.setRadius(radius.toFloat())
        scriptIntrinsicBlur.setInput(input)
        scriptIntrinsicBlur.forEach(output)
        output.copyTo(bitmap)
        return bitmap
    }
Copy the code

Get the blurred image and then set it to the corresponding View. Obviously, the API provided by Android12 makes this process much easier and more flexible.

Although the official claim that rendering performance has been improved, but using a 200K image test, after running in two ways, respectively check the memory and time, basically the same, there may be a gap in the larger image.

4. Reference:

Android12 website: developer. The android. Google. Cn/about/versi…

Android image gaussian blur solution: www.jianshu.com/p/02da487a2…

Gaussian blur algorithm: www.ruanyifeng.com/blog/2012/1…