flutter 采用 BlurHash 算法实现图像缩略图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJABtYBp-1629332631551)(https://ducafecat.tech/2021/08/19/translation/exploring-blurhash-image-placeholder-in-flutter/2021-08-19-06-32-44.png)]

原文

https://medium.com/flutterdevs/exploring-blurhash-image-placeholder-in-flutter-24dad611c487

代码

https://github.com/ducafecat/getx_quick_start

参考

• https://pub.dev/packages/flutter_blurhash
• https://blurha.sh/
• https://github.com/woltapp/blurhash

正文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odpQHWbo-1629332631553)(https://ducafecat.tech/2021/08/19/translation/exploring-blurhash-image-placeholder-in-flutter/2021-08-19-06-19-55.png)]

根据联想速度的不同，从网络中叠加一张图片可能需要几分钟时间。在获取图片时，完全可以预期它会显示一个占位符。有一些显示占位符的策略。例如，您可以显示一个彩色框。在任何情况下，如果占位符可以像真实的图片一样，那就更令人愉快了。因此，你可以使用 BlurHash。

在这个博客中，我们将探索 Flutter 图片占位符。我们将看到如何实现 blur hash 的演示程序，以及如何使用 BlurHash 作为图像占位符，在您的 flutter 应用程序中使用 flutter_blurhash 包。

https://pub.dev/packages/flutter_blurhash

简介

BlurHash 是图片占位符的保守描述。它的工作原理是从图片生成一个散列字符串。生成的散列字符串将用于传递占位符。本文介绍了在 Flutter 应用程序中解析要作为图片占位符交付的 BlurHash 字符串的最佳方法。

演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mpv0xzEU-1629332631553)(https://ducafecat.tech/2021/08/19/translation/exploring-blurhash-image-placeholder-in-flutter/demo.gif)]

这个演示视频展示了如何在 Flutter 中使用 blurhash。它展示了 blurhash 如何在您的 Flutter 应用程序中使用 flutter_blurhash