Android 圖片高斯模糊解決方案

近年來,圖片高斯模糊備受設(shè)計師的青睞,在各大知名APP中,如微信、手機QQ、網(wǎng)易云音樂等等都有對背景高斯圖模糊的設(shè)計,在Adnroid 中,現(xiàn)在常用的圖片高斯模糊技術(shù)有三種:RenderScript 、fastBlur對RenderScript和fastBlur的優(yōu)化,接下來分別分析各自的優(yōu)缺點和在項目中該使用哪個解決方案。先上一張效果圖:

高斯模糊效果圖.png

1,RenderScript

RenderScript是在Android上的高性能運行密集型運算的框架,RenderScript主要用于數(shù)據(jù)并行計算,尤其對圖像處理、攝影分析和計算機視覺特別有用。RenderScript是在Android3.0(API 11)引入的。而Android圖片高斯模糊處理,通常也是用這個庫來完成。它提供了我們Java層調(diào)用的API,實際上是在c/c++ 層來處理的,所以它的效率和性能通常是最高的。要使用RenderScript完成圖片高斯模糊只需要以下幾步:
(1) 初始化一個RenderScript Context:RenderScript 上下文環(huán)境通過create(Context)方法來創(chuàng)建,它保證RenderScript的使用并且提供一個控制后續(xù)所有RenderScript對象(如:ScriptIntrinsicBlur、Allocation等)生命周期的對象。

(2)通過Script至少創(chuàng)建一個Allocation:一個Allocation是提供存儲大量可變數(shù)據(jù)的RenderScript 對象。在內(nèi)核中,Allocation作為輸入和輸出,在內(nèi)核中通過rsGetElementAt_type ()rsSetElementAt_type()方法來訪問Allocation當script全局綁定的時候。使用createFromBitmapcreateTyped來創(chuàng)建Allocation。

(3)創(chuàng)建ScriptIntrinsic:它內(nèi)置了RenderScript 的一些通用操作,如高斯模糊、扭曲變換、圖像混合等等,更多的操作請看ScriptIntrinsic的子類,本文要用的高斯模糊處理就是用的它的子類ScriptIntrinsicBlur。
(4)填充數(shù)據(jù)到Allocations:除了使用方法createFromBitmap創(chuàng)建的Allocation外,其它的第一次創(chuàng)建時都是填充的空數(shù)據(jù)。

(5)** 設(shè)置模糊半徑**:設(shè)置一個模糊的半徑,其值為 0-25。

(6) 啟動內(nèi)核,調(diào)用方法處理:調(diào)用forEach 方法模糊處理。

(7) ** 從Allocation 中拷貝數(shù)據(jù)**:為了能在Java層訪問Allocation的數(shù)據(jù),用Allocation其中一個copy方法來拷貝數(shù)據(jù)。
(8) 銷毀RenderScript對象:可以用destroy方法來銷毀RenderScript對象或者讓它可以被垃圾回收,destroy 之后,就能在用它控制的RenderScript對象了(比如在銷毀了之后,再調(diào)用ScriptIntrinsic或者Allocation的方法是要拋異常的)。

以上幾個步驟就可以完成的圖片的高斯模糊,看一下對應(yīng)的代碼:

private static Bitmap rsBlur(Context context,Bitmap source,int radius){

        Bitmap inputBmp = source;
        //(1)
        RenderScript renderScript =  RenderScript.create(context);

        Log.i(TAG,"scale size:"+inputBmp.getWidth()+"*"+inputBmp.getHeight());

        // Allocate memory for Renderscript to work with
        //(2)
        final Allocation input = Allocation.createFromBitmap(renderScript,inputBmp);
        final Allocation output = Allocation.createTyped(renderScript,input.getType());
        //(3)
        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur scriptIntrinsicBlur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        //(4)
        scriptIntrinsicBlur.setInput(input);
        //(5)
        // Set the blur radius
        scriptIntrinsicBlur.setRadius(radius);
        //(6)
        // Start the ScriptIntrinisicBlur
        scriptIntrinsicBlur.forEach(output);
        //(7)
        // Copy the output to the blurred bitmap
        output.copyTo(inputBmp);
        //(8)
        renderScript.destroy();

    return inputBmp;
    }

上面對應(yīng)的步驟已經(jīng)用序號標出,代碼就十行左右,很簡單。這就十Android提供給我們的可以處理圖片高斯模糊的庫。性能比較好,因為是在c/c++層做的處理。但是它只能在API 17或者更高的版本使用, 看一下文檔的說明:

RC——API.png

如上圖,紅框中標記的ScriptIntrinsicBlur 是在API 17加入的,因此低版本的手機是用不了,為了能兼容低版本的手機,我們還得探索其他方案。

RenderScript 兼容包:
所幸的是,Google 為了兼容低版本也可以用RenderScript,加了一個兼容包,android.support.v8.renderscript ,使用support.v8.renderscript就能兼容到Android 2.3版本(API 9),現(xiàn)在市面上估計沒有比2.3版本還低的手機了(4.x 的手機都不多了)。使用兼容包和使用原生的RenderScript完全一樣,代碼還是上面的代碼。只是需要在app 的build.gradle添加如下的代碼

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        minSdkVersion 9
        targetSdkVersion 19

        // 使用support.v8.renderscript
        renderscriptTargetApi 18
        renderscriptSupportModeEnabled true

    }
}

只要添加上面的2行代碼就行了。但是有2點需要注意:

注意:
1,Android SDK Tools revision 22.2 or higher(Tools 需要22.2或者更高的版本)
2,Android SDK Build-tools revision 18.1.0 or higher( Build-tools 需要18.1.0或者更高的版本)
如果沒有達到的話,通過Anroid SDK Manager 更新安裝。

有了兼容包,那么RenderScript就是一個完美的解決方案了嗎?答案是NO,還有2個缺點:

  • 雖然RenderScript效率不錯,但是處理尺寸大一點的圖片還是達不到16ms每一幀,需要優(yōu)化
  • 雖然兼容包能解決API17以下不能使用的問題,但是引入兼容包又帶來了新的問題,APK 的包大小增大了,support.v8.renderscript有160k,現(xiàn)在各家的APP都在要求APK瘦身,對于那種本來就很大的APK來說還是不能接受的。

因此我們還要找一下其他方案,接下來看一下fastBlur算法。

2,fastBlur

fastBlur 是除了RenderScript 之外的另一種方法,它直接在Java層做圖片的模糊處理。對每個像素點應(yīng)用高斯模糊計算、最后在合成Bitmap。請看源碼:

 /**
     * Stack Blur v1.0 from
     * http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
     * Java Author: Mario Klingemann <mario at quasimondo.com>
     * http://incubator.quasimondo.com
     *
     * created Feburary 29, 2004
     * Android port : Yahel Bouaziz <yahel at kayenko.com>
     * http://www.kayenko.com
     * ported april 5th, 2012
     *
     * This is a compromise between Gaussian Blur and Box blur
     * It creates much better looking blurs than Box Blur, but is
     * 7x faster than my Gaussian Blur implementation.
     *
     * I called it Stack Blur because this describes best how this
     * filter works internally: it creates a kind of moving stack
     * of colors whilst scanning through the image. Thereby it
     * just has to add one new block of color to the right side
     * of the stack and remove the leftmost color. The remaining
     * colors on the topmost layer of the stack are either added on
     * or reduced by one, depending on if they are on the right or
     * on the left side of the stack.
     *
     * If you are using this algorithm in your code please add
     * the following line:
     * Stack Blur Algorithm by Mario Klingemann <mario@quasimondo.com>
     */

    private static Bitmap fastBlur(Bitmap sentBitmap, float scale, int radius) {

        int width = Math.round(sentBitmap.getWidth() * scale);
        int height = Math.round(sentBitmap.getHeight() * scale);
        sentBitmap = Bitmap.createScaledBitmap(sentBitmap, width, height, false);

        Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);

        if (radius < 1) {
            return (null);
        }

        int w = bitmap.getWidth();
        int h = bitmap.getHeight();

        int[] pix = new int[w * h];
        Log.e("pix", w + " " + h + " " + pix.length);
        bitmap.getPixels(pix, 0, w, 0, 0, w, h);

        int wm = w - 1;
        int hm = h - 1;
        int wh = w * h;
        int div = radius + radius + 1;

        int r[] = new int[wh];
        int g[] = new int[wh];
        int b[] = new int[wh];
        int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
        int vmin[] = new int[Math.max(w, h)];

        int divsum = (div + 1) >> 1;
        divsum *= divsum;
        int dv[] = new int[256 * divsum];
        for (i = 0; i < 256 * divsum; i++) {
            dv[i] = (i / divsum);
        }

        yw = yi = 0;

        int[][] stack = new int[div][3];
        int stackpointer;
        int stackstart;
        int[] sir;
        int rbs;
        int r1 = radius + 1;
        int routsum, goutsum, boutsum;
        int rinsum, ginsum, binsum;

        for (y = 0; y < h; y++) {
            rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
            for (i = -radius; i <= radius; i++) {
                p = pix[yi + Math.min(wm, Math.max(i, 0))];
                sir = stack[i + radius];
                sir[0] = (p & 0xff0000) >> 16;
                sir[1] = (p & 0x00ff00) >> 8;
                sir[2] = (p & 0x0000ff);
                rbs = r1 - Math.abs(i);
                rsum += sir[0] * rbs;
                gsum += sir[1] * rbs;
                bsum += sir[2] * rbs;
                if (i > 0) {
                    rinsum += sir[0];
                    ginsum += sir[1];
                    binsum += sir[2];
                } else {
                    routsum += sir[0];
                    goutsum += sir[1];
                    boutsum += sir[2];
                }
            }
            stackpointer = radius;

            for (x = 0; x < w; x++) {

                r[yi] = dv[rsum];
                g[yi] = dv[gsum];
                b[yi] = dv[bsum];

                rsum -= routsum;
                gsum -= goutsum;
                bsum -= boutsum;

                stackstart = stackpointer - radius + div;
                sir = stack[stackstart % div];

                routsum -= sir[0];
                goutsum -= sir[1];
                boutsum -= sir[2];

                if (y == 0) {
                    vmin[x] = Math.min(x + radius + 1, wm);
                }
                p = pix[yw + vmin[x]];

                sir[0] = (p & 0xff0000) >> 16;
                sir[1] = (p & 0x00ff00) >> 8;
                sir[2] = (p & 0x0000ff);

                rinsum += sir[0];
                ginsum += sir[1];
                binsum += sir[2];

                rsum += rinsum;
                gsum += ginsum;
                bsum += binsum;

                stackpointer = (stackpointer + 1) % div;
                sir = stack[(stackpointer) % div];

                routsum += sir[0];
                goutsum += sir[1];
                boutsum += sir[2];

                rinsum -= sir[0];
                ginsum -= sir[1];
                binsum -= sir[2];

                yi++;
            }
            yw += w;
        }
        for (x = 0; x < w; x++) {
            rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
            yp = -radius * w;
            for (i = -radius; i <= radius; i++) {
                yi = Math.max(0, yp) + x;

                sir = stack[i + radius];

                sir[0] = r[yi];
                sir[1] = g[yi];
                sir[2] = b[yi];

                rbs = r1 - Math.abs(i);

                rsum += r[yi] * rbs;
                gsum += g[yi] * rbs;
                bsum += b[yi] * rbs;

                if (i > 0) {
                    rinsum += sir[0];
                    ginsum += sir[1];
                    binsum += sir[2];
                } else {
                    routsum += sir[0];
                    goutsum += sir[1];
                    boutsum += sir[2];
                }

                if (i < hm) {
                    yp += w;
                }
            }
            yi = x;
            stackpointer = radius;
            for (y = 0; y < h; y++) {
                // Preserve alpha channel: ( 0xff000000 & pix[yi] )
                pix[yi] = ( 0xff000000 & pix[yi] ) | ( dv[rsum] << 16 ) | ( dv[gsum] << 8 ) | dv[bsum];

                rsum -= routsum;
                gsum -= goutsum;
                bsum -= boutsum;

                stackstart = stackpointer - radius + div;
                sir = stack[stackstart % div];

                routsum -= sir[0];
                goutsum -= sir[1];
                boutsum -= sir[2];

                if (x == 0) {
                    vmin[y] = Math.min(y + r1, hm) * w;
                }
                p = x + vmin[y];

                sir[0] = r[p];
                sir[1] = g[p];
                sir[2] = b[p];

                rinsum += sir[0];
                ginsum += sir[1];
                binsum += sir[2];

                rsum += rinsum;
                gsum += ginsum;
                bsum += binsum;

                stackpointer = (stackpointer + 1) % div;
                sir = stack[stackpointer];

                routsum += sir[0];
                goutsum += sir[1];
                boutsum += sir[2];

                rinsum -= sir[0];
                ginsum -= sir[1];
                binsum -= sir[2];

                yi += w;
            }
        }

        Log.e("pix", w + " " + h + " " + pix.length);
        bitmap.setPixels(pix, 0, w, 0, 0, w, h);

        return (bitmap);
    }

如上所示,就一個方法,使用這種方式不會有兼容性問題,也不會引入jar包導致APK變大。但是這種方法的效率是非常低的,想想也知道,因為是在Java 層處理,速度當然慢。測試了一張800 x 450 的圖片,RenderScript平均25 ms 左右,fastBlur平均310ms 左右,相當于差了10倍。還有就是使用這種方式是把圖片全部加載到內(nèi)存,如果圖片較大,容易導致OOM。

3,對RenderScript 和fastBlur 的優(yōu)化

上面對RenderScript 和fastBlur做了分析,雖然RenderScript的效率要比fastBlur 好很多,但是還是有可能達不到16ms每一幀的要求而導致卡頓。所以需要進行優(yōu)化。

思路: 在stackOverFlow上有提供優(yōu)化思路(地址:http://stackoverflow.com/questions/2067955/fast-bitmap-blur-for-android-sdk
,原理是這樣的:通過縮小圖片,使其丟失一些像素點,接著進行模糊化處理,然后再放大到原來尺寸。由于圖片縮小后再進行模糊處理,需要處理的像素點和半徑都變小,從而使得模糊處理速度加快。

因此我們只需要將原來的圖片縮小,然后在用RenderScript 或者fastBlur 處理,就可以加快速度了,添加如下代碼:

        int width = Math.round(source.getWidth() * scale);
        int height = Math.round(source.getHeight() * scale);

        Bitmap inputBmp = Bitmap.createScaledBitmap(source,width,height,false);

renderScript 高斯模糊的完整方法如下:

private static Bitmap rsBlur(Context context,Bitmap source,int radius,float scale){

        Log.i(TAG,"origin size:"+source.getWidth()+"*"+source.getHeight());
        int width = Math.round(source.getWidth() * scale);
        int height = Math.round(source.getHeight() * scale);

        Bitmap inputBmp = Bitmap.createScaledBitmap(source,width,height,false);

        RenderScript renderScript =  RenderScript.create(context);

        Log.i(TAG,"scale size:"+inputBmp.getWidth()+"*"+inputBmp.getHeight());

        // Allocate memory for Renderscript to work with

        final Allocation input = Allocation.createFromBitmap(renderScript,inputBmp);
        final Allocation output = Allocation.createTyped(renderScript,input.getType());

        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur scriptIntrinsicBlur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        scriptIntrinsicBlur.setInput(input);

        // Set the blur radius
        scriptIntrinsicBlur.setRadius(radius);

        // Start the ScriptIntrinisicBlur
        scriptIntrinsicBlur.forEach(output);

        // Copy the output to the blurred bitmap
        output.copyTo(inputBmp);


        renderScript.destroy();
    return inputBmp;
    }

先對Bitmap 縮小,然后再模糊處理。

Note:縮小的系數(shù)應(yīng)該為2的整數(shù)次冪 ,即上面代碼中的scale應(yīng)該為1/2、1/4、1/8 ... 參考BitmapFactory.Options 對圖片縮放 的inSample系數(shù)。據(jù)前輩們經(jīng)驗,一般scale = 1/8 為佳。

看一下使用RenderScript和fastBlur 以及優(yōu)化后,高斯模糊一張圖片所花時間的對比表,測試機型為魅族metal,系統(tǒng)為Android 5.1,如下:

模糊時間對比表.png

如上圖:以1080 x 1349 的圖片為例(每一個半徑取5次的均值),使用原尺寸用兩種方法進行高斯模糊,RenderScript的效率比fastBlur高,大約快10倍,但是都超過了16ms,而使用優(yōu)化方法后,使其先縮小8倍,再模糊,2種方法效率都有質(zhì)的提高,RenderScript模糊時間不足5ms,fastBlur 也接近16ms,半徑為15以下小與16ms。

因此不管使用哪種方法模糊圖片,都應(yīng)該先優(yōu)化,再模糊。

4,優(yōu)缺點比較及圖片高斯模糊方案

RenderScript 優(yōu)點:

  • 使用簡單,原生的API,十行左右的代碼就能完成高斯模糊
  • 效率較高,是在c/c++層做處理

RenderScript 缺點:

  • API 17以上才能使用
  • 用兼容包的話,會導致APK 體積增大,support包約160k

fastBlur的優(yōu)點:

  • 沒有兼容版本問題
  • 不用引入三方包,不會增加APK大小

fastBlur的缺點:

  • 效率很低,在Java層做處理
  • 將Bitmap全部加載到內(nèi)存,較大圖片容易OOM

以上對比了2種方法的優(yōu)缺點,各有優(yōu)劣,那么我們到底選擇哪一種呢?這個需要看情況而定,給出下面2種方案:
高斯模糊方案一: 如果APK本身較小,可以接受增大的160k體積,那么直接使用兼容包的RenderScript (注意需要先優(yōu)化,用上面的先縮小再模糊)。
高斯模糊方案二:如果不想APK體積增大,那么在模糊的時候做判斷, API版本大于17 ,直接使用原生的RenderScript模糊,API版本小于17,則用fastBlur方法。(同樣需要先優(yōu)化,后模糊)。

6,輪子

由于高斯模糊在項目中用得比較多,而每一個項目都去拷貝代碼,這樣很麻煩,并且不優(yōu)雅,因此,對這兩種方法優(yōu)化后,封裝成了一個Lib,要使用時直接添加依賴就行。

添加依賴:
1, 最外層build.gradle 添加一下代碼:

allprojects {
    repositories {
        jcenter()
        
        maven {url "https://jitpack.io"}
    }
}

2,app 的build.gradle添加:

  dependencies {
  compile 'com.github.pinguo-zhouwei:EasyBlur:v1.0.0'
}

3,app 的build.gradle添加:

 defaultConfig {
        applicationId "com.zhouwei.easyblur"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
         
        //使用renderscript 兼容包 
        renderscriptTargetApi 25
        renderscriptSupportModeEnabled true
    }

使用方法:
1,簡單使用,指定Bitmap和半徑

Bitmap finalBitmap = EasyBlur.with(MainActivity.this)
                        .bitmap(overlay) //要模糊的圖片
                        .radius(10)//模糊半徑
                        .blur();

2,可以指定縮小的倍數(shù),默認縮小倍數(shù)為8

Bitmap finalBitmap = EasyBlur.with(MainActivity.this)
                        .bitmap(overlay) //要模糊的圖片
                        .radius(10)//模糊半徑
                        .scale(4)//指定模糊前縮小的倍數(shù)
                        .blur();

3, 指定使用哪一種方法,默認是使用兼容的RenderScript 高斯模糊

Bitmap finalBitmap = EasyBlur.with(MainActivity.this)
                        .bitmap(overlay) //要模糊的圖片
                        .radius(10)//模糊半徑
                        .scale(4)//指定模糊前縮小的倍數(shù)
                        .policy(EasyBlur.BlurPolicy.FAST_BLUR)//使用fastBlur
                        .blur();

代碼已經(jīng)上傳Github:EasyBlur

參考資料

RenderScript API 指南
android圖片處理之圖像模糊
高斯模糊實現(xiàn)方案探究
Fast Bitmap Blur For Android SDK

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,741評論 25 709
  • 一、入口 https://developer.android.google.cn -> API指南 -> 庫 ->...
    撿之閱讀 9,594評論 4 8
  • 地推,對沒經(jīng)歷過的甲方來說,好像是絕好的一個拓展新用戶的渠道,在他們想象里,地推是面對面,手把手地向目標客戶傳...
    祁高宇閱讀 426評論 0 0
  • 人們常說,有時候一些機會不會無緣無故的到來,而你,是否能抓住到來的每次機會? 這次能來到長投學習,又是...
    四月芳菲盡閱讀 758評論 6 17
  • 前幾天在公司做一個空頁面的設(shè)計,體會到一幅畫面的層次與空間感的重要性,于是近期聯(lián)系了一些場景的插畫,簡單做一些總結(jié)...
    菜心設(shè)計鋪閱讀 4,543評論 6 26

友情鏈接更多精彩內(nèi)容