使用RenderScript实现高斯模糊(毛玻璃/磨砂)效果

前言

逛instagram的时候，偶然发现，instagram的对话框设计的很有意思，如下图：  

它的dialog的背景竟然是毛玻璃效果的，在我看来真漂亮，恩，对话框和迪丽热巴都漂亮。看到这么好的效果，当然就要开始搞事情了，自己动手实现差不多的效果。最终的实现效果如下图：

分别实现了对话框背景的虚化和手动调节虚化程度。

实现方法对比

最开始想要实现毛玻璃效果时，我是一脸懵逼的，不知道如何下手。幸亏，有万能的Google。搜索之后发现常见的实现方法有4种，分别是：

• RenderScript
• Java算法
• NDK算法
• openGL

处理一整张图片这么大计算量的工作，openGL的性能最好，而用java实现肯定是最差的了。而RenderScript和NDK的性能相当，但是你懂得，NDK和openGL我无可奈何，综合考虑，RenderScript应该是最适合的。

但并不是说RenderScript就是完全没有问题的：

1. 模糊半径(radius)越大，性能要求越高，模糊半径不能超过25，所以并不能得到模糊度非常高的图片。
2. ScriptIntrinsicBlur在API 17时才被引入，如果需要在Android 4.2以下的设备上实现，就需要引入RenderScript Support Library，当然，安装包体积会相应的增大。

RenderScript实现

首先在app目录下build.gradle文件中添加如下代码：

1. defaultConfig { 
2.         applicationId "io.github.marktony.gaussianblur" 
3.         minSdkVersion 19 
4.         targetSdkVersion 25 
5.         versionCode 1 
6.         versionName "1.0" 
7.         renderscriptTargetApi 19 
8.         renderscriptSupportModeEnabled true 
9.     }  

RenderScriptIntrinsics提供了一些可以帮助我们快速实现各种图片处理的操作类，例如，ScriptIntrinsicBlur，可以简单高效实现 高斯模糊效果。

1. package io.github.marktony.gaussianblur; 
2.  
3. import android.content.Context; 
4. import android.graphics.Bitmap; 
5. import android.support.annotation.IntRange; 
6. import android.support.annotation.NonNull; 
7. import android.support.v8.renderscript.Allocation; 
8. import android.support.v8.renderscript.Element; 
9. import android.support.v8.renderscript.RenderScript; 
10. import android.support.v8.renderscript.ScriptIntrinsicBlur; 
11.  
12. public class RenderScriptGaussianBlur { 
13.  
14.     private RenderScript renderScript; 
15.  
16.     public RenderScriptGaussianBlur(@NonNull Context context) { 
17.         this.renderScript = RenderScript.create(context); 
18.     } 
19.  
20.     public Bitmap gaussianBlur(@IntRange(from = 1, to = 25) int radius, Bitmap original) { 
21.         Allocation input = Allocation.createFromBitmap(renderScript, original); 
22.         Allocation output = Allocation.createTyped(renderScript, input.getType()); 
23.         ScriptIntrinsicBlur scriptIntrinsicBlur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript)); 
24.         scriptIntrinsicBlur.setRadius(radius); 
25.         scriptIntrinsicBlur.setInput(input); 
26.         scriptIntrinsicBlur.forEach(output); 
27.         output.copyTo(original); 
28.         return original; 
29.     } 
30.  
31. }  

然后就可以直接使用RenderScriptGaussianBlur，愉快地根据SeekBar的值，实现不同程度的模糊了。

1. package io.github.marktony.gaussianblur; 
2.  
3. import android.content.DialogInterface; 
4. import android.graphics.Bitmap; 
5. import android.graphics.BitmapFactory; 
6. import android.support.v7.app.AlertDialog; 
7. import android.support.v7.app.AppCompatActivity; 
8. import android.os.Bundle; 
9. import android.util.Log; 
10. import android.view.View; 
11. import android.view.Window; 
12. import android.view.WindowManager; 
13. import android.widget.FrameLayout; 
14. import android.widget.ImageView; 
15. import android.widget.LinearLayout; 
16. import android.widget.SeekBar; 
17. import android.widget.TextView; 
18.  
19. public class MainActivity extends AppCompatActivity { 
20.  
21.     private ImageView imageView; 
22.     private ImageView container; 
23.     private LinearLayout layout; 
24.     private TextView textViewProgress; 
25.     private RenderScriptGaussianBlur blur; 
26.  
27.     @Override 
28.     protected void onCreate(Bundle savedInstanceState) { 
29.         super.onCreate(savedInstanceState); 
30.         setContentView(R.layout.activity_main); 
31.  
32.         imageView = (ImageView) findViewById(R.id.imageView); 
33.         container = (ImageView) findViewById(R.id.container); 
34.  
35.         container.setVisibility(View.GONE); 
36.  
37.         layout = (LinearLayout) findViewById(R.id.layout); 
38.  
39.         layout.setVisibility(View.VISIBLE); 
40.  
41.         SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar); 
42.         textViewProgress = (TextView) findViewById(R.id.textViewProgress); 
43.         TextView textViewDialog = (TextView) findViewById(R.id.textViewDialog); 
44.         blur = new RenderScriptGaussianBlur(MainActivity.this); 
45.  
46.         seekBar.setMax(25); 
47.         seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { 
48.             @Override 
49.             public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { 
50.                 textViewProgress.setText(String.valueOf(progress)); 
51.             } 
52.  
53.             @Override 
54.             public void onStartTrackingTouch(SeekBar seekBar) { 
55.  
56.             } 
57.  
58.             @Override 
59.             public void onStopTrackingTouch(SeekBar seekBar) { 
60.                 int radius = seekBar.getProgress(); 
61.                 if (radius < 1) { 
62.                     radius = 1; 
63.                 } 
64.                 Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); 
65.                 imageView.setImageBitmap(blur.gaussianBlur(radius, bitmap)); 
66.             } 
67.         }); 
68.  
69.         textViewDialog.setOnClickListener(new View.OnClickListener() { 
70.             @Override 
71.             public void onClick(View v) { 
72.  
73.                 container.setVisibility(View.VISIBLE); 
74.  
75.                 layout.setDrawingCacheEnabled(true); 
76.                 layout.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_LOW); 
77.  
78.                 Bitmap bitmap = layout.getDrawingCache(); 
79.  
80.                 container.setImageBitmap(blur.gaussianBlur(25, bitmap)); 
81.  
82.                 layout.setVisibility(View.INVISIBLE); 
83.  
84.                 AlertDialog dialog = new AlertDialog.Builder(MainActivity.this).create(); 
85.                 dialog.setTitle("Title"); 
86.                 dialog.setMessage("Message"); 
87.                 dialog.setButton(DialogInterface.BUTTON_POSITIVE, "OK", new DialogInterface.OnClickListener() { 
88.                     @Override 
89.                     public void onClick(DialogInterface dialog, int which) { 
90.                         dialog.dismiss(); 
91.                     } 
92.                 }); 
93.                 dialog.setButton(DialogInterface.BUTTON_NEGATIVE, "Cancel", new DialogInterface.OnClickListener() { 
94.                     @Override 
95.                     public void onClick(DialogInterface dialog, int which) { 
96.  
97.                     } 
98.                 }); 
99.                 dialog.setOnCancelListener(new DialogInterface.OnCancelListener() { 
100.                     @Override 
101.                     public void onCancel(DialogInterface dialog) { 
102.  
103.                     } 
104.                 }); 
105.  
106.                 dialog.setOnCancelListener(new DialogInterface.OnCancelListener() { 
107.                     @Override 
108.                     public void onCancel(DialogInterface dialog) { 
109.                         container.setVisibility(View.GONE); 
110.                         layout.setVisibility(View.VISIBLE); 
111.                     } 
112.                 }); 
113.  
114.                 dialog.show(); 
115.             } 
116.         }); 
117.  
118.     } 
119. }  

在代码里做了一些view的可见性的操作，比较简单，相信你能看懂的。和instagram中dialog的实现有一点不同的是，我没有截取整个页面的bitmap，只是截取了actionbar下的内容，如果一定要实现一样的效果，调整一下页面的布局就可以了。这里不多说了。

是不是很简单呢?

轮子

除了RenderScript外，还有一些优秀的轮子：

• 500px-android-blur
• Blurry
• android-stackblur
• FastBlur:Java算法实现

BlurTestAndroid对不同类库的实现方式、采取的算法和所耗费的时间做了统计和比较，你也可以下载它的demo app，自行测试。

作者：Tonny

来源：51CTO