图片高斯模糊效果的实现

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

首先是效果图：



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

一、主界面MainActivity代码：

public class MainActivity extends Activity {

private ImageView iv_GaussianBlurBackground;
private View view_GaussianBlur;
private boolean isGaussianBlur = false;

@Override
protected 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="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
android:id="@+id/iv_GaussianBlurBackground"
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/header" />

<View
android:id="@+id/view_GaussianBlur"
android:layout_width="match_parent"
android:layout_height="200dp" />

<com.example.gaussianblurdemo.ShapedImageView
android: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" />

<Button
android: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
* 2016年5月24日 15:16:46
*/
public class GaussianBlurUtil {

public static void applyBlur(final ImageView imageview, final View view) {
imageview.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public 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 BitMap
blurBitMap(bitmap, radius);

return (bitmap);
}

public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {
// 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>

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 well
float 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
* 2016年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));
}

@Override
protected 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());
}
}

@Override
protected 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下载