Files
random-background-api/BLOG.md
2026-06-24 22:10:26 +08:00

3.3 KiB
Raw Blame History

[萌芽妙妙工具]RandBG API一个零成本、可自托管的随机背景图片API

开源地址: github.com/shumengya/randbg-api
开源协议: MIT License
在线体验: randbg.smyhub.com 作者: 树萌芽


前言

平时写博客、做落地页,总需要随机背景图。用别人的服务怕挂、怕限速;自己搭又嫌重。我想要一个够轻、够快、够便宜的方案——最好不用维护服务器,直接部署就能跑。

Cloudflare Workers 的 Free Tier 每月 10 万次请求,对个人项目完全够用。问题是:图片放哪儿?

直接把图片塞进 Worker 脚本不行Worker 有 4 MiB 体积限制,几十张图直接撑爆。

所以我把架构拆成两层Worker 只跑 API 逻辑,图片和前端页面全部走 Workers Static Assets


项目架构

┌─────────────┐     ┌──────────────────┐     ┌──────────────┐
│   用户请求   │────▶│ Cloudflare Worker│────▶│ Static Assets│
│             │     │   /api/random    │     │  WebP 图片   │
└─────────────┘     └──────────────────┘     └──────────────┘

Worker 端:不到 200 行 JS只做三件事——读 manifest.json、识别设备、302 或 JSON 响应。

静态端public/ 目录下放 index.htmlmanifest.json、编号 WebP 图片。wrangler deploy 一次把前后端一起发布。

这样做的好处很直接:

  • Worker 脚本极小,冷启动几乎无感
  • 图片走 Cloudflare CDN全球缓存
  • 不涉及数据库,无状态,不存在宕机

核心功能

设备识别

根据 User-AgentSec-CH-UA-Mobile 自动判断移动端/桌面端,返回对应方向的图片。你也可以手动指定:

curl https://randbg.smyhub.com/api/random?mode=mobile

响应格式

默认 302 Redirect 直接跳转到图片地址,浏览器里一行就能用:

<img src="https://randbg.smyhub.com/api/random" />

加上 ?format=json 返回元数据,方便前端自己控制加载逻辑:

{
  "variant": "desktop",
  "folder": "desketop-image",
  "filename": "7.webp",
  "url": "https://randbg.smyhub.com/desketop-image/7.webp",
  "count": 19
}

构建流程

写了个 build.py,功能单一但够用:

  1. 扫描 mobile-image/desketop-image/ 目录
  2. 用 Pillow 把原图转为编号 WebP1.webp2.webp...
  3. 输出到 public/ 并生成 manifest.json
  4. 如果已有 WebP 且没有原图,自动保留,不会误删
python3 build.py
npm run deploy

部署

整个部署流程是:

  1. 把原图扔进 mobile-image/desketop-image/
  2. python3 build.py 转 WebP
  3. npm run deploy 推到 Cloudflare

从改图到上线,本地测试用 npm run dev,本地 8787 端口就能跑。没有 Docker没有数据库没有环境变量要填。


如果你也需要一个零成本、不用维护的随机背景服务,可以直接 Fork 用。代码量很小,改起来不费劲。