# 还在用灰秃秃的图片占位符?快来试试这款神器

还在用灰秃秃的图片占位符?快来试试这款神器

每次你加载设计师精心设计的界面,结果因为图片都没加载出来,满屏都是灰秃秃的占位图,这是不是让设计师很抓狂?当你想往数据里塞小缩略图当占位图来解决这个问题时,数据库工程师是不是也会很头疼?那还不快来试试flutter_blurhash

工作原理

BlurHash 是一种紧凑的表示形式,可将图像转换为简短的字符串,借助这些字符串能快速生成图像的模糊占位图,这样在高分辨率图像加载期间,用户就能看到一个模糊的预览图像,进而提升用户体验。 BlurHash的字符串长度通常在20-30个,既可以在JSON中使用也可以存放到数据库,所以可以随着API一起返回。

这个字符串长度取决你设置的比例

BlurHash生成

获取图片的 BlurHash 的一种快速简便的方法是将其上传到blursha.sh

当然也可以使用官方开源代码实现,也有第三方代码实现,支持cSwiftpython等语言具体可以看blurhash

使用及实际效果

flutter_blurhas目前只有解码功能,并不支持对图片编码。

dart 复制代码
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("BlurHash")),
        body: const SizedBox.expand(
          child: Center(
            child: AspectRatio(
              aspectRatio: 1.7,
              child: BlurHash(hash: "LNF5L5^*F@Nt}^-oOtR*EVS8V[ac"),
            ),
          ),
        ),
      ),
    );
  }
}

实际运行效果

原图

优化模式

  • BlurHashOptimizationMode.none:原始算法,用于向后兼容。
  • BlurHashOptimizationMode.standard:优化后的解码模式,具有更好的缓存局部性和性能。
  • BlurHashOptimizationMode.approximation:最快模式,使用近似的sRGB转换,结果略暗但性能显著提升。
dart 复制代码
class BlurHashApp extends StatelessWidget {
  const BlurHashApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("BlurHash")),
      body: const SizedBox.expand(
        child: Center(
          child: AspectRatio(
            aspectRatio: 1.6,
            child: BlurHash(
              hash: "LNF5L5^*F@Nt}^-oOtR*EVS8V[ac",
              optimizationMode: BlurHashOptimizationMode.approximation,
            ),
          ),
        ),
      ),
    ),
  );
}

结束语

顺便提一下,欢迎关注我的微信公众号OpenFlutter。

相关推荐
烛阴17 分钟前
Mix
前端·webgl
代码续发29 分钟前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
ITfeib2 小时前
Flutter基础
flutter
hui函数2 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante2 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam3 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript