写在前面

之前换了新的vps后，找朋友要的调用随机图片的api的php忘记备份了，查了下网上的教程自己copy了一个，顺手让CHATGPT给我做了个随机图片网站

随机图片网站

笔者搭建的随机涩图网站分为三个php
网站本体：提供NSFW与SFW两个图库
外置ip检测：通过ip.com的api接口检测访问者的ip所处位置，符合ip检测条件重定向到另一个php
SFW网站：只有健全图的随机图片网站
本人完全没有php知识，如有纰漏，敬请原谅 我是真的不会啊QAQ

网站本体

笔者像个甲方一样一遍遍让CHATGPT改这改那各种提要求整出来的桌面端和移动端两套背景和控件的源代码其实是因为一开始发现桌面端的背景在移动端呈现的不是很美观才提的要求

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<?php include 'china_sfw.php'; ?>// 调用外置检测php
<?php
$directory1 = 'NSFW'; // 第一个图片文件夹的路径
$directory2 = 'SFW'; // 第二个图片文件夹的路径

$selectedDirectory = null;

if (isset($_GET['library'])) {
    $library = $_GET['library'];
    if ($library === '1') {
        $selectedDirectory = $directory1;
    } elseif ($library === '2') {
        $selectedDirectory = $directory2;
    }
}

if ($selectedDirectory) {
    $images = glob($selectedDirectory . "/*.{jpg,jpeg,png,gif}", GLOB_BRACE);
    if (count($images) === 0) {
        die("No images found in the specified directory.");
    }

    $randomImage = $images[array_rand($images)];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麟雫雫的随机图片</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: url('bg.png') no-repeat center center fixed; /* 桌面端背景图片 */
            background-size: cover;
            position: relative;
        }
        .mobile-body {
            display: none; /* 默认隐藏移动端内容 */
        }
        @media only screen and (max-width: 600px) {
            body {
                background: url('bg-m.png') no-repeat center center fixed; /* 移动端背景图片 */
                background-size: cover;
            }
            .desktop-body {
                display: none; /* 隐藏桌面端内容 */
            }
            .mobile-body {
                display: block; /* 显示移动端内容 */
            }
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* 透明度为70%的黑色图层 */
            z-index: 1;
        }
        .button {
            background-color: #0078d4;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s, box-shadow 0.3s;
            margin: 10px;
            position: relative;
            z-index: 3;
        }
        .button:hover {
            background-color: #005a9e;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .button:active {
            background-color: #004578;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        .container {
            position: relative;
            z-index: 2;
        }
        .controls {
            position: absolute;
            top: 10px;
            left: 10px;
        }
        img {
            max-width: 100%;
            max-height: 100vh;
            transition: transform 0.2s;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="desktop-body">
        <?php if (!$selectedDirectory): ?>
            <div>
                <button class="button" onclick="window.location.href='?library=1'">NSFW</button>
                <button class="button" onclick="window.location.href='?library=2'">SFW</button>
            </div>
        <?php else: ?>
            <div class="container">
                <div class="controls">
                    <button class="button" onclick="location.reload()">换一张</button>
                </div>
                <img id="randomImage" src="<?php echo $randomImage; ?>" alt="随机图片" onwheel="zoom1(event)">
            </div>

            <script>
                let scale = 1;
                const image = document.getElementById('randomImage');

                function zoom1(event) {
                    event.preventDefault();
                    let zoomAmount = 0.0005; // 每次滚轮滚动时缩放比例的变化量
                    scale += event.deltaY * -zoomAmount;
                    scale = Math.min(Math.max(0.1, scale), 4);
                    image.style.transform = `scale(${scale})`;
                }
            </script>
        <?php endif; ?>
    </div>

    <div class="mobile-body">
        <?php if (!$selectedDirectory): ?>
            <div>
                <button class="button" onclick="window.location.href='?library=1'">NSFW</button>
                <button class="button" onclick="window.location.href='?library=2'">SFW</button>
            </div>
        <?php else: ?>
            <div class="container">
                <div class="controls">
                    <button class="button" onclick="location.reload()">换一张</button>
                </div>
                <img id="randomImageMobile" src="<?php echo $randomImage; ?>" alt="随机图片" ongesturechange="zoom2(event)">
            </div>

            <script>
                let initialScale = 1;
                let currentScale = 1;
                const imageMobile = document.getElementById('randomImageMobile');

                function zoom2(event) {
                    event.preventDefault();
                    if (event.scale !== 1) {
                        currentScale = initialScale * event.scale;
                        currentScale = Math.min(Math.max(0.1, currentScale), 4);
                        imageMobile.style.transform = `scale(${currentScale})`;
                    }
                }

                imageMobile.addEventListener('gesturestart', function(event) {
                    initialScale = currentScale || 1;
                });

                imageMobile.addEventListener('gesturechange', zoom);
            </script>
        <?php endif; ?>
    </div>
</body>
</html>

ip检测

朋友给的，稍微改了下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// 获取用户 IP 地址
$user_ip = $_SERVER['REMOTE_ADDR'];

// 使用 IP 地理位置查询服务查询用户地理位置
$api_url = "http://ip-api.com/json/" . $user_ip;
$response = file_get_contents($api_url);
$location = json_decode($response, true);

// 判断用户地理位置是否为中国大陆
if ($location['countryCode'] == 'CN') {
    // 重定向到 rdsfw.php 文件
    header('Location: rdsfw.php');
    exit();
}
?>

SFW网站

根据问CHATGPT写的初版代码加上最后版本的背景设置且去掉按钮后的版本代码，桌面端与移动端共用一套控件

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
$directory = 'Sfw'; // 图片文件夹的路径
$images = glob($directory . "/*.{jpg,jpeg,png,gif}", GLOB_BRACE);

if (count($images) === 0) {
    die("No images found in the specified directory.");
}

$randomImage = $images[array_rand($images)];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麟雫雫的随机健全图</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: url('bgsfw.png') no-repeat center center fixed; /* 桌面端背景图片 */
            background-size: cover;
            position: relative;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* 透明度为70%的黑色图层 */
            z-index: 1;
        }
        img {
            max-width: 100%;
            max-height: 100vh;
            transition: transform 0.2s;
        }
        .container {
            position: relative;
            z-index: 2
        }
        .controls {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="container">
        <img id="randomImage" src="<?php echo $randomImage; ?>" alt="随机图片">
    </div>

    <script>
        let scale = 1;
        const image = document.getElementById('randomImage');

        function zoom(event) {
            event.preventDefault();
            let zoomAmount = 0.0005; // 每次滚轮滚动时缩放比例的变化量
            scale += event.deltaY * -zoomAmount;
            scale = Math.min(Math.max(0.1, scale), 4);
            image.style.transform = `scale(${scale})`;
        }

        image.addEventListener('wheel', zoom);
    </script>
</body>
</html>

这是我搭建的后的完全形态：麟雫雫的随机图片

随机图片api

使用的woozie大佬blog中的源码

1
2
3
4
5
6
7
<?php
$img_array = glob("Sfw/*.{gif,jpg,png,JPG}",GLOB_BRACE); // Sfw改为同目录下的图片文件夹
$img = array_rand($img_array); 
$dz = $img_array[$img];
header("Location:".$dz);
?>

GPT解释的完整的工作流程：

  • 使用 glob 函数获取指定目录中所有符合条件的图片文件路径，并存储在数组 $img_array 中。
  • 使用 array_rand 函数从 $img_array 中随机选取一个元素的键（索引），并存储在 $img 中。
  • 根据随机选取的键从 $img_array 中获取对应的图片路径，并存储在 $dz 中。
  • 使用 header 函数发送 Location 头，将客户端重定向到随机选取的图片。
  • 通过这段代码，当你访问这个PHP文件时，服务器会在指定目录中随机选择一张图片，并重定向到这张图片，最终在浏览器中显示出来。

以下是最终效果