Somehash: A Blurhash-Inspired Exploration
a year ago
- #user-experience
- #web-development
- #image-processing
- 作者介绍了Somehash——一个受Blurhash启发、用于自定义图像占位符的解决方案。
- Somehash旨在通过快速生成的创意占位符，在图像加载期间吸引访客注意力。
- 该方案包含三个阶段：处理（提取图像信息）、占位（渲染占位符）、加载（显示完整图像）。
- 关键技术考量包括提取极简数据（如20字节）并确保在所有网络速度下快速渲染。
- 使用Python工具链（如Pillow、NumPy和scikit-learn）通过KMeans聚类进行图像处理和色彩提取。
- 存储宽高比以防止布局偏移，并对数据进行编码以实现Python与React间的传输。
- React组件会将提取的色彩渲染为动态竖线条动画，直至完整图像加载完成。
- 未来优化方向包括将动画与图像onload事件关联以实现更流畅的过渡效果。
- 该项目侧重探索性而非生产就绪，欢迎贡献更多创意占位符设计方案。