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

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

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

相关推荐
夏梦春蝉41 分钟前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github