Android realizes dynamic Gaussian Blur effect

What is Gaussian blur?

Gaussian blur, also known as Gaussian smoothing, is used in Adobe Photoshop, gimp and paint Net and other image processing software. It is usually used to reduce image noise and reduce the level of detail. The visual effect of the image generated by this blur technology is like observing the image through a translucent screen, which is significantly different from the effect of out of focus imaging of the lens and the effect in the shadow of ordinary lighting.

what? Can't you see? It doesn't matter. I can't understand it. It's copied back from Wikipedia. Let's put some pictures directly to see what the Gaussian blur is like. Because Gaussian blur is the most common in IOS, here are some pictures of IOS Netease cloud:

You can see that the background in this interface is actually obtained by blurring the small picture in the middle of Figure 1. The advantage of this is that it has good integrity and will not affect the reading of the interface content because of the abrupt transition of the picture.

So, how to achieve this effect on Android? It is recommended to use a tool officially provided in the support library, renderscript. In fact, there is more than one function of this renderscript, and some other functions can be read and learned in the official documents, which are not given here.

The reason for using this tool is simply performance. Because drawing is involved, if the performance is not good, it will be very difficult for high-quality pictures or changing needs. This tool will give full play to the computing power of the device (CPU and GPU) for calculation, and it is written in C99 derivative language. Compared with Java, the performance is greatly improved.

At this point, some students began to square, C99 derivative? What？ There's no need to worry about this. For the implementation of Gaussian blur, Google officials have given the corresponding solution. We don't need to write the corresponding script to use it, so there's no need to worry.

We divide the whole problem into two parts:

① Gaussian fuzzy realization;

② Dynamic Gaussian blur implementation

① Gaussian fuzzy realization

First of all, we need to use the support library, so the version is required:

Android SDK tools version must be greater than or equal to 22.2

Android SDK build tools version must be greater than or equal to 18.1 0

If not, please use SDK manager to upgrade.

Then create our project, and build it in the corresponding module (app is created by default) Add the following code to the gradle file:

Renderscripttargetapi: This is generally the same as the minimum version supported by the app.

All instructions here are annotated in the code. It should be understood that there are two versions of renderscript:

android. renderscript

android. support. v8. renderscript

The above code uses the first one. The usage of the second one is similar. You can try it yourself.

Let's clarify our thinking, because renderscript depends on script, and as mentioned above, script is written in C99 derived language, and scriptintrinsicblur in the code is the script corresponding to Gaussian blur algorithm. The allocation object is a helper for converting objects in Java into script scripts. Two allocation objects are created in the code to act as input and output respectively. Then the radius of Gaussian blur is set. When forEach is invoked, the script is executed, and the execution result is filled into the output corresponding Allocation. Finally, the copyTo is converted to Bitmap object to return.

design sketch:

② Dynamic Gaussian blur

Many times, we may need a picture to show it with different degrees of blur. You may have noticed the blur radius in the above method. We can do an experiment to dynamically change this value through a seekbar to see the effect:

As can be seen from the dynamic diagram, when we drag the seekbar, the seekbar can't keep up with our drag. Why? The reason is that although the performance of this rendering tool is excellent, if the quality and size of the image are high, it is often not advisable for us to directly modify the blur radius and re render.

The method is to first create a blurred image and load it into the ImageView, and then place a loaded original image ImageView on the ImageView. Use FrameLayout to make the two imageviews overlap again. Then, when we need to dynamically change the blur degree, we can change the bitmapalpha of the upper ImageView. Let's look at the renderings first:

With this method, it will slide more smoothly. (the normal speed will not be reached until the GIF is loaded.)

Here is the code reference:

Layout file:

summary

The above is the whole content of realizing dynamic Gaussian blur in Android. This paper first introduces how to realize Gaussian blur, and then introduces how to realize dynamic effect, which makes it easier for everyone to understand and learn. I hope this paper will be helpful for everyone to develop Android.