Android使用glide-transformations实现图片高斯模糊

Android使用glide-transformations实现图片高斯模糊

一、目标

二、体验地址

神马笔记最新版本下载:【神马笔记 版本1.7.0——辅助编辑功能.apk

三、功能设计

文章编辑界面显示的图片为原始图片按比例缩放后,适应屏幕宽度的图片。

这种图片显示方式很显然不适用于辅助编辑,因为会占用大量的屏幕高度,需要移动更多距离才能实现拖拽排序。

因此,辅助编辑界面的图片显示方式的几点要求。

  1. 固定高度,保证每张图片的高度一致,方便拖拽排序
  2. 充满宽度,保证每张图片的宽度一致,视觉效果对齐

这样一来,必定需要不按比例缩放图片,因此增加第3个要求。

  1. 高斯模糊伸缩后的图片,减小视觉上的图片变形

四、实现方案

Android实现高斯模糊有以下几种方式。

1. RenderScript

Android提供的高效高斯模糊实现方案,有一个限制——模糊半径必须小于等于25,radius <= 25

具体使用方式,请参考下列文章。

使用RenderScript实现高斯模糊(毛玻璃/磨砂)效果

Android 高斯模糊之RenderScript

Android RenderScript 简单高效实现图片的高斯模糊效果

高斯模糊实现&RenderScript(渲染脚本)

2. FastBlur

使用RenderScrip虽然能高效实现高斯模糊,但是代价是增加安装包体积,因为需要引入.so文件。实际测试结果安装包大概增加了500k大小。

FastBlur只有一个Java类,虽然处理速度慢,但基本不增加安装包体积。

具体使用方式,请参考下列文章。

Android fastblur实现图片毛玻璃效果(模糊化)

3. glide-transformations

glide-transformationsGlide的扩展库,必须结合Glide才能使用。

glide-transformations提供了RenderScripFastBlur2种实现方式,可以根据需要自行选择具体的高斯模糊方案。

具体使用方式,请参考下列文章。

Glide结合高斯模糊使用

wasabeef/glide-transformations

神马笔记使用Glide加载图片,因此选择第3个方案——glide-transformations来实现高斯模糊。

五、组合起来

1. 代码实现

1
2
3
4
5
6
Glide.with(pictureView)
.load(item.getUri())
.apply(options)
// .apply(RequestOptions.bitmapTransform(new SupportRSBlurTransformation(12, 1)))
.apply(RequestOptions.bitmapTransform(new BlurTransformation(12, 1)))
.into(pictureView);

得益于Glideglide-transformations优秀的封装,仅仅增加了一行代码便实现了高斯模糊。

2. RenderScript和FastBlur的比较

实现方式 处理速度 安装包体积
RenderScrip 500K左右
FastBlur 基本不占用

考虑到处理速度,最先使用的是RenderScript方案,但增加了500K的安装包体积。

因此尝试了FastBlur方案,发现处理速度和效果都在可接受范围,并且基本不占用安装包体积。

最终选择FastBlur实现方案。

3. 删除多余的.so文件

最终选择了FastBlur方案,因此关闭了renderscript。

但生成安装包时,确还是包含了相关.so文件。

手动在packagingOptions排除掉renderscript相关的.so文件。

1
2
3
4
defaultConfig {
renderscriptTargetApi 28
renderscriptSupportModeEnabled false
}
1
2
3
4
5
6
7
packagingOptions {

// for renderscript
exclude 'lib/armeabi-v7a/libRSSupport.so'
exclude 'lib/armeabi-v7a/librsjni_androidx.so'
exclude 'lib/armeabi-v7a/librsjni.so'
}

参考文章《android组件化打包module遇到的问题总结(打包成aar)》。

六、Finally

~千里江山寒色远~芦花深处泊孤舟~