WebSC——网站截图直链服务

写文档的时候要插个网页截图，流程你懂的：打开浏览器、截图、裁剪、上传图床、复制链接，一套下来好几分钟。一天截十几张图的话，光这个流程就能把人搞烦。

WebSC 就是为这个写的——输入网址，直接拿到一张截图的直链。链接贴浏览器里就是一张图，不用手动截图，不用上传图床。

功能与特性

• 输入网址，返回直链——把链接贴给任何人，打开就是网页截图
• 简写域名也支持——/github.com 和 /https://github.com 都行，末尾带不带斜杠也一样
• 三种分辨率输出——1080P / 720P / 360P，16:9 比例
• WebP 格式——体积小、加载快，浏览器兼容性好
• 浏览器统一 1080P 渲染——截图引擎固定 1920×1080 视口，输出时再缩放到目标分辨率，保证渲染一致性
• 图片质量可调——通过环境变量控制 WebP 压缩比
• 浏览器缓存 1 天，CDN 缓存 30 天——访问过的截图秒开
• 落地页路径可自定义——默认 /websc，环境变量随便改

技术栈

• 运行时：Cloudflare Workers
• 截图引擎：Cloudflare Browser Rendering Quick Actions
• 图片处理：Cloudflare Image Resizing（cf.image）
• 存储：R2 Bucket（WebP 文件）
• 数据库：KV（元数据）
• 语言：TypeScript（单文件，无框架依赖）

项目地址

yutian81/websc

输入网站 URL或域名，一键生成截图直链，支持多分辨率，自动转为 WebP 格式 · TypeScript · ★ 0

github.com

部署方法

准备工作

• 一个 Cloudflare 账号
• 绑定了 Cloudflare 的域名（用于开启图片转换功能）

切记！

部署前需要在 CF 面板开启图片格式转换：

• CF 管理面板 → 侧边栏 → 媒体 → Images → 转换
• 点击你准备使用的域名右侧 … → 启用

方式一：CLI 部署

最快的方式，适合首次部署：

1
2
3
4
5
6
7
8
9
10
11

# 克隆项目
git clone https://github.com/yutian81/websc.git

# 安装依赖
cd websc && npm install

# 登录并部署
npx wrangler login
npm run deploy

# 去 CF Dashboard 设置环境变量

方式二：Git 集成部署

1. 把代码推到 GitHub 仓库
2. CF Dashboard → Workers & Pages → 创建 Worker（名称 websc）
3. Worker 设置页 → 连接到 Git → 授权并选择仓库和分支
4. 构建命令填 npm run deploy，其他留空
5. 添加环境变量（见下方表格）
6. 推送代码，自动触发部署

wrangler.toml 里声明的 R2、KV、Browser 绑定，首次部署时 wrangler 会自动创建并关联，不需要进 Dashboard 手动配置。

环境变量

在 CF Dashboard → Worker → websc → 设置 → 环境变量 中添加：

使用方法

落地页生成

访问 https://你的域名/websc，输入目标网址，点击生成，页面会展示三条直链和截图预览。

直链访问

[!note]
可以不用前端网页，直接访问下面的地址，也可以得到截图

部署完成后，直链的格式是这样的：

1
2
3
4
5
6
7
8
9

# 简写形式（推荐）
https://你的域名/github.com
https://你的域名/github.com?h=720

# 完整形式（带协议）
https://你的域名/https://github.com

# 末尾带斜杠也一样
https://你的域名/github.com/

分辨率控制

?h= 参数控制输出图片的分辨率，默认 1080P：

三种分辨率在 POST 生成时一次性全部截取并存到 R2，不需要单独请求。

一点心得

整个项目就一个 TypeScript 文件，没装框架，没用 Puppeteer。截图用 Cloudflare 的 Quick Actions，图片转换用 cf.image，缩放加 WebP 转换一次搞定。

R2 里每个目标存三个分辨率，KV 里存一条元数据。POST 生成时三张一起截一起存，GET 访问时缓存优先，没有就自动截图。没什么花活。

如果你也在频繁截图，可以试试。

#Cloudflare #图床