通过自建 API 获取网页截图并上传到 R2 生成直链

简介

此脚本是一个 Cloudflare Worker，用于截取网页并将截图自动上传到指定的 S3 兼容存储（如 AWS S3、Backblaze B2 或 Cloudflare R2）。它支持各种参数配置，例如截图格式、延迟、图像质量和截图区域等，能够根据请求自动生成截图并返回 S3 存储的 URL。

前置条件

• 一个 Cloudflare 账号并开通 R2 存储，点此注册，需要绑卡
• 或者一个 Backblaze 账号并开通 B2 存储，点此注册，无需绑卡
• 如果你在本项目中使用 R2 存储，请先看 开通R2并绑定自定义域名的教程
• 如果你在本项目中使用 B2 存储，就先看 我的教程
• 到 apiflash 注册一个免费的 API_KEY，点此注册，该 API 限制每月请求 100 次
• 按以下代码设置 R2 的 CORS 跨域规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "DELETE",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "ETag"
    ],
    "MaxAgeSeconds": 3600
  }
]

• B2 存储的 CROS 跨域规则设置较为麻烦，看 这篇教程

基本逻辑

• 通过 CF worker 反代获取 apiflash API 对指定网站的截图，同时不在前端暴露 API_KEY 信息
• 将截图上传到 R2 或 B2 存储
• 返回截图信息，包括直链地址

部署

• 到 CF 新建一个 worker
• 到此仓库复制 sitesc/sitesc-api-back.js代码，粘贴到 worker 中，点击部署
• 设置以下环境变量

环境变量配置说明

兼容性说明

此代码兼容以下 S3 兼容存储服务：

1. Cloudflare R2：

   • S3_ENDPOINT: https://<account-id>.r2.cloudflarestorage.com
   • upload_type: “Cloudflare R2”

2. Backblaze B2：

   • S3_ENDPOINT: https://s3.<region>.backblazeb2.com
   • upload_type: “Backblaze B2”

3. 其他 S3 兼容服务：

   • 将使用默认的 “S3” 作为 upload_type

使用说明

请求方式：get

接口路径：/sc

接口示例: 被截图的网站必须带 http:// 或 https:// 前缀

1

https://your-worker-url/sc/https://github.com

进阶用法

• 指定截图类型 type，默认 webp，支持 jpg、png、webp

1

https://your-worker-url/sc/https://github.com?type=png

• 其他主要参数

进阶示例：

1

https://your-worker-url/sc/https://github.com?type=jpg?width=1920?height=1080?wait_until=page_loaded&quality=

支持的上传平台

1. Cloudflare R2：

   • S3_ENDPOINT: https://<account-id>.r2.cloudflarestorage.com
   • upload_type: “Cloudflare R2”

2. Backblaze B2：

   • S3_ENDPOINT: https://s3.<region>.backblazeb2.com
   • upload_type: “Backblaze B2”

3. 其他 S3 兼容服务：

   • 将使用默认的 “S3” 作为 upload_type

返回数据示例

1
2
3
4
5
6
7
8

{
  "target_url": "https://example.com",
  "screenshot_time": "2025-07-02 10:30:45",
  "direct_url": "https://b2qq.xxxxxx.com/apiflash/screenshot-20250702103045.png",
  "upload_type": "Cloudflare R2", // 或 "Backblaze B2"
  "bucket_name": "your-bucket-name",
  "upload_path": "apiflash/screenshot-20250702103045.png"
}

其中 direct_url 即为截图上传后的直链地址

#cloudflare #存储 #建站