图片预加载体验优化中，Blurhash是一个相当实用的方案。它由Wolt团队开源，核心思路是把一张图片编码成一个仅20到30个字符的字符串，前端拿到这个字符串后就能在画布上绘制出高度模糊但颜色接近原图的占位图。相比传统的低分辨率缩略图，Blurhash不需要额外的图片请求，数据量也小得多。这篇文章将围绕Flask框架，演示如何把一张在线图片URL转换成Blurhash键，并提供可直接运行的完整代码。
Blurhash的工作原理与适用场景
Blurhash的本质是一种有损的图像压缩算法。它把图片的RGB像素值转换到频域空间（基于DCT离散余弦变换的思想），只保留前几个频率分量，通常取4x3的分量组合。这些分量包含图片的大致亮度分布和主色调信息，丢弃的则是细节纹理。编码结果是一段Base83编码的字符串，例如UBL_:rOpGG-;~qRjWbay，解码后就能还原出一张模糊图。
这套方案最常见的使用场景是社交类应用的信息流。服务端在保存图片时同时生成Blurhash键并存储到数据库，客户端请求列表数据时把Blurhash一并返回，前端先用它渲染占位图，等真实图片下载完成后再淡入替换。Instagram的渐进式图片加载体验本质上就是类似的思路。需要注意的是，Blurhash只适合做预览占位，不能替代缩略图，因为它丢失了几乎所有细节。
在编码尺寸上有一个实用技巧：并不需要用原图来编码。Blurhash官方建议把图片缩放到32x32以内再计算，速度会快几十倍，而编码结果几乎一致。这是因为在频域上只取前几个分量，大图小图的低频信息是基本相同的。后面的代码实现中会体现这一点。
Flask服务端实现：下载图片并生成Blurhash键
Python生态中实现Blurhash主要依赖两个库：blurhash-python负责编码解码，Pillow负责图片的下载、解码和缩放处理。前者是C扩展实现，速度比纯Python库快很多。安装方式如下：
pip install blurhash pillow flask requests
下面是完整的Flask接口代码。设计思路是接收一个POST请求，参数中携带图片URL，服务端用requests下载图片，交给Pillow处理并缩放，再调用blurhash模块的encode函数得到结果。整个流程都做了异常捕获，避免网络问题导致服务崩溃。
from io import BytesIO
import blurhash
import requests
from flask import Flask, request, jsonify
from PIL import Image
app = Flask(__name__)
def generate_blurhash_from_url(image_url: str, x_components: int = 4, y_components: int = 3) -> str:
"""下载在线图片并生成Blurhash键"""
headers = {"User-Agent": "Mozilla/5.0"}
resp = requests.get(image_url, headers=headers, timeout=10)
resp.raise_for_status()
# 直接从内存中打开图片，避免写磁盘
image = Image.open(BytesIO(resp.content))
# 如果图片带透明通道，先转换为RGB，否则编码会报错
if image.mode != "RGB":
image = image.convert("RGB")
# 缩放到小尺寸，大幅提升编码速度，且不影响编码质量
image = image.resize((32, 32), Image.LANCZOS)
return blurhash.encode(image, x_components=x_components, y_components=y_components)
@app.route("/api/blurhash", methods=["POST"])
def blurhash_api():
data = request.get_json(silent=True)
if not data or "url" not in data:
return jsonify({"code": 400, "msg": "缺少url参数"}), 400
image_url = data["url"]
if not image_url.startswith(("http://", "https://")):
return jsonify({"code": 400, "msg": "url格式不合法"}), 400
try:
hash_key = generate_blurhash_from_url(image_url)
except requests.exceptions.Timeout:
return jsonify({"code": 504, "msg": "图片下载超时"}), 504
except Exception as e:
return jsonify({"code": 500, "msg": f"生成失败: {str(e)}"}), 500
return jsonify({"code": 0, "msg": "ok", "blurhash": hash_key})
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True)调用方式很简单，用curl或者任何HTTP客户端发起POST请求即可：
curl -X POST http://127.0.0.1:5000/api/blurhash \
-H "Content-Type: application/json" \
-d '{"url": "https://picsum.photos/800/400"}'返回结果中blurhash字段就是编码后的字符串。关于x_components和y_components这两个参数，它们控制频率分量的数量，默认4x3已经够用。调大到8x6会让模糊图更清晰一些，但字符串长度也会增加，计算耗时上升，需要根据实际体验权衡。
常见问题排查与性能优化建议
实际部署时会遇到几个典型问题。第一是RGBA图片报错。网络上大量PNG图片带透明通道，直接传给blurhash.encode会抛出异常，所以代码中必须先判断image.mode并调用convert("RGB")。第二是超大图片导致的内存和CPU压力，有些用户上传的原图动辄几千像素宽，全尺寸编码会非常慢，务必先resize。第三是requests默认没有UA头，部分图床会返回403，加上User-Agent可以规避。
性能方面，如果接口需要批量处理大量图片URL，建议引入异步方案。可以结合Celery把编码任务丢到后台队列，接口立即返回任务ID，前端轮询结果。对于同步场景，也可以用Gunicorn启动多个worker来提高吞吐。另外要设置合理的超时时间，避免某个慢速图床拖垮整个worker。
还有一个容易被忽视的点是安全。接口直接下载用户提供的URL存在SSRF风险，恶意请求可能访问内网地址如http://192.168.0.1。生产环境应校验目标IP是否为公网地址，或者维护一个允许的图片域名白名单。这类防护在生产服务中不可省略。
前端如何使用Blurhash键
服务端生成只是流程的一半，前端解码同样简单。以主流的blurhashJavaScript库为例，通过npm安装后，几行代码就能把字符串渲染到Canvas上：
import { decode } from "blurhash";
function renderBlurhash(canvas, hash) {
const width = 32;
const height = 32;
const pixels = decode(hash, width, height);
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(width, height);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
}解码时同样不需要高分辨率，32x32的小画布配上CSS的filter: blur()或直接拉伸展示，视觉效果已经足够。等真实图片通过img标签加载完成，再用透明度过渡替换掉Canvas即可，整体体验非常顺滑。
总结一下，在Flask中实现图片URL到Blurhash键的转换，核心就是下载、转RGB、缩放、编码四步。代码量不大，但对信息流类产品的加载体验提升明显。把生成逻辑集成到图片上传流程中，与图片地址一起入库，前端取数据时顺带返回，就是一个完整的落地方案。