高斯模糊全解：從低效到高效、從靜態(tài)到動態(tài)

github代碼直通車

先上效果圖：

動態(tài)調(diào)節(jié)高斯模糊
模糊dialog
相機(jī)彈框?qū)崟r高斯模糊

原理：

在我們洗澡的時候，透過廁所霧蒙蒙的玻璃看過去，是不是很漂亮。這就是現(xiàn)實中的毛玻璃效果。原理很簡單，你把眼鏡兒取了，你看到到處都是高斯模糊。就是做算法，將原本清晰的圖像加入放大鏡，讓你的眼鏡不能聚焦。

做法原理：
將每一個正在處理的像素，取周圍若干個像素的RGB值的平均數(shù)，來作為該點的RGB。用正太分布函數(shù)，越靠近中心，計算的權(quán)重越大，處理強(qiáng)度越大。

正太分布圖

實現(xiàn)高斯模糊的途徑：

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

Java實現(xiàn)的高斯模糊

通過設(shè)置模糊半徑得到一個RGB矩陣，每個color分別右移24,16,8位按位與0xff,然后截取低8位，分別計算平均值。

public class BlurImageView {
    /**
     * 水平方向模糊度
     */
    private static float hRadius = 8;
    /**
     * 豎直方向模糊度
     */
    private static float vRadius = 8;
    /**
     * 模糊迭代度
     */
    private static int iterations = 8;

    /**
     * 圖片高斯模糊處理 ?
     */
    public static Bitmap BlurImages(Bitmap bmp) {

        int width = bmp.getWidth();
        int height = bmp.getHeight();
        int[] inPixels = new int[width * height];
        int[] outPixels = new int[width * height];
        Bitmap bitmap = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        bmp.getPixels(inPixels, 0, width, 0, 0, width, height);
        for (int i = 0; i < iterations; i++) {
            blur(inPixels, outPixels, width, height, hRadius);
            blur(outPixels, inPixels, height, width, vRadius);
        }
        blurFractional(inPixels, outPixels, width, height, hRadius);
        blurFractional(outPixels, inPixels, height, width, vRadius);
        bitmap.setPixels(inPixels, 0, width, 0, 0, width, height);
        return bitmap;
    }

    /**
     * 圖片高斯模糊算法?
     */
    public static void blur(int[] in, int[] out, int width, int height,
                            float radius) {
        int widthMinus1 = width - 1;
        int r = (int) radius;
        int tableSize = 2 * r + 1;
        int divide[] = new int[256 * tableSize];

        for (int i = 0; i < 256 * tableSize; i++)
            divide[i] = i / tableSize;

        int inIndex = 0;

        for (int y = 0; y < height; y++) {
            int outIndex = y;
            int ta = 0, tr = 0, tg = 0, tb = 0;

            for (int i = -r; i <= r; i++) {
                int rgb = in[inIndex + clamp(i, 0, width - 1)];
                ta += (rgb >> 24) & 0xff;
                tr += (rgb >> 16) & 0xff;
                tg += (rgb >> 8) & 0xff;
                tb += rgb & 0xff;
            }

            for (int x = 0; x < width; x++) {
                out[outIndex] = (divide[ta] << 24) | (divide[tr] << 16)
                        | (divide[tg] << 8) | divide[tb];

                int i1 = x + r + 1;
                if (i1 > widthMinus1)
                    i1 = widthMinus1;
                int i2 = x - r;
                if (i2 < 0)
                    i2 = 0;
                int rgb1 = in[inIndex + i1];
                int rgb2 = in[inIndex + i2];

                ta += ((rgb1 >> 24) & 0xff) - ((rgb2 >> 24) & 0xff);
                tr += ((rgb1 & 0xff0000) - (rgb2 & 0xff0000)) >> 16;
                tg += ((rgb1 & 0xff00) - (rgb2 & 0xff00)) >> 8;
                tb += (rgb1 & 0xff) - (rgb2 & 0xff);
                outIndex += height;
            }
            inIndex += width;
        }
    }

    /**
     * 圖片高斯模糊算法 ?
     */
    public static void blurFractional(int[] in, int[] out, int width,
                                      int height, float radius) {
        radius -= (int) radius;
        float f = 1.0f / (1 + 2 * radius);
        int inIndex = 0;

        for (int y = 0; y < height; y++) {
            int outIndex = y;

            out[outIndex] = in[0];
            outIndex += height;
            for (int x = 1; x < width - 1; x++) {
                int i = inIndex + x;
                int rgb1 = in[i - 1];
                int rgb2 = in[i];
                int rgb3 = in[i + 1];

                int a1 = (rgb1 >> 24) & 0xff;
                int r1 = (rgb1 >> 16) & 0xff;
                int g1 = (rgb1 >> 8) & 0xff;
                int b1 = rgb1 & 0xff;
                int a2 = (rgb2 >> 24) & 0xff;
                int r2 = (rgb2 >> 16) & 0xff;
                int g2 = (rgb2 >> 8) & 0xff;
                int b2 = rgb2 & 0xff;
                int a3 = (rgb3 >> 24) & 0xff;
                int r3 = (rgb3 >> 16) & 0xff;
                int g3 = (rgb3 >> 8) & 0xff;
                int b3 = rgb3 & 0xff;
                a1 = a2 + (int) ((a1 + a3) * radius);
                r1 = r2 + (int) ((r1 + r3) * radius);
                g1 = g2 + (int) ((g1 + g3) * radius);
                b1 = b2 + (int) ((b1 + b3) * radius);
                a1 *= f;
                r1 *= f;
                g1 *= f;
                b1 *= f;
                out[outIndex] = (a1 << 24) | (r1 << 16) | (g1 << 8) | b1;
                outIndex += height;
            }
            out[outIndex] = in[width - 1];
            inIndex += width;
        }
    }

    public static int clamp(int x, int a, int b) {
        return (x < a) ? a : (x > b) ? b : x;
    }

}

RenderScript算法

詳情見我另一篇博客：(http://www.itdecent.cn/p/bc5df96c8e4f)
引入方式：

    defaultConfig {
        applicationId "com.example.renderscript.renderscriptuse"
        minSdkVersion 17
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

        renderscriptTargetApi 18
        renderscriptSupportModeEnabled true
    }

調(diào)用方法：

    public static Bitmap handleGlassblur(Context context,Bitmap originBitmap,int radius){
        RenderScript renderScript = RenderScript.create(context);
        Allocation input = Allocation.createFromBitmap(renderScript,originBitmap);
        Allocation output = Allocation.createTyped(renderScript,input.getType());
        ScriptIntrinsicBlur scriptIntrinsicBlur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        scriptIntrinsicBlur.setRadius(radius);
        scriptIntrinsicBlur.setInput(input);
        scriptIntrinsicBlur.forEach(output);
        output.copyTo(originBitmap);

        return originBitmap;
    }

功能1：動態(tài)調(diào)節(jié)高斯模糊

    private void init() {
        imageView = (ImageView) findViewById(R.id.imageview);
        seekBar = (SeekBar) findViewById(R.id.seekbar);
        seekBar.setMax(25);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.test10);
                if(progress < 1){
                    progress = 1;
                }
                Bitmap blurBitmap = RenderScriptGlassBlur.handleGlassblur(getApplicationContext(),bitmap,progress);
                imageView.setImageBitmap(blurBitmap);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });
    }

因為該方法模糊范圍是1-25，所以seekbar范圍也控制在1-25；

功能2：全屏高斯模糊dialog

  1. 將activity的上層decorview通過getDrawingCache()獲取bitmap，創(chuàng)建dialog，將bitmap傳遞給dialog作為dialog的全屏背景；
    public void dialog(View view){
        View rootView = getWindow().getDecorView();
        rootView.setDrawingCacheEnabled(true);
        rootView.buildDrawingCache();
        Bitmap mBitmap = rootView.getDrawingCache();

        new BlurDialog(this,mBitmap);
    }

2.在dialog中調(diào)用RenderScriptGlassBlur.bitmapBlur(context,ivBg,bitmap,3)將傳遞過來的背景圖進(jìn)行高斯模糊，所以才能得到下層activity的樣子。實際上就是在dialog下層加了一層activity顯示圖片。

public class BlurDialog {
    private Dialog dialog;
    private ImageView ivBg;

    public BlurDialog(Context context,Bitmap bitmap){
        dialog = new Dialog(context, R.style.BottomDialog);
        dialog.setContentView(R.layout.dialog_bgblur);
        dialog.show();

        ivBg = dialog.findViewById(R.id.imageview_bg);

        fullScreen();

        RenderScriptGlassBlur.bitmapBlur(context,ivBg,bitmap,3);
    }

    private void fullScreen(){
        //dialog全屏設(shè)置
        WindowManager.LayoutParams layoutParams = dialog.getWindow().getAttributes();
        layoutParams.gravity= Gravity.BOTTOM;
        layoutParams.width= WindowManager.LayoutParams.MATCH_PARENT;
        layoutParams.height= WindowManager.LayoutParams.MATCH_PARENT;
        dialog.getWindow().getDecorView().setPadding(0, 0, 0, 0);
        dialog.getWindow().setAttributes(layoutParams);
    }
}

dialog全屏style設(shè)置

    <style name="BottomDialog" parent="@android:style/Theme.NoTitleBar.Fullscreen">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/transparent</item>
        <!-- 是否有邊框 -->
        <item name="android:windowFrame">@null</item>
        <!--是否在懸浮Activity之上  -->
        <item name="android:windowIsFloating">true</item>
    </style>

dialog的xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageview_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:cardElevation="0dp"
        app:cardCornerRadius="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:textSize="16sp"
                android:padding="12dp"
                android:background="#fff"
                android:text="我是網(wǎng)紅程熙媛"/>

            <ImageView
                android:layout_width="270dp"
                android:layout_height="400dp"
                android:background="@mipmap/test10"
                android:scaleType="centerCrop"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#fff"
                android:padding="10dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/attention_btn_good"
                    android:layout_marginRight="20dp"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/find_btn_comment"
                    android:layout_marginRight="20dp"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/dynamic_more"
                    android:layout_marginRight="20dp"/>
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

功能3：在攝像頭上調(diào)用diaolog，實時高斯模糊

handler.sendEmptyMessageDelayed(0,40);用handler每過40毫秒發(fā)送命令，從相機(jī)顯示view中獲取一幀bitmap進(jìn)行高斯模糊，每秒就會有25幀圖切換。25幀/s的圖片播放就會是連續(xù)的視頻。但是需要在dialog的
setOnDismissListener中調(diào)用handler.removeCallbacksAndMessages(null)停止截取幀

public class CameraSetupDialog {
    private Dialog dialog;
    private Context context;
    private RadioGroup rgSpeed,rgFocus,rgSkin,rgDelay;
    private ImageView ivBg;
    private View viewClose;
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            RenderScriptGlassBlur.bitmapBlur(context,ivBg, DialogBgActivity.textureView.getBitmap(),8);
            handler.sendEmptyMessageDelayed(0,40);
        }
    };

    public CameraSetupDialog(Context context) {
        this.context = context;

        dialog = new Dialog(context, R.style.BottomDialog);
        dialog.setContentView(R.layout.camera_setup);
        dialog.show();

        initView();

        init();
        event();
    }

    private void initView() {
        rgSpeed = dialog.findViewById(R.id.rg_camera_speed);
        rgFocus = dialog.findViewById(R.id.rg_camera_focus);
        rgSkin = dialog.findViewById(R.id.rg_camera_skin);
        rgDelay = dialog.findViewById(R.id.rg_camera_delay);
        viewClose = dialog.findViewById(R.id.view_close);
        ivBg = dialog.findViewById(R.id.iv_bg);
        dialog.setCanceledOnTouchOutside(true);

        ((RadioButton)rgSpeed.getChildAt(0)).setChecked(true);
        ((RadioButton)rgFocus.getChildAt(0)).setChecked(true);
        ((RadioButton)rgSkin.getChildAt(0)).setChecked(true);
        ((RadioButton)rgDelay.getChildAt(0)).setChecked(true);

        handler.sendEmptyMessageDelayed(0,40);
    }

    private void event(){

        dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialog) {
                handler.removeCallbacksAndMessages(null);
            }
        });
    }

    private void init() {
        //顯示對話框時，后面的Activity不變暗，可選操作。
        Window win = dialog.getWindow();
        win.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);

        //對話框全屏
        WindowManager windowManager = dialog.getWindow().getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
        lp.width = display.getWidth(); //設(shè)置寬度
        lp.height = display.getHeight();
        dialog.getWindow().setAttributes(lp);
    }

}

好了，還有什么思維不連貫的，有疑惑的就在github上下載demo來看吧。

最后編輯于 ：
?著作權(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閱讀 179,048評論 25贊 709
  • 近年來，圖片高斯模糊備受設(shè)計師的青睞，在各大知名APP中，如微信、手機(jī)QQ、網(wǎng)易云音樂等等都有對背景高斯圖模糊的設(shè)...
    依然范特稀西閱讀 46,417評論 19贊 203
  • ￥開啟￥ 【iAPP實現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 7,334評論 0贊 17
  • 一陣秋雨一陣涼， 今天小雨，下過以后天氣將會再次變冷，大家一定要注意添加衣物，一天到了結(jié)束的時候，該是給我的...
    肖瀟1012閱讀 211評論 1贊 0
  • 大二上學(xué)期也就剩下最后的兩個禮拜，可是臨近期末，一點想要復(fù)習(xí)的欲望都沒有！我就是這樣，若沒有人逼我一把，定是...
    YanwayLin閱讀 173評論 0贊 0

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