Welcome to cloud + community, get more Tencent mass technology practice dry goods oh ~
Published by tiantian P map siege lion in cloud + community
About author: damonxia(summer zhengdong), an Android engineer
preface
Gaussian blur is almost every programmer in image processing more or less heard of the term, but we may not understand its principle, only know that through Gaussian blur can achieve image frosted-glass effect.
This paper first introduces the most basic concept of image processing: convolution; Then the core content of Gaussian blur is introduced: Gaussian filter; Next, we implemented a Java version of gaussian blur algorithm from scratch, along with RenderScript version. Due to the inefficiency of our own Implementation of the Java version of Gaussian blur algorithm, we will finally introduce the well-known gaussian blur open source projects: Blurry and BlurKit-Android.
BlurDemo is a companion Demo to this article:
- Demo1: Simple implementation of Gaussian blur for the Java version.
- Demo2: Gaussian blur implementation of RenderScript.
- Demo3: BlurKit- Basic use of Android.
- Demo4: Basic use of Blurry.
convolution
This paper only discusses the image, which can be represented as a two-dimensional matrix, where each element is ARGB pixel value, so the convolution operation of the two-dimensional matrix is discussed here. Convolution is the most basic operation in image processing. It means that A two-dimensional matrix A (M*N) and A two-dimensional matrix B (M*N) perform several operations to generate A new two-dimensional matrix C (M*N), where M and N are far smaller than M and N. B is called the Convolution kernel, also known as filter matrix or template.
Here’s an example of convolution, as shown below:
In the figure above, the leftmost is the source matrix (8*8), the middle is the convolution kernel (3*3, radius 1), and the rightmost is the resulting matrix generated by convolution of the first two matrices. In the figure, if we want to find the values of the elements in the second row and column of the resulting matrix, align the center element of the convolution kernel (value 0) with the second row and column of the source matrix (value 6), then calculate the weighted sum, namely the formula in the figure, and finally get -3.
Here’s another example:
Above also shows how to make the process of convolution, such as requiring a result, the value of the first line in the first column in the matrix, the convolution kernel source at the center of the first row of the matrix in the first column, found some areas beyond the scope of the source matrix (red part), there are many ways to solve the solution here is: fill with boundary values. And then you take the weighted sum, and you get minus 5. Then compute each element of the resulting matrix in turn in the same way.
Generally speaking, the convolution kernel needs to satisfy:
- Both widths and heights are odd so that we have the concept of radius and center.
- The sum of the elements is 1.
filter
Mean filter
Mean Filter (Mean Filter) is the simplest Filter, which is the roughest method of blurring images. Gaussian Filter is the advanced version of Mean Filter. In fact, the different filters are changing the convolution kernel, changing the resulting matrix, and the intermediate steps are all the same, finding the weighted sum. The convolution kernel of the mean filter is usually an m* M matrix, where each element is 1/(m^2), and it can be seen that the sum of the elements of the convolution kernel is 1. For example, a 3 by 3 mean filter, each element of the convolution kernel is 1/9.
Gaussian filter
The Gaussian filter is an advanced version of the mean filter. The only difference is that each element of the convolution kernel of the mean filter is the same, while the elements of the convolution kernel of the Gaussian filter obey the Gaussian distribution.
Gaussian filter is based on two-dimensional Gaussian distribution function, so the two-dimensional Gaussian distribution function is introduced first. The two-dimensional Gaussian distribution function and figure are as follows:
Where x and y represent the distance between the abscissa and ordinate of an element in the convolution kernel and the center point. Sigma controls how flat the curve is, and the higher the value, the flatter the curve, the lower the peak. We can easily see that the value is maximum when x=0 and y=0, that is, the center weight of the convolution kernel is maximum.
For example, if you have an element in the convolution kernel that is 2 away from the center, 1 away from the center, then x=2,y=1, you can figure out the value of that element. And of course, in order to make sure that the sum of the convolution kernels is equal to 1, each of the final elements has to be divided by the sum of all the elements in the convolution kernels.
How do you determine the size of the convolution kernel? After determining sigma, although the gaussian distribution function value of the element is always non-negative no matter how far it is from the center point, according to experience, the radius of the convolution kernel is 3*sigma, so the width and height is 6*sigma+1.
If the convolution kernel of the Gaussian filter is two-dimensional (m*n), the algorithm complexity is O(M* n* m*n), which is relatively high. Therefore, the algorithm complexity is optimized next.
The one-dimensional Gaussian distribution function and figure are as follows:
In fact, the two-dimensional Gaussian distribution function can be decomposed into two one-dimensional Gaussian distribution functions multiplied as follows:
So the convolution of the original source matrix with the two-dimensional convolution kernel is equivalent to the convolution of the source matrix with the one-dimensional convolution kernel of 1*m, and then with the one-dimensional convolution kernel of m*1. The radius of the one-dimensional convolution kernel is still 3 times sigma. The algorithm complexity becomes O(2*m* m* N).
Implementation of Gaussian blur
Java version
Here, a simple version of Gaussian blur is achieved. By convolving the source matrix with a one-dimensional gaussian filter in the horizontal and vertical directions, the blur degree of the image can be controlled by setting the size of Sigma. The larger the value, the more blurred the image is. However, the algorithm is still slow and it is recommended to use RenderScript directly or a mature open source project directly.
Because the code is too long, can not capture, therefore directly give Gist address: https://gist.github.com/xiazdong/d57bf5441f56db197163a5de69dfa65f
The effect is as follows:
RenderScript version
RenderScript is an Android high-performance framework for performing computationally intensive tasks in parallel. It takes full advantage of multi-core cpus and Gpus. You don’t need to know how to schedule your tasks, just what they do. We won’t go into RenderScript here, because RenderScript already provides a class that implements Gaussian blur: ScriptIntrinsicBlur.
It’s very simple to implement:
The open source project
There are a number of open source projects that blur images on Android. Blurry, for example, is dedicated to blurring bitmaps and Views. Blurkit-android can also gaussian blur bitmaps (internally with RenderScript), but the most interesting feature is the frosted-glass mask, which looks like this:
Blurkit-android supports a minimum version of Android 4.1 (API 16), so the library cannot be used if the application needs to support a minimum version of 4.0, which Blurry supports as 3.0.
BlurKit-Android
The configuration process is as follows:
- Set this in build.gradle:
The compile 'com. Wonderkiln: blurkit: 1.0.0'And set it in defaultConfigrenderscriptTargetApi 24andrenderscriptSupportModeEnabled true. - Add it at the beginning of Application onCreate()
BlurKit.init(this);.
Blurkit.getinstance ().blur(Bitmap SRC, int radius); Implement Gaussian blur and write the result graph of Gaussian blur to SRC, where 0
The library also provides fastBlur() for faster Gaussian blur, which differs from Blur() in that fastBlur() samples images before Gaussian blur, making them several times smaller and faster. This speed – up method is reasonable because gaussian blur does not require very accurate information from the original image.
One of the most interesting aspects of BlurKit-Android is that it offers a Gaussian blur mask, which changes as the content underneath changes. Use as follows:
This Layout can realize real-time Gaussian blur of the content below this Layout.
Blurry
To configure: add compile ‘jp.wasabeef:blurry:2.1.1’ to build.gradle.
The usage method is as follows:
Overall, both libraries are very easy to use.
reading
Android image processing series – several optimization methods of Gaussian blur
IOS image processing series – Double exposure technology of GPUImage implementation
IOS Image processing series – GPUImage source code interpretation (ii)
This article has been authorized by the author yunjia community published, reproduced please indicate the source of the article