Android 上的 高斯模糊 依我之见
fangtailoraqeuR
8年前
<h2>前言</h2> <p>从 <strong>iOS 7</strong> 开始 Apple 从 <strong>拟物化</strong> 过渡到了 <strong>扁平化</strong> 的设计风格，同时也搭配使用了 <strong>毛玻璃风格</strong> 当做背景效果，不得不说十分惊艳，颇有当时pc上 <strong>Widows Vista</strong> 和 <strong>OS X Yosemite</strong> 的味道，在那之后，Google 也从 <strong>Android L（5.0）</strong> 开始使用了 <strong>原质化设计(Material Design)</strong> 设计语言，与 Microsoft 的 <strong>Metro</strong> 那种纯扁平化风格看似很相像，但实则因为引用了 <strong>Z轴</strong> 的概念，使其有了阴影和立体感，传达了 <strong>响应式交互</strong> 的设计理念。说到这里有一些跑题，因为笔者对设计美学很感兴趣，所以对这些平台都稍微了解一些皮毛。今天就来研究一下如何在 <strong>Android</strong> 上实现高斯模糊效果。</p> <h2>目前 Android 上实现高斯模糊效果的方式有：</h2> <ul> <li> <p>Java ： FastBlur.java ，应用非常广泛的 StackBlur 模糊算法实现代码，效率最低</p> </li> <li> <p>C++ ：两种实现，1：标准高斯模糊算法 2： 均值模糊 ，效率中等</p> </li> <li> <p>Android ： RenderScript ，用来在 Android 上编写高性能代码的一种语言（使用C99标准，运行时机器再次优化编译， 可以均衡的运行在多个CPU 和 GPU上，有一个半径限制小于25的限制），效率最高</p> </li> </ul> <h3>简单聊聊 FastBlur</h3> <p>因为效果的实现是基于 Java 的，所以有必要先来了解一下方法如何使用。</p> <pre> <code class="language-java">public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap)</code></pre> <p>可以看出，使用方法非常简单，传入待虚化的bitmap、虚化程度(一般为8)、是否重用flag，最后返回模糊后的bitmap。</p> <p>但如果直接把一张大图传入进行虚化，很容易就会产生OOM内存溢出，那就意味着我只能虚化小图，这样才能防止内存溢出。但是我并不想换其他图，那么，我们就应该把这张图缩小。</p> <p>平时我们对图片缩小，必然会带来很明显的清晰度的损失，但高斯模糊本身的目的就是要实现模糊的效果，因此实际上的效果差别不大，几乎可以忽略。</p> <p>同时由于图片缩小后再进行模糊处理，需要处理的像素点和半径都变小，从而使得模糊处理速度加快。</p> <p>ReScale</p> <pre> <code class="language-java">public static Bitmap createScaledBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter) {}</code></pre> <p>我们可以利用Bitmap的 createScaledBitmap() 方法来进行bitmap的缩放。其中前三个参数很明显，其中宽高我们可以选择为原图尺寸的1/5；第四个filter是指缩放的效果，filter为true则会得到一个边缘平滑的bitmap，反之，则会得到边缘锯齿、pixelrelated的bitmap。这里我们要对缩放的图片进行虚化，所以无所谓边缘效果，filter=false。</p> <p>所以，我们要使用</p> <pre> <code class="language-java">int scaleRatio = 5;// 缩放比例 此处代表1/5 int blurRadius = 8;// 虚化程度 Bitmap scaledBitmap = Bitmap.createScaledBitmap(originBitmap, originBitmap.getWidth() / scaleRatio, originBitmap.getHeight() / scaleRatio, false); Bitmap blurBitmap = FastBlur.doBlur(scaledBitmap, blurRadius, true); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setImageBitmap(blurBitmap);</code></pre> <p>可以得到如下效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/aa98cbe720c0a279e05339fb2f09534c.jpg"></p> <p>从图中可以看出，首先可以确定思路是对的；然后，可以看出毛玻璃效果还不是特别的明显。为了得到如iOS那样的虚化效果，我们有两种方法：</p> <ul> <li> <p>增大scaleRatio缩放比，使用更小的bitmap去虚化可以得到更好的模糊效果，而且有利于占用内存的减小；</p> </li> <li> <p>增大blurRadius，可以得到更高程度的虚化，不过会导致CPU更加intensive</p> </li> </ul> <p>这里笔者通过增大缩放比来实验。</p> <ul> <li> <p>scaleRatio = 10</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/be7d1c19b4420399a864bb9ce2ec95ce.jpg"></p> <ul> <li> <p>scaleRatio = 20</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/287970bae392d16e9b33f68718a5e761.jpg"></p> <p>通过上面对比图我们可以找出最适合自己的虚化效果。</p> <h3>再来聊聊 RenderScript</h3> <p>RenderScript 主要 在Android中的对图形进行处理，RenderScript 采用C99语法进行编写，主要优势在于性能较高。在 API 11 的时候被加入到 Android 中。同时，Google提供了 android.support.v8.renderscript 兼容包，能够实现更低版本的兼容。</p> <p>RenderScript 提供了一个用于实现高斯模糊的封装类 ScriptIntrinsicBlur ，因为在 API 17 后才正式适配到 Android ，所以在不使用兼容包的情况下只能兼容到4.2的设备。但是，我们有兼容包啊向下兼容不是梦。</p> <p>准备阶段</p> <p>引入兼容包</p> <p>方法很简单，只需在build.gradle中加入:</p> <pre> <code class="language-java">defaultConfig { .... // 就是这么简单 renderscriptTargetApi 19 renderscriptSupportModeEnabled true }</code></pre> <p>另外由于一些厂商会深度定制Android系统，所以一些必要的依赖文件会被他们直接去掉，这导致一些型号的设备上调用 RenderScriptd 的部分方法时会报错。遇到这种兼容问题的话，需要加上这些可能丢失的文件。</p> <p>其实也简单，打开 android_sdk/build-tools/选择19以上版本/renderscript/lib/packaged 我们可以看见3个包含.so文件的文件夹。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3263a5412fbb0df789f2b08b7944df17.png"></p> <p>直接复制这三个文件加到项目工程的 jniLibs 包下，没有的话去建一个。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0950be23ffad56ebf6b6d0ca49e7faac.png"></p> <p>如果首次创建 jniLibs 文件夹，还需要在 build.gradle 的 android{} 中加入：</p> <pre> <code class="language-java">sourceSets { main { jniLibs.srcDirs = ['jniLibs'] } }</code></pre> <p>针对使用的混淆的同学，需要在混淆中加入：</p> <pre> <code class="language-java">-keep class android.support.v8.renderscript.** { *; }</code></pre> <p>实现高斯模糊</p> <ul> <li> <p>将核心实现方法 ScriptIntrinsicBlur 封装成工具类。</p> </li> </ul> <pre> <code class="language-java">import android.support.v8.renderscript.*; // 需要导入v8包，否则无法向下兼容 public class BlurBitmapUtil { /*** * 图片缩放比例 (例如 1/10) */ private static int scaleRatio = 10; /** * 对图片进行高斯模糊 * * @param context 上下文对象 * @param image 需要模糊的图片 * @param blurRadius 模糊半径，由于性能限制，这个值的取值区间为(0至25f) * @return 模糊处理后的图片 */ public static Bitmap blurBitmap(Context context, Bitmap image, @FloatRange(from = 1, to = 25) float blurRadius) { // 计算图片缩小后的长宽 int width = Math.round(image.getWidth() / scaleRatio); int height = Math.round(image.getHeight() / scaleRatio); // 创建一张缩小后的图片做为渲染的图片 Bitmap bitmap = Bitmap.createScaledBitmap(image, width, height, false); // 创建RenderScript内核对象 RenderScript rs = RenderScript.create(context); // 创建一个模糊效果的RenderScript的工具对象，第二个参数Element相当于一种像素处理的算法，高斯模糊的话用这个就好 ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); // 由于RenderScript并没有使用VM来分配内存,所以需要使用Allocation类来创建和分配内存空间 // 创建Allocation对象的时候其实内存是空的,需要使用copyTo()将数据填充进去 Allocation input = Allocation.createFromBitmap(rs, bitmap); // 创建相同类型的Allocation对象用来输出 Type type = input.getType(); Allocation output = Allocation.createTyped(rs, type); // 设置渲染的模糊程度, 25f是最大模糊度 blurScript.setRadius(blurRadius); // 设置blurScript对象的输入内存 blurScript.setInput(input); // 将输出数据保存到输出内存中 blurScript.forEach(output); // 将数据填充到bitmap中 output.copyTo(bitmap); // 销毁它们释放内存 input.destroy(); output.destroy(); blurScript.destroy(); rs.destroy(); type.destroy(); return bitmap; }</code></pre> <p>使用 RenderScript 增加虚化程度的方法和 FastBlur 一样，有两种方法：</p> <ul> <li> <p>增大scaleRatio缩放比，使用更小的bitmap去虚化可以得到更好的模糊效果，而且有利于占用内存的减小；</p> </li> <li> <p>增大blurRadius，可以得到更高程度的虚化，不过会导致虚化时间变长</p> </li> </ul> <p>但因为 RenderScript 的天然优势（低级语言， 运行时机器再次优化编译， 可以均衡的运行在多个CPU 和 GPU上），所以这里笔者通过增大虚化程度来实验，缩放比例为 1/10，实际运用时可以根据需求在对虚化程度和缩放比例上采取一个合适的数值。</p> <ul> <li> <p>blurRadius = 5</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/df3a4b2c3fcfbed403d45b0dad508e98.jpg"></p> <ul> <li> <p>blurRadius = 15</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/5ada6f02d3ee549d350982bfb189ea63.jpg"></p> <ul> <li> <p>blurRadius = 25</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/ca76bbf5389b0039ce0cadafb17fb777.jpg"></p> <p>通过上面对比图我们可以找出最适合自己的虚化效果。</p> <p>目前来看，为何 Google 设置这个25的限制， 原因应该有两个 ：</p> <ol> <li> <p>半径大于25的话耗时就成为了一个瓶颈;</p> </li> <li> <p>如果想实现大于25的模糊效果，可以通过缩小原图，模糊，再放大来达到同样的效果</p> </li> </ol> <h2>总结</h2> <p>以上就是如何用 FastBlur 和 RenderScript 在 Android 上实现和 iOS 一样的高斯模糊效果的简单介绍，虽然在性能上毋庸置疑是 RenderScript 上最好，但是在一些使用场景上 FastBlur 耗时会更短，所以我们各取所需，根据实际需求去选择使用。</p> <h2>另一种可能性</h2> <p>上面说的2种解决方案都是从性能和效率出发的产物，但如果我的需求就是从网络上加载一张图片（比如头像），然后再高斯模糊化当背景，走一遍转换成bitma再将其转换成高斯模糊的流程或许会有一点点麻烦，这里我再提供一种简单快捷的解决方案 —— 基于Glid加载框架去实现一键 <strong>加载网络图片→高斯模糊化→展示</strong> 。</p> <p>引入兼容包</p> <p>首先在build.gradle中加入图片框架需要的库和图片工具库:</p> <pre> <code class="language-java">defaultConfig { .... compile 'com.yutianran.maven:super-adapter:1.0.0' compile 'jp.wasabeef:glide-transformations:2.0.2' }</code></pre> <p>然后就开写，一行代码即可</p> <pre> <code class="language-java">Glide.with(this).load(url).bitmapTransform(new BlurTransformation(this,25)).into(imageView);</code></pre> <p>需要的参数很分别是</p> <ul> <li> <p>上下文对象</p> </li> <li> <p>图片url</p> </li> <li> <p>上下文对象，虚化数值</p> </li> <li> <p>imageView控件</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/8938ab9e75276e8e8ffc734599485b34.png"></p> <p>效果如上，可以看出 glide-transformations 库的虚化效果也是十分不错的，但对图片本身做的缩放应该不是很多，所以在加载速度上会弱于 FastBlur 和 RenderScript ，但作为轻量级图片而言足够了。</p> <h2>Code</h2> <p>相关代码已上传至Github： BlurView ，欢迎Star，Fork。</p> <h2>参考文献</h2> <ol> <li> <p>[[译] RenderScript：简单而快速的图像处理]( <a href="/misc/goto?guid=4959747042779964621" rel="nofollow,noindex">https://toutiao.io/posts/44zw...</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747042871756289" rel="nofollow,noindex">图片高斯模糊效果简单优化</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747042967363793" rel="nofollow,noindex">高斯模糊效果实现方案及性能对比</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747043050617002" rel="nofollow,noindex">Android：简单靠谱的动态高斯模糊效果</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747043129782649" rel="nofollow,noindex">教你一分钟实现动态模糊效果</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747043220418823" rel="nofollow,noindex">什么？IOS的专利？Android也能流畅实现毛玻璃效果(高斯模糊)效果</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747043303164783" rel="nofollow,noindex">Android 高斯模糊总结</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747043387583895" rel="nofollow,noindex">Android RenderScript 简单高效实现图片的高斯模糊效果</a></p> </li> <li> <p><a href="/misc/goto?guid=4959747043473792515" rel="nofollow,noindex">干货 一种快速毛玻璃虚化效果实现--Android</a></p> </li> </ol> <p> </p> <p>来自：https://segmentfault.com/a/1190000009017879</p> <p> </p>