高斯模糊全解:从低效到高效、从静态到动态

github代码直通车

先上效果图:

动态调节高斯模糊
模糊dialog
相机弹框实时高斯模糊

原理:

在我们洗澡的时候,透过厕所雾蒙蒙的玻璃看过去,是不是很漂亮。这就是现实中的毛玻璃效果。原理很简单,你把眼镜儿取了,你看到到处都是高斯模糊。就是做算法,将原本清晰的图像加入放大镜,让你的眼镜不能聚焦。

做法原理:
将每一个正在处理的像素,取周围若干个像素的RGB值的平均数,来作为该点的RGB。用正太分布函数,越靠近中心,计算的权重越大,处理强度越大。

正太分布图

实现高斯模糊的途径:

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

Java实现的高斯模糊

通过设置模糊半径得到一个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.jianshu.com/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
    }

调用方法:

    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:动态调节高斯模糊

    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,创建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中调用RenderScriptGlassBlur.bitmapBlur(context,ivBg,bitmap,3)将传递过来的背景图进行高斯模糊,所以才能得到下层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全屏设置
        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设置

    <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="我是网红程熙媛"/>

            <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:在摄像头上调用diaolog,实时高斯模糊

handler.sendEmptyMessageDelayed(0,40);用handler每过40毫秒发送命令,从相机显示view中获取一帧bitmap进行高斯模糊,每秒就会有25帧图切换。25帧/s的图片播放就会是连续的视频。但是需要在dialog的
setOnDismissListener中调用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(); //设置宽度
        lp.height = display.getHeight();
        dialog.getWindow().setAttributes(lp);
    }

}

好了,还有什么思维不连贯的,有疑惑的就在github上下载demo来看吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,464评论 25 707
  • 近年来,图片高斯模糊备受设计师的青睐,在各大知名APP中,如微信、手机QQ、网易云音乐等等都有对背景高斯图模糊的设...
    依然范特稀西阅读 45,603评论 19 203
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,357评论 0 17
  • 一阵秋雨一阵凉, 今天小雨,下过以后天气将会再次变冷,大家一定要注意添加衣物,一天到了结束的时候,该是给我的...
    肖潇1012阅读 178评论 1 0
  • 大二上学期也就剩下最后的两个礼拜,可是临近期末,一点想要复习的欲望都没有!我就是这样,若没有人逼我一把,定是...
    YanwayLin阅读 144评论 0 0