Just to See You

自建简单随机图片API

 Linux  1649  4   

上网的时候，看到有别人搭建的随机图片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>图片数量&nbsp&nbsp&nbsp<a class="box3"><?php echo file_get_contents("num.txt"); ?></a>张</h2>
        <h2>调用次数&nbsp&nbsp&nbsp<a class="box3"><?php echo file_get_contents("count.txt"); ?></a>次</h2>
    </div>
</body>

</html>

对前端不熟，代码是根据这里改的，访问https://img.example.com/info.php即可显示API相关信息。

抛砖引玉，按需改动。

搞完后，感到一种莫名的满足感。🤣不过没必要的话不必随便改动名字，留着原来图片名字，说不定还好找一点。

就这样了。

OVER

updatedupdated2023-04-072023-04-07