同步簡書:Android 圖片高斯模糊解決方案 html
近年來,圖片高斯模糊備受設計師的青睞,在各大知名APP中,如微信、手機QQ、網易雲音樂等等都有對背景高斯圖模糊的設計,在Adnroid 中,如今經常使用的圖片高斯模糊技術有三種:RenderScript 、fastBlur、對RenderScript和fastBlur的優化,接下來分別分析各自的優缺點和在項目中該使用哪一個解決方案。先上一張效果圖:java
RenderScript是在Android上的高性能運行密集型運算的框架,RenderScript主要用於數據並行計算,尤爲對圖像處理、攝影分析和計算機視覺特別有用。RenderScript是在Android3.0(API 11)引入的。而Android圖片高斯模糊處理,一般也是用這個庫來完成。它提供了咱們Java層調用的API,其實是在c/c++ 層來處理的,因此它的效率和性能一般是最高的。要使用RenderScript完成圖片高斯模糊只須要如下幾步:
(1) 初始化一個RenderScript Context:RenderScript 上下文環境經過create(Context)
方法來建立,它保證RenderScript的使用而且提供一個控制後續全部RenderScript對象(如:ScriptIntrinsicBlur、Allocation等)生命週期的對象。android
(2)經過Script至少建立一個Allocation:一個Allocation是提供存儲大量可變數據的RenderScript 對象。在內核中,Allocation做爲輸入和輸出,在內核中經過rsGetElementAt_type ()
和rsSetElementAt_type()
方法來訪問Allocation當script全局綁定的時候。使用createFromBitmap
和createTyped
來建立Allocation。c++
(3)建立ScriptIntrinsic:它內置了RenderScript 的一些通用操做,如高斯模糊、扭曲變換、圖像混合等等,更多的操做請看ScriptIntrinsic
的子類,本文要用的高斯模糊處理就是用的它的子類ScriptIntrinsicBlur
。
(4)填充數據到Allocations:除了使用方法createFromBitmap
建立的Allocation外,其它的第一次建立時都是填充的空數據。git
(5) 設置模糊半徑:設置一個模糊的半徑,其值爲 0-25。github
(6) 啓動內核,調用方法處理:調用forEach 方法模糊處理。算法
(7) 從Allocation 中拷貝數據:爲了能在Java層訪問Allocation的數據,用Allocation其中一個copy
方法來拷貝數據。
(8) 銷燬RenderScript對象:能夠用destroy
方法來銷燬RenderScript對象或者讓它能夠被垃圾回收,destroy 以後,就能在用它控制的RenderScript對象了(好比在銷燬了以後,再調用ScriptIntrinsic或者Allocation的方法是要拋異常的)。promise
以上幾個步驟就能夠完成的圖片的高斯模糊,看一下對應的代碼:微信
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;
}複製代碼
上面對應的步驟已經用序號標出,代碼就十行左右,很簡單。這就十Android提供給咱們的能夠處理圖片高斯模糊的庫。性能比較好,由於是在c/c++層作的處理。可是它只能在API 17或者更高的版本使用, 看一下文檔的說明:app
如上圖,紅框中標記的ScriptIntrinsicBlur 是在API 17加入的,所以低版本的手機是用不了,爲了能兼容低版本的手機,咱們還得探索其餘方案。
RenderScript 兼容包:
所幸的是,Google 爲了兼容低版本也能夠用RenderScript,加了一個兼容包,android.support.v8.renderscript ,使用support.v8.renderscript
就能兼容到Android 2.3版本(API 9),如今市面上估計沒有比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個缺點:
所以咱們還要找一下其餘方案,接下來看一下fastBlur算法。
fastBlur 是除了RenderScript 以外的另外一種方法,它直接在Java層作圖片的模糊處理。對每一個像素點應用高斯模糊計算、最後在合成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倍。還有就是使用這種方式是把圖片所有加載到內存,若是圖片較大,容易致使OOM。
上面對RenderScript 和fastBlur作了分析,雖然RenderScript的效率要比fastBlur 好不少,可是仍是有可能達不到16ms每一幀的要求而致使卡頓。因此須要進行優化。
思路: 在stackOverFlow上有提供優化思路(地址:stackoverflow.com/questions/2…
,原理是這樣的:經過縮小圖片,使其丟失一些像素點,接着進行模糊化處理,而後再放大到原來尺寸。因爲圖片縮小後再進行模糊處理,須要處理的像素點和半徑都變小,從而使得模糊處理速度加快。
所以咱們只須要將原來的圖片縮小,而後在用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:縮小的係數應該爲2的整數次冪 ,即上面代碼中的scale應該爲1/二、1/四、1/8 ... 參考BitmapFactory.Options 對圖片縮放 的inSample係數。據前輩們經驗,通常scale = 1/8 爲佳。
看一下使用RenderScript和fastBlur 以及優化後,高斯模糊一張圖片所花時間的對比表,測試機型爲魅族metal,系統爲Android 5.1,以下:
如上圖:以1080 x 1349 的圖片爲例(每個半徑取5次的均值),使用原尺寸用兩種方法進行高斯模糊,RenderScript的效率比fastBlur高,大約快10倍,可是都超過了16ms,而使用優化方法後,使其先縮小8倍,再模糊,2種方法效率都有質的提升,RenderScript模糊時間不足5ms,fastBlur 也接近16ms,半徑爲15如下小與16ms。
所以無論使用哪一種方法模糊圖片,都應該先優化,再模糊。
RenderScript 優勢:
RenderScript 缺點:
fastBlur的優勢:
fastBlur的缺點:
以上對比了2種方法的優缺點,各有優劣,那麼咱們到底選擇哪種呢?這個須要看狀況而定,給出下面2種方案:
高斯模糊方案一: 若是APK自己較小,能夠接受增大的160k體積,那麼直接使用兼容包的RenderScript (注意須要先優化,用上面的先縮小再模糊)。
高斯模糊方案二:若是不想APK體積增大,那麼在模糊的時候作判斷, API版本大於17 ,直接使用原生的RenderScript模糊,API版本小於17,則用fastBlur方法。(一樣須要先優化,後模糊)。
因爲高斯模糊在項目中用得比較多,而每個項目都去拷貝代碼,這樣很麻煩,而且不優雅,所以,對這兩種方法優化後,封裝成了一個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,能夠指定縮小的倍數,默認縮小倍數爲8
Bitmap finalBitmap = EasyBlur.with(MainActivity.this)
.bitmap(overlay) //要模糊的圖片
.radius(10)//模糊半徑
.scale(4)//指定模糊前縮小的倍數
.blur();複製代碼
3, 指定使用哪種方法,默認是使用兼容的RenderScript 高斯模糊
Bitmap finalBitmap = EasyBlur.with(MainActivity.this)
.bitmap(overlay) //要模糊的圖片
.radius(10)//模糊半徑
.scale(4)//指定模糊前縮小的倍數
.policy(EasyBlur.BlurPolicy.FAST_BLUR)//使用fastBlur
.blur();複製代碼
代碼已經上傳Github:EasyBlur
RenderScript API 指南
android圖片處理之圖像模糊
高斯模糊實現方案探究
Fast Bitmap Blur For Android SDK