Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] 模式支持blurhash #4

Open
subframe7536 opened this issue Mar 2, 2023 · 7 comments
Open

[feature] 模式支持blurhash #4

subframe7536 opened this issue Mar 2, 2023 · 7 comments

Comments

@subframe7536
Copy link

感谢大佬的开源项目❤️

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

@lishaobos
Copy link
Owner

lishaobos commented Mar 2, 2023

感谢大佬的开源项目❤️

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

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

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

@subframe7536
Copy link
Author

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

@lishaobos
Copy link
Owner

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

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

@lishaobos
Copy link
Owner

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

@subframe7536
Copy link
Author

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

@lishaobos
Copy link
Owner

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

@subframe7536
Copy link
Author

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

@subframe7536 subframe7536 reopened this Mar 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants