网的时候,看到有别人搭建的随机图片API,觉得挺有意思,就在网上翻找了一些资料,在这里搭建一个,记录一下过程。
搭建PHP环境
——————————————————————————————————————————————————–
这个网上教程挺多,不多废话,我简单贴一下自己的nginx
配置文件img.conf
:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
server {
listen 80;
server_name img.example.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 http2 ssl;
server_name img.example.com;
root /path/to/dir;
index index.php;
ssl_certificate /path/to/cer;
ssl_certificate_key /path/to/key;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m;
ssl_session_tickets off;
ssl_protocols TLSv1.3;
ssl_prefer_server_ciphers off;
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /path/to/ca;
add_header Strict-Transport-Security "max-age=63072000" always;
resolver dns.google;
set $flag 0;
if (!-e $request_filename) {
rewrite ^/(.*)$ /index.php;
break;
}
if ($request_uri !~ ^/img/(.+)$) {
set $flag "${flag}1";
}
if ($request_uri != /info.php) {
set $flag "${flag}1";
}
if ($flag = "011") {
rewrite ^/(.*)$ /index.php;
}
location ~ \.php$ {
fastcgi_pass unix:/run/php/php8.1-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
|
其实是在Typecho
博客的配置上改的,用来也没什么大问题,就这样了。😉
新建PHP文件
——————————————————————————————————————————————————–
在网站根目录下新建index.php
文件,内容如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<?php
//调用次数简单统计,文件为count.txt
if (!file_exists("count.txt")) {
$count_file = fopen("count.txt", "w+");
fwrite($count_file, "1");
fclose($count_file);
} else {
$num = file_get_contents("count.txt");
$num++;
file_put_contents("count.txt", "$num");
}
//调用图片数量,记录文本为num.txt
if (!file_exists("num.txt")) {
$num_file = fopen("num.txt", "w+");
fwrite($num_file, "1");
fclose($num_file);
} else {
$img_num = file_get_contents("num.txt");
}
//获取随机图片名,存放随机图片的文件为img.txt
$name_file = "img.txt";
$pic = "";
$img_url = "https://img.example.com/img/";
if (!file_exists($name_file)) {
die('Name file does not exist!');
} else {
//生成随机数
$seed = time();
$rand_num = rand(0, $img_num - 1);
//生成连接
$fs = new SplFileObject($name_file, 'r');
$fs->seek($rand_num);
$pic = trim($fs->current());
$pic = $img_url . $pic;
//返回指定连接
die(header("Location: $pic"));
}
|
代码取自Tianli’s blog,我略改了一下,可以在count.txt
中查看调用次数。不过我看很多教程都用的是这个代码,会不会已经是常见写法了?😂
之后在根目录下创建img.txt
文件,记录文件名;创建img
文件夹或软连接,存储图片。
因为我的图片没几张,这样也就够了,不用麻烦数据库了。
记录图片名
————————————————————————————————————————————————————
按说这一步并不复杂,
|
1
|
ls /path/to/img > /path/to/img.txt
|
这一条命令就可以搞定了,但个人有点强迫症,想要给图片编号,又想名称显示一部分随机数,所以就写了一个小脚本,但以下完全是可以忽略的。
创建一个shell脚本format-name.sh
,脚本内容如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#!/bin/bash
IMG_DIR=/path/to/dir
NAME_FILE=/path/to/img.txt
NUM_FILE=path/to/num.txt
num=0
OIFS=$IFS
IFS=$'\n'
mkdir $IMG_DIR/temp && cd $IMG_DIR
while read line; do
if [ -f $line ]; then
((num=num+1))
img_type=${line##*.}
mv $IMG_DIR/$line $IMG_DIR/temp/"$num-$(head -n 4 /dev/urandom | tr -dc "A-Za-z0-9" | cut -c 1-8).$img_type"
fi
done <<< $(ls $IMG_DIR)
IFS=$OIFS
mv $IMG_DIR/temp/* $IMG_DIR
rm -rf $IMG_DIR/temp
ls -v $IMG_DIR > $NAME_FILE
echo -n $num > $NUM_FILE
|
用chmod +x format-name.sh
赋权。
脚本执行后,img.txt
内容形似:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
1-e3f0ed.jpeg
2-ff6f5b.jpg
3-ef334b.jpeg
4-dc8fc7.jpg
5-59fd04.png
6-b3ca5c.jpg
7-693d52.jpg
8-f1ffd1.jpg
9-5acf0d.jpeg
10-38f5c3.jpg
11-8289d4.jpeg
12-8120d6.jpg
13-41f9fd.jpg
14-4cabde.png
15-2c1202.jpeg
|
还可以crontab -e
安装定时任务,一天执行一次。
|
1
|
0 0 * * * /path/to/format-name.sh > /dev/null
|
一切都搞定后,其实访问网址就可以自动跳转随机图片了。
测试一下Demo,

直接套了Cloudfalre
,国内速度未必理想,可以通过选择不同的存储来优化,这里就不多说了。
另外,还可以建立一个简单的数据统计页面,把有关调用的信息展示出来。
如在网站根目录下新建info.php
,内容如下:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>API Info</title>
<link rel="shortcut icon" href="https://pic.imgdb.cn/item/627133750947543129f53204.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
* {
font-family: 'ZCOOL XiaoWei', serif
}
#bg {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1
}
#bg:after,
#bg:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
#bg:before {
-moz-transition: background-color 2.5s ease-in-out .75s;
-webkit-transition: background-color 2.5s ease-in-out .75s;
-ms-transition: background-color 2.5s ease-in-out;
transition: background-color 2.5s ease-in-out .75s;
transition-delay: .75s;
background-image: linear-gradient(to top, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), url(https://jitsu.oss-cn-beijing.aliyuncs.com/home/img/overlay.png);
background-size: auto, 256px 256px;
background-position: center, center;
background-repeat: no-repeat, repeat;
z-index: 2
}
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 325ms ease-in-out, -moz-filter 325ms ease-in-out;
-webkit-transition: -webkit-transform 325ms ease-in-out, -webkit-filter 325ms ease-in-out;
-ms-transition: -ms-transform 325ms ease-in-out, -ms-filter 325ms ease-in-out;
transition: transform 325ms ease-in-out, filter 325ms ease-in-out;
background-image: url(https://iw233.cn/api.php?sort=pc);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1
}
.box1 {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
font-size: xx-large;
}
.box2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: xx-large;
}
.box3 {
color: coral;
}
</style>
</head>
<body>
<div id="bg"></div>
<div class="box1">
<h1>API调用情况</h1>
</div>
<div class="box2">
<h2>图片数量   <a class="box3"><?php echo file_get_contents("num.txt"); ?></a>张</h2>
<h2>调用次数   <a class="box3"><?php echo file_get_contents("count.txt"); ?></a>次</h2>
</div>
</body>
</html>
对前端不熟,代码是根据这里改的,访问https://img.example.com/info.php
即可显示API相关信息。
抛砖引玉,按需改动。
搞完后,感到一种莫名的满足感。🤣不过没必要的话不必随便改动名字,留着原来图片名字,说不定还好找一点。
就这样了。
OVER