高斯模糊效果實現方案及性能對比

時間 2019-11-13

原文原文鏈接

如今愈來愈多的app在背景圖中使用高斯模糊效果，如yahoo天氣，效果作得很炫。這裏就用一個demo來談談它的不一樣實現方式及各自的優缺點。html

1. RenderScript

談到高斯模糊，第一個想到的就是RenderScript。RenderScript是由Android3.0引入，用來在Android上編寫高性能代碼的一種語言（使用C99標準）。引用官方文檔的描述：java

RenderScript runtime will parallelize work across all processors available on a device, such as multi-core CPUs, GPUs, or DSPs, allowing you to focus on expressing algorithms rather than scheduling work or load balancing.android

爲了在Android中使用RenderScript，咱們須要（直接貼官方文檔，比直譯更通俗易懂）：git

High-performance compute kernels are written in a C99-derived language.程序員
A Java API is used for managing the lifetime of RenderScript resources and controlling kernel execution.github

學習文檔：http://developer.android.com/guide/topics/renderscript/compute.htmlexpress

上面兩點總結成一句話爲：咱們須要一組compute kernels（.rs文件中編寫），及一組用於控制renderScript相關的java api(.rs文件自動生成爲java類)。因爲compute kernels的編寫須要必定的學習成本，從JELLY_BEAN_MR1開始，Androied內置了一些compute kernels用於經常使用的操做，其中就包括了Gaussian blur。canvas

下面，經過實操來說解一下RenderScript來實現高斯模糊，最終實現效果（講文字背景進行模糊處理）：api

佈局：app

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/splash"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/text"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Gaussian Blur"
android:textColor="@android :color/black"
android:layout_gravity="center_vertical"
android:textStyle="bold"
android:textSize="48sp" />
<LinearLayout
android:id="@+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#7f000000"
android:orientation="vertical"
android:layout_gravity="bottom" />
</FrameLayout>

核心代碼：

[java] view plain copy

private void applyBlur() {
image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
image.getViewTreeObserver().removeOnPreDrawListener(this);
image.buildDrawingCache();
Bitmap bmp = image.getDrawingCache();
blur(bmp, text, true);
return true;
}
});
}
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
private void blur(Bitmap bkg, View view) {
long startMs = System.currentTimeMillis();
float radius = 20;
Bitmap overlay = Bitmap.createBitmap((int)(view.getMeasuredWidth()), (int)(view.getMeasuredHeight()), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(overlay);
canvas.translate(-view.getLeft(), -view.getTop());
canvas.drawBitmap(bkg, 0, 0, null);
RenderScript rs = RenderScript.create(SecondActivity.this);
Allocation overlayAlloc = Allocation.createFromBitmap(rs, overlay);
ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(rs, overlayAlloc.getElement());
blur.setInput(overlayAlloc);
blur.setRadius(radius);
blur.forEach(overlayAlloc);
overlayAlloc.copyTo(overlay);
view.setBackground(new BitmapDrawable(getResources(), overlay));
rs.destroy();
statusText.setText("cost " + (System.currentTimeMillis() - startMs) + "ms");
}

當ImageView開始加載背景圖時，取出它的drawableCache，進行blur處理，Gaussian blur的主要邏輯在blur函數中。對於在Java中使用RenderScript，文檔中也有詳細描述，對應到咱們的代碼，步驟爲：

初始化一個RenderScript Context.
至少建立一個Allocation對象用於存儲須要處理的數據.
建立compute kernel的實例，本例中是內置的ScriptIntrinsicBlur對象.
設置ScriptIntrinsicBlur實例的相關屬性，包括Allocation, radius等.
開始blur操做，對應（forEach）.
將blur後的結果拷貝回bitmap中。

此時，咱們便獲得了一個通過高斯模糊的bitmap。

從上圖能夠看到，模糊處理花費了38ms（測試機爲小米2s），因爲Android假設每一幀的處理時間不能超過16ms（屏幕刷新頻率60fps），所以，若在主線程裏執行RenderScript操做，可能會形成卡頓現象。最好的方式是將其放入AsyncTask中執行。

此外，RenderScript在3.0引入，而一些內置的compute kernel在JELLY_BEAN_MR1中引入，爲了在低版本手機中使用這些特性，咱們不得不引入renderscript_v8兼容包，對於手Q安裝包增量的硬性指標，貌似只能放棄JELLY_BEAN_MR1如下的用戶？

有點不甘心，想一想別的解決方案吧。

2. FastBlur

因爲高斯模糊歸根結底是像素點的操做，也許在java層能夠直接操做像素點來進行模糊化處理。google一下，果不其然，一個名爲stackblur的開源項目提供了名爲fastBlur的方法在java層直接進行高斯模糊處理。

項目地址請猛戳： stackblur

ok，如今來改造咱們的程序.

[java] view plain copy

private void blur(Bitmap bkg, View view) {
long startMs = System.currentTimeMillis();
float radius = 20;
Bitmap overlay = Bitmap.createBitmap((int)(view.getMeasuredWidth()), (int)(view.getMeasuredHeight()), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(overlay);
canvas.translate(-view.getLeft(), -view.getTop());
canvas.drawBitmap(bkg, 0, 0, null);
overlay = FastBlur.doBlur(overlay, (int)radius, true);
view.setBackground(new BitmapDrawable(getResources(), overlay));
statusText.setText("cost " + (System.currentTimeMillis() - startMs) + "ms");
}

這裏，僅僅是把RenderScript相關的操做換成了FastBlur提供的api。效果圖以下：

效果還不錯，與RenderScript的實現差很少，但花費的時間卻整整多了2倍多，這徹底是沒法接受的。好吧，只能繼續探究。

3. AdvancedFastBlur

stackOverflow對於程序員來講永遠是最大的寶藏。http://stackoverflow.com/questions/2067955/fast-bitmap-blur-for-android-sdk這篇提問帖終於提供了新的解決思路：

This is a shot in the dark, but you might try shrinking the image and then enlarging it again. This can be done with Bitmap.createScaledBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter). Make sure and set the filter parameter to true. It'll run in native code so it might be faster.

它所表述的原理爲先經過縮小圖片，使其丟失一些像素點，接着進行模糊化處理，而後再放大到原來尺寸。因爲圖片縮小後再進行模糊處理，須要處理的像素點和半徑都變小，從而使得模糊處理速度加快。瞭解原理，繼續改善：

[java] view plain copy

private void blur(Bitmap bkg, View view) {
long startMs = System.currentTimeMillis();
float radius = 2;
float scaleFactor = 8;
Bitmap overlay = Bitmap.createBitmap((int)(view.getMeasuredWidth()/scaleFactor), (int)(view.getMeasuredHeight()/scaleFactor), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(overlay);
canvas.translate(-view.getLeft()/scaleFactor, -view.getTop()/scaleFactor);
canvas.scale(1 / scaleFactor, 1 / scaleFactor);
Paint paint = new Paint();
paint.setFlags(Paint.FILTER_BITMAP_FLAG);
canvas.drawBitmap(bkg, 0, 0, paint);
overlay = FastBlur.doBlur(overlay, (int)radius, true);
view.setBackground(new BitmapDrawable(getResources(), overlay));
statusText.setText("cost " + (System.currentTimeMillis() - startMs) + "ms");
}