咋想的（#

想必你也曾看过使用CF-R2搭建随机图api吧

而实际使用下来会出现以下问题：

容量有限？
CF慢？
10w请求数太少？

突然我想了想，欸！github仓库好像没有容量限制！

欸！最近的EdgeOne有免费计划！

原先想直接使用github page来直接搭建api。最终发现github page好像不执行js代码。嘶那该咋办呢？

某天，在看EdgeOne的数据时发现了边缘函数。可以执行js！

在我不断的超那超这，终于整好了（

部署教程！#

准备工作：

整一个有免费套餐的EdgeOne账号
搞一个github账号
搞到一个域名和一堆瑟瑟图片（

第一步：

github创建一个仓库
创建一个名为jpg的文件夹和 index.html num.json
将所有图片名称从1开始命名，并且所有格式改为png（这一步的批量命名可以找ai给一个bat代码。而转换格式也是一样，但是这里推荐使用python。）

py转换

1
import os
2
import random
3
import string
4
from PIL import Image
5

6
def random_string(length=24):
7
    """生成指定长度的随机字符串，包含数字和字母"""
8
    characters = string.ascii_letters + string.digits
9
    return ''.join(random.choice(characters) for _ in range(length))
10

11
def convert_images_to_png(directory):
12
    """将指定目录下的所有图片文件转换为PNG格式，并删除原文件"""
13
    supported_formats = ('.jpg', '.jpeg', '.bmp', '.gif', '.tiff', '.webp')
14
    for filename in os.listdir(directory):
15
        if filename.lower().endswith(supported_formats):
16
            input_path = os.path.join(directory, filename)
17
            output_path = os.path.join(directory, os.path.splitext(filename)[0] + '.png')
18
            try:
19
                with Image.open(input_path) as img:
20
                    img.save(output_path, 'PNG')
21
                os.remove(input_path)  # 删除原文件
22
                print(f"Converted and deleted: {filename}")
23
            except Exception as e:
24
                print(f"Failed to convert {filename}: {e}")
25

26
def rename_files_with_random_names(directory):
27
    """将指定目录下的所有PNG文件用随机数字字母重命名"""
28
    for filename in os.listdir(directory):
29
        if filename.lower().endswith('.png'):
30
            random_name = random_string() + '.png'
31
            old_path = os.path.join(directory, filename)
32
            new_path = os.path.join(directory, random_name)
33
            os.rename(old_path, new_path)
34
            print(f"Renamed {filename} to {random_name}")
35

36
def rename_files_sequentially(directory):
37
    """将指定目录下的所有PNG文件按1.2.3到n的顺序重命名"""
38
    png_files = [f for f in os.listdir(directory) if f.lower().endswith('.png')]
39
    png_files.sort()  # 按文件名排序
40
    for index, filename in enumerate(png_files, start=1):
41
        new_name = f"{index}.png"
42
        old_path = os.path.join(directory, filename)
43
        new_path = os.path.join(directory, new_name)
44
        os.rename(old_path, new_path)
45
        print(f"Renamed {filename} to {new_name}")
46

47
if __name__ == "__main__":
48
    current_directory = os.getcwd()  # 获取当前目录
49
    print("Converting images to PNG...")
50
    convert_images_to_png(current_directory)
51
    print("Renaming PNG files with random names...")
52
    rename_files_with_random_names(current_directory)
53
    print("Renaming PNG files sequentially...")
54
    rename_files_sequentially(current_directory)
55
    print("All operations completed.")

index.html写入以下内容

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>Random Image</title>
5
</head>
6
<body>
7
    <script>
8
        // 生成1到x之间的随机数，这里818改为你命名到的图片名称数值
9
        const randomNumber = Math.floor(Math.random() * 818) + 1;
10
        // 跳转到随机图片
11
        window.location.href = `/jpg/${randomNumber}.png`;
12
    </script>
13
</body>
14
</html>

num.json写入以下内容

1
{
2
    "num":818
3
}

其中818为照片数量

示例仓库：https://github.com/boringstudent/jpg

将准备好的图片一股脑上传到所建仓库的jpg文件夹中
打开仓库的设置（settings） -> 页面（page） -> 生成和部署（Build and deployment）下面的分支（Branch）改为主要（main）

然后点击保存

如果需要绑定域名等则在自定义域（Custom domain）中进行修改

将github.io的资源绑定到eo cdn

第一步：打开eo的域名管理点击添加域名

加速域名填写绑定的域名

源站配置为 你的github用户名.github.io

第二步：打开你域名提供商的管理面板，添加cname解析

主机记录为你要所绑定的域名

记录值为eo在部署cdn给你的 CNAME

打开eo的高级能力 -> 边缘函数 -> 函数管理

点击新建函数，随便选择一个模板。函数名称随意

输入以下代码：

1
addEventListener('fetch', event => {
2
  event.respondWith(handleRequest(event.request));
3
});
4

5
async function handleRequest(request) {
6
  const url = new URL(request.url);
7
  const path = url.pathname;
8
  const origin = url.origin;
9

10
  if (path === '/jpg') {
11
    return getRandomImageResponse();
12
  } else if (path === '/json') {
13
    const num = parseInt(url.searchParams.get('num'), 10);
14
    if (!isNaN(num) && num > 0) {
15
      return getMultipleImageUrlsResponse(num, origin);
16
    } else {
17
      return new Response(JSON.stringify({ error: "Invalid 'num' parameter. Please provide a positive integer." }), {
18
        status: 400,
19
        headers: { 'Content-Type': 'application/json' }
20
      });
21
    }
22
  } else if (path === '/url') {
23
    const num = parseInt(url.searchParams.get('num'), 10);
24
    if (!isNaN(num) && num > 0) {
25
      return getSingleImageContentResponse(num);
26
    } else {
27
      return new Response(JSON.stringify({ error: "Invalid 'num' parameter. Please provide a positive integer." }), {
28
        status: 400,
29
        headers: { 'Content-Type': 'application/json' }
30
      });
31
    }
32
  } else {
33
    return new Response('Not Found', { status: 404 });
34
  }
35
}
36

37
async function getPhotoCount() {
38
  const response = await fetch('https://xxxx.chmlfrp.com/num.json');
39
  const data = await response.json();
40
  return data.num;
41
}
42

43
function getOriginalImageUrl(num) {
44
  return `http://xxxx.chmlfrp.com/jpg/${num}.png`;
45
}
46

47
async function getRandomImageResponse() {
48
  const totalImages = await getPhotoCount();
49
  const num = Math.floor(Math.random() * totalImages) + 1;
50
  const imageUrl = getOriginalImageUrl(num);
51
  const response = await fetch(imageUrl);
52
  if (!response.ok) {
53
    return new Response('Failed to fetch image', { status: 500 });
54
  }
55
  return new Response(response.body, {
56
    status: response.status,
57
    headers: response.headers
58
  });
59
}
60

61
async function getSingleImageContentResponse(num) {
62
  const imageUrl = getOriginalImageUrl(num);
63
  try {
64
    const response = await fetch(imageUrl);
65
    if (!response.ok) {
66
      return new Response('Failed to fetch image', { status: 500 });
67
    }
68
    return new Response(response.body, {
69
      status: response.status,
70
      headers: response.headers
71
    });
72
  } catch (error) {
73
    return new Response('Failed to fetch image', { status: 500 });
74
  }
75
}
76

77
async function getMultipleImageUrlsResponse(num, origin) {
78
  const totalImages = await getPhotoCount();
79
  const urls = [];
80
  for (let i = 0; i < num; i++) {
81
    const randomNum = Math.floor(Math.random() * totalImages) + 1;
82
    const fullUrl = `${origin}/url?num=${randomNum}`;
83
    urls.push(fullUrl);
84
  }
85
  return new Response(JSON.stringify({ urls }), {
86
    status: 200,
87
    headers: { 'Content-Type': 'application/json' }
88
  });
89
}

其中http://xxxx.chmlfrp.com/jpg/${num}.jpg 的xxxx.chmlfrp.com改为你绑定的域名

点击部署，等待部署完成

点击触发规则,分别为host 等于你api部署的域名

打开eo的域名管理，添加域名

源站为边缘函数的默认访问域名

记录为你api部署的域名

同样的，把eo所给的 CNAME 添加到域名的解析中

这样就完成了随机图api的搭建咯！

更新手法！#

按序添加照片至仓库的jpg文件夹
修改仓库的num.json文件中的数量

api文档#

直接调用：你的域名/jpg

返回json：你的域名/json?num=3 （其中num为返回链接的数量[必填！]）

非随机直接调用你的域名/url?num=3 （其中num为图片的序列号）

api示例#

http://xxx.chmlfrp.com/jpg

http://xxx.chmlfrp.com/json?num=3

http://xxx.chmlfrp.com/url?num=3