图片高斯模糊效果的实现

本片文章实现了个人中心用户头像的高斯模糊效果。

首先是效果图：

点击按钮，用户头像的背景图片变成模糊背景，这样看起来更清爽一些，如果有小伙伴需要这样的效果，赶紧跟着看下去吧！

一、主界面MainActivity代码：

public class MainActivity extends Activity {private ImageView iv_GaussianBlurBackground;private View view_GaussianBlur;private boolean isGaussianBlur = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);iv_GaussianBlurBackground = (ImageView) findViewById(R.id.iv_GaussianBlurBackground);view_GaussianBlur = (View) findViewById(R.id.view_GaussianBlur);}public void onGaussianBlur(View view){if(!isGaussianBlur){GaussianBlurUtil.applyBlur(iv_GaussianBlurBackground,view_GaussianBlur);}else{view_GaussianBlur.setBackgroundColor(android.R.color.transparent);}isGaussianBlur = !isGaussianBlur;}}

二、布局文件activity_main代码：

<RelativeLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid:id="@+id/iv_GaussianBlurBackground"android:layout_width="match_parent"android:layout_height="200dp"android:contentDescription="@null"android:scaleType="centerCrop"android:src="@drawable/header" /><Viewandroid:id="@+id/view_GaussianBlur"android:layout_width="match_parent"android:layout_height="200dp" /><com.example.gaussianblurdemo.ShapedImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_marginLeft="20dp"android:layout_marginTop="120dp"android:contentDescription="@null"android:scaleType="centerCrop"android:src="@drawable/header"app:shape_mode="circle" /><Buttonandroid:layout_width="match_parent"android:layout_height="45dp"android:layout_below="@id/view_GaussianBlur"android:onClick="onGaussianBlur"android:text="高斯模糊" /></RelativeLayout>

三、其中主要用到了一个工具类GaussianBlurUtil(底层用到了JNI代码，不要忘记添加) 和一个ImageView的用户头像自定义控件。

首先是GaussianBlurUtil代码：

package com.example.gaussianblurdemo;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.drawable.BitmapDrawable;import android.view.View;import android.view.ViewTreeObserver;import android.widget.ImageView;/*** 高斯模糊工具类* @author SHI* 5月24日 15:16:46*/public class GaussianBlurUtil {public static void applyBlur(final ImageView imageview, final View view) {imageview.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {@Overridepublic boolean onPreDraw() {imageview.getViewTreeObserver().removeOnPreDrawListener(this);imageview.buildDrawingCache();Bitmap bmp = imageview.getDrawingCache();blur(bmp,view);return true;}});}private static void blur(Bitmap bkg, View view) {long startMs = System.currentTimeMillis();float scaleFactor = 1;float radius = 20;// if (downScale.isChecked()) {// scaleFactor = 8;// radius = 2;// }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 = doBlur(overlay, (int) radius, true);view.setBackground(new BitmapDrawable(view.getResources(), overlay));}public static Bitmap doBlurJniArray(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {Bitmap bitmap;if (canReuseInBitmap) {bitmap = sentBitmap;} else {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];bitmap.getPixels(pix, 0, w, 0, 0, w, h);//Jni 数组计算blurIntArray(pix, w, h, radius);bitmap.setPixels(pix, 0, w, 0, 0, w, h);return (bitmap);}public static Bitmap doBlurJniBitMap(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {Bitmap bitmap;if (canReuseInBitmap) {bitmap = sentBitmap;} else {bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);}if (radius < 1) {return (null);}//Jni BitMapblurBitMap(bitmap, radius);return (bitmap);}public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {// Stack Blur v1.0 from// /StackBlurForCanvas/StackBlurDemo.html//// Java Author: Mario Klingemann <mario at >// // created Feburary 29, // Android port : Yahel Bouaziz <yahel at >// // ported april 5th, // 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@>Bitmap bitmap;if (canReuseInBitmap) {bitmap = sentBitmap;} else {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];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;}}bitmap.setPixels(pix, 0, w, 0, 0, w, h);return (bitmap);}private static final float MIN_SCALE = 0.85f;private static final float MIN_ALPHA = 0.5f;public void transformPage(View view, float position) {int pageWidth = view.getWidth();int pageHeight = view.getHeight();if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.view.setAlpha(0);} else if (position <= 1) { // [-1,1]// Modify the default slide transition to shrink the page as wellfloat scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));float vertMargin = pageHeight * (1 - scaleFactor) / 2;float horzMargin = pageWidth * (1 - scaleFactor) / 2;if (position < 0) {view.setTranslationX(horzMargin - vertMargin / 2);} else {view.setTranslationX(-horzMargin + vertMargin / 2);}// Scale the page down (between MIN_SCALE and 1)view.setScaleX(scaleFactor);view.setScaleY(scaleFactor);// Fade the page relative to its size.view.setAlpha(MIN_ALPHA +(scaleFactor - MIN_SCALE) /(1 - MIN_SCALE) * (1 - MIN_ALPHA));} else { // (1,+Infinity]// This page is way off-screen to the right.view.setAlpha(0);}}public static native void blurIntArray(int[] pImg, int w, int h, int r);public static native void blurBitMap(Bitmap bitmap, int r);}

然后是ShapeImageView自定义控件，关于这个控件的讲解，可以参考这篇文章：Android圆角图片的实现

ShapeImageView代码：

package com.example.gaussianblurdemo;import java.util.Arrays;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.PorterDuffXfermode;import android.graphics.PorterDuff;import android.graphics.drawable.shapes.RoundRectShape;import android.graphics.drawable.shapes.Shape;import android.os.Build;import android.util.AttributeSet;import android.widget.ImageView;/*** 可以实现圆角和圆角矩形的ImageView * SHI* 5月12日 19:39:16*/public class ShapedImageView extends ImageView {private static final int SHAPE_MODE_ROUND_RECT = 1;private static final int SHAPE_MODE_CIRCLE = 2;private int mShapeMode = 0;private float mRadius = 0;private Shape mShape;private Paint mPaint;public ShapedImageView(Context context) {super(context);init(null);}public ShapedImageView(Context context, AttributeSet attrs) {super(context, attrs);init(attrs);}public ShapedImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(attrs);}private void init(AttributeSet attrs) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {setLayerType(LAYER_TYPE_HARDWARE, null);}if (attrs != null) {TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ShapedImageView);mShapeMode = a.getInt(R.styleable.ShapedImageView_shape_mode, 0);mRadius = a.getDimension(R.styleable.ShapedImageView_round_radius, 0);a.recycle();}mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setFilterBitmap(true);mPaint.setColor(Color.BLACK);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);if (changed) {switch (mShapeMode) {case SHAPE_MODE_ROUND_RECT:break;case SHAPE_MODE_CIRCLE:int min = Math.min(getWidth(), getHeight());mRadius = (float) min / 2;break;}if (mShape == null) {float[] radius = new float[8];Arrays.fill(radius, mRadius);mShape = new RoundRectShape(radius, null, null);}mShape.resize(getWidth(), getHeight());}}@Overrideprotected void onDraw(Canvas canvas) {int saveCount = canvas.getSaveCount();canvas.save();super.onDraw(canvas);switch (mShapeMode) {case SHAPE_MODE_ROUND_RECT:case SHAPE_MODE_CIRCLE:if (mShape != null) {mShape.draw(canvas, mPaint);}break;}canvas.restoreToCount(saveCount);}}

ShapeImageView控件对应的attrs属性文件：

<?xml version="1.0" encoding="utf-8"?><resources><declare-styleable name="ShapedImageView"><attr name="shape_mode" format="enum"><enum name="round_rect" value="1" /><enum name="circle" value="2" /></attr><attr name="round_radius" format="dimension" /></declare-styleable></resources>

好了，到这里基本就实现了用户中心用户头像的高斯模糊效果功能了，大家可以根据自己的需要进行适当优化。

最后附带上项目下载地址：demo下载