magic-img icon indicating copy to clipboard operation
magic-img copied to clipboard

[feature] 模式支持blurhash

Open subframe7536 opened this issue 3 years ago • 7 comments

感谢大佬的开源项目❤️

希望模式可以支持blurhash,一行hash可以解码成缩略图

subframe7536 avatar Mar 02 '23 02:03 subframe7536

感谢大佬的开源项目❤️

希望模式可以支持blurhash,一行hash可以解码成缩略图

我没有具体使用过这个,你可以简单说下你的想法吗, 比如说加入一个 magic=blurhash,然后占位图片以 blurhash 生成的效果展示?

// 这种是可行的吗
import img from './a.png?magic=blurhash'

lishaobos avatar Mar 02 '23 09:03 lishaobos

是这个意思,这样缩略图只需要在客户端将hash解码就能展示 我自己尝试的时候的参考:https://gist.github.com/ngbrown/d62eb518753378eb0a9bf02bb4723235

subframe7536 avatar Mar 02 '23 10:03 subframe7536

是这个意思,这样缩略图只需要在客户端将hash解码就能展示 我自己尝试的时候的参考:https://gist.github.com/ngbrown/d62eb518753378eb0a9bf02bb4723235

嗯,我看了下,在客户端解码,然后 canvas 渲染我觉得是很慢的,尤其一些 ssr 项目,可能会慢几瞬间,我觉得有一种思路比较适合:构建过程中解码,然后转为 base64 占位图,这样我们生产中几乎瞬间可以看到。

lishaobos avatar Mar 03 '23 02:03 lishaobos

这个 blurhash 可以根据指定 hash,或者根据图片自动生成

lishaobos avatar Mar 03 '23 02:03 lishaobos

这个库看起来很不错 https://github.com/mad-gooze/fast-blurhash

subframe7536 avatar Mar 03 '23 03:03 subframe7536

@subframe7536 ok 了,https://lishaobos.github.io/magic-img/

lishaobos avatar Mar 04 '23 14:03 lishaobos

发现一个优化版的算法 https://evanw.github.io/thumbhash/

subframe7536 avatar Mar 26 '23 03:03 subframe7536