Featured image of post 通过Cloudflare Workers自建随机图片接口

通过Cloudflare Workers自建随机图片接口

图片数据

我是爬取的Lorem Picsum的图片,而这上面的图片来自于UnsplashLicense

我将图片数据直接放置于./static/webp目录下的,

即通过https://example.com/webp/1.webp可获取到图片资源。

一共爬取到992张800*600webp格式的图片压缩包:

picsum.photos.zip分卷1 | 分卷2

分卷1、分卷2都需要下载才能解压

因为Cloudflare限制每个文件最大25MB,超过会导致Cloudflare Pages部署失败。

Cloudflare Workers

Cloudflare Workers 目前仅支持JavaScrip模块

  1. 将源码中的url设置为你自己的站点即可
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  let seed_str = request.url.split('?')[1].split('=')[1]
  let seed_num = 0
  for(let i in seed_str){
    seed_num += seed_str[i].charCodeAt()
  }

  const min = 1
  const max = 992
  let random_num = Math.floor(Math.random()*(max-min+1)+min) + seed_num
  random_num = random_num % max

  let url = 'https://example.com/webp/' + random_num + '.webp'

  return fetch(url)
}
  1. 自定义域名,格式:example.com/*

不能仅填写example.com,这样会造成状态码为522

我的随机图片接口

https://img.gezi.men/random?seed=xxx

xxx:自定义字符串

欢迎大家使用(反正都是白嫖Cloudflare的

自建随机图片接口的好处

  • 之前:使用的Lorem Picsum的接口,无法缓存,每次刷新(F5)或进入新的页面图片都需要向服务器重新获取。
  • 现在:可以让Cloudflare CDN和浏览器缓存图片,之后则会直接加载缓存中的数据,无需向服务器重新获取,通过强制刷新缓存(Ctrl+F5)可更新图片。
comments powered by Disqus
Built with Hugo
主题 StackJimmy 设计