前段时间在看 ActivityPub 文档时发现它们的客户端在加载图片时使用了一种叫做 BlurHash 的技术来显示图片加载出来之前的 Placeholder，效果非常好，而且成本极低，如果集成到 App 中可以很大程度上提高多图页面的用户体验。
这种技术可以让你图片加载出来之前显示一个填充图，这个图看起来有点像原图的高斯模糊，并且显示这个“高斯模糊”时并不需要提前把图片加载出来，计算成本也很低，完全可以当作图片加载完成前的 Placeholder 使用，而不必使用纯色块来填充，类似于下图这样：
右边就是 BlurHash 生成的图片，看起来效果还是可以的，下面就说要如何实现这种技术。
BlurHash 的使用
上面图中的中间图片有一个称为 BlurHash 的字符串，这个字符串就是通过算法计算出来的左边的原图的颜色分布信息，计算结果是一个不算长的字符串，然后客户端按照算法输入 BlurHash String，即可生成右边的那种看起来像高斯模糊一样的图片。
BlurHash 本质上就是一系列算法，因此适用所有的前端平台，包括 Web、Android、iOS 等等，接入的成本也很低。
使用起来是非常简单的，因为算法都很简单，不过我们需要后端的支持，因为后端接口在返回图片 url 给客户端时需要同时把这个图片的 BlurHash String 也返回过来，客户端根据 BlurHash 生成图片当作 Placeholder，再去加载图片，提供用户体验。
项目地址如下：
https://github.com/woltapp/blurhash
因为算法确实比较简单，他们甚至没有提供 SDK，只是提供了每一种语言的实现代码，大家直接把这个代码复制到项目中即可，Kotlin 代码就一个文件，提供 BlurHash ，返回 Bitmap，就这么简单。
不过 Compose 实际使用时需要自己写一点胶水代码，也可以直接用我写好的。
fun Modifier.blurhash(blurHash: String): Modifier = composed {var size: Size? by remember {mutableStateOf(null)}var bitmap: Bitmap? by remember {mutableStateOf(null)}val coroutineScope = rememberCoroutineScope()if (size != null) {DisposableEffect(blurHash) {if (bitmap == null && size != null) {coroutineScope.launch {bitmap = withContext(Dispatchers.IO) {BlurHashDecoder.decode(blurHash = blurHash,width = (size!!.width * 0.5F).roundToInt(),height = (size!!.height * 0.5F).roundToInt(),)}}}onDispose {bitmap?.recycle()bitmap = null}}}onSizeChanged {size = it.toSize()}.drawBehind {if (bitmap != null && size != null) {drawImage(image = bitmap!!.asImageBitmap(),dstSize = IntSize(size!!.width.roundToInt(), size!!.height.roundToInt()),)}}}
其他平台，iOS、Web 这些也按照类似的方式直接集成即可，后端的 SDK 也是有的，直接集成就行了。
