网站图片是影响用户体验和网站性能的重要因素之一。如果图片过大、过多或者格式不合适，会导致网页加载缓慢、占用流量和存储空间，甚至影响网站的SEO排名。为了解决这些问题，我们可以使用图片预处理工具，对网站图片进行优化和处理，例如：
- 转换图片格式为webp或avif，这两种格式可以在保持图片质量的同时，大幅减少图片大小。
- 智能压缩图片，根据图片内容和场景，自动调整图片质量和尺寸，达到最佳的平衡。
- 自由裁剪图片，根据不同的设备和屏幕尺寸，动态生成适合的图片版本，避免浪费带宽和空间。
- 添加水印图片，为网站图片增加版权保护和品牌宣传的效果。
本文将引导读者通过在腾讯云Lighthouse服务器部署Flarum和Imgproxy，且实现论坛图片在不修改原图的基础上增加上述图片预处理能力。
购买并配置Lighthouse服务器
Lighthouse是腾讯云推出的一款轻量应用服务器产品，它提供了高性价比、高可用性、高安全性和高灵活性的云端计算服务。具体信息参阅官方文档：轻量应用服务器概述。
为了部署imgproxy服务，我们需要购买一台轻量应用服务器，并配置好相关的环境和依赖。购买步骤参见官方文档：使用轻量应用服务器一键创建应用，应用类型请选择k3s。
编写Flarum和Imgproxy配置文件
Flarum 是一款非常简洁的PHP开源论坛程序，它响应快速、简便易用，拥有打造高质量社区的一切功能。Flarum 还高度可扩展，可以对它进行深度定制。
Imgproxy 是一个基于Go语言开发的、轻量级的、无状态的图片代理服务，它可以快速地处理任何来源的图片，并提供丰富的参数和选项来定制化输出结果。Imgproxy 支持多种格式、压缩算法、裁剪模式、水印样式等功能，并且可以轻松地集成到任何网站或应用中。
Webox 是一款基于PHP和Nginx的轻量级Web应用容器，它可以快速地部署和运行任何PHP应用，例如WordPress、Flarum、Discuz、Typecho等。Webox 还支持多版本PHP和多版本Nginx，可以根据应用的需求来选择不同的版本，详见 https://github.com/rehiy/webox-docker。
为了快速部署应用，我们使用了两个容器化的应用程序：rehiy/webox:nginx-php8.1 和 imgproxy。前者用于部署Flarum，后者用于部署Imgproxy。下面我们先生成一些配置文件，请按照路径写入服务器。
这里有必要提醒一下，文件中的换行符应是
LF，否则可能会导致脚本无法正常工作。
1）Nginx 配置文件
文件路径 /srv/etc/nginx/host.d/flarum.conf，请注意修改为你的域名。
server {
listen 80;
server_name bbs.opentdp.org;
set $pool default;
set $pooldir /var/www/$pool;
set $sitedir $pooldir/org.opentdp.bbs;
root $sitedir/public;
index index.php index.htm index.html;
try_files $uri $uri/ /index.php?$query_string;
include http.d/server_fastcgi_php;
location ~ ^/(assets/files/. (png|jpg|jpeg|webp|avif|gif|ico|svg|heic|bmp|tiff))$ {
set $image local:///org.opentdp.bbs/public/$1;
proxy_pass http://127.0.0.1:8080/$image_option/plain/$image;
}
}
map $args $image_option {
~^xs g:sm/rs:auto:320;
~^sm g:sm/rs:auto:640/wm:1:soea:::0.2;
~^md g:sm/rs:auto:800/wm:1:soea:::0.2;
~^lg g:sm/rs:auto:1024/wm:1:soea:::0.2;
~^xl g:sm/rs:auto:1280/wm:1:soea:::0.2;
~^xxl g:sm/rs:auto:1600/wm:1:soea:::0.2;
~^3xl g:sm/rs:auto:2048/wm:1:soea:::0.2;
~^4xl g:sm/rs:auto:2560/wm:1:soea:::0.2;
~^5xl g:sm/rs:auto:3264/wm:1:soea:::0.2;
~^6xl g:sm/rs:auto:4080/wm:1:soea:::0.2;
default g:sm/rs:auto:1024/wm:1:soea:::0.2;
}2）Flarum 自动安装脚本
文件路径 /srv/etc/wkit.d/s7-flarum
#!/bin/sh
#
if [ ! -x /usr/bin/composer ]; then
wget -qO composer-setup.php https://getcomposer.org/installer
php composer-setup.php --install-dir=/usr/bin --filename=composer
rm composer-setup.php
fi
if [ ! -f /var/www/default/org.opentdp.bbs/composer.json ]; then
mdkir -p /var/www/default/org.opentdp.bbs
## install flarum ##
cd /var/www/default/org.opentdp.bbs
composer create-project flarum/flarum .
composer require flarum-lang/chinese-simplified
fi3）Flarum 计划任务脚本
文件路径 /srv/etc/periodic/5min/flarum-cron
#!/bin/sh
#
cd /var/www/default/org.opentdp.bbs
php flarum schedule:run
chown -R 2:2 .4）添加水印和回退图片
回退图片路径 /srv/htdocs/fallback.png，找不到图片时使用这个图作为回退
水印图片路径 /srv/htdocs/watermark.svg，务必使用svg格式，否则会水印可能变形或模糊
5）kubernetes 配置文件
文件路径 /srv/myforum.yaml
kind: Deployment
apiVersion: apps/v1
metadata:
name: &name myforum
labels:
app: *name
spec:
selector:
matchLabels:
app: *name
template:
metadata:
labels:
app: *name
spec:
containers:
- name: nginx-php8
image: rehiy/webox:nginx-php8.1
ports:
- containerPort: 80
volumeMounts:
- name: *name
subPath: etc
mountPath: /var/config
- name: *name
subPath: htdocs
mountPath: /var/www/default
- name: imgproxy
image: darthsim/imgproxy
env:
- name: IMGPROXY_READ_TIMEOUT
value: "30"
- name: IMGPROXY_WRITE_TIMEOUT
value: "30"
- name: IMGPROXY_MAX_SRC_RESOLUTION
value: "1200"
- name: IMGPROXY_WATERMARK_PATH
value: /htdocs/watermark.svg
- name: IMGPROXY_FALLBACK_IMAGE_PATH
value: /htdocs/fallback.png
- name: IMGPROXY_LOCAL_FILESYSTEM_ROOT
value: /htdocs
- name: IMGPROXY_IGNORE_SSL_VERIFICATION
value: "true"
- name: IMGPROXY_JPEG_PROGRESSIVE
value: "true"
- name: IMGPROXY_PNG_INTERLACED
value: "true"
- name: IMGPROXY_ENFORCE_AVIF
value: "true"
- name: IMGPROXY_ENFORCE_WEBP
value: "true"
ports:
- containerPort: 8080
volumeMounts:
- name: *name
subPath: htdocs
mountPath: /htdocs
volumes:
- name: *name
hostPath:
path: /srv
type: DirectoryOrCreate
---
kind: Service
apiVersion: v1
metadata:
name: &name myforum
labels:
app: *name
spec:
selector:
app: *name
ports:
- name: http
port: 80
targetPort: 80
---
kind: Ingress
apiVersion: networking.k8s.io/v1
metadata:
name: &name myforum
annotations:
traefik.ingress.kubernetes.io/router.entrypoints: web
spec:
rules:
- host: bbs.opentdp.org
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: *name
port:
name: http配置文件中的每个环境变量都有特定的作用，简单地介绍一下：
- IMGPROXY_READ_TIMEOUT 设置从源读取图像的超时时间（以秒为单位）
- IMGPROXY_WRITE_TIMEOUT 设置将图像写入客户端的超时时间（以秒为单位）
- IMGPROXY_MAX_SRC_RESOLUTION 设置源图像的最大分辨率（以像素为单位），超过此分辨率的图像将被拒绝
- IMGPROXY_WATERMARK_PATH 设置水印图像的本地路径，如果启用了水印功能，imgproxy将使用此图像作为水印
- IMGPROXY_FALLBACK_IMAGE_PATH 设置备用图像的本地路径，如果源图像无法加载或处理，imgproxy将使用此图像作为替代
- IMGPROXY_LOCAL_FILESYSTEM_ROOT 设置本地文件系统的根目录，如果源URL以
local://开头，imgproxy将从此目录中查找文件 - IMGPROXY_IGNORE_SSL_VERIFICATION 设置是否忽略SSL证书验证，如果为
true，imgproxy将不检查源服务器的SSL证书是否有效 - IMGPROXY_JPEG_PROGRESSIVE 设置是否生成渐进式JPEG图像，如果为
true，imgproxy将生成可以逐步显示的JPEG图像 - IMGPROXY_PNG_INTERLACED 设置是否生成交错PNG图像，如果为
true，imgproxy将生成可以逐步显示的PNG图像 - IMGPROXY_ENFORCE_AVIF 设置是否强制使用AVIF格式，如果为
true，imgproxy将忽略请求中指定的格式，并始终生成AVIF图像（浏览器不支持则忽略） - IMGPROXY_ENFORCE_WEBP 设置是否强制使用WEBP格式，如果为
true，imgproxy将忽略请求中指定的格式，并始终生成WEBP图像（浏览器不支持则忽略）
部署Flarum和Imgproxy服务
通过ssh登录服务器，执行以下命令，部署Flarum和Imgproxy服务。
代码语言：javascript复制kubectl apply -f /srv/myforum.yaml等待配置完成，已经成功地部署并集成了flarum论坛和imgproxy服务，也可以在你的新论坛上享受快速、安全、灵活的图片处理功能了。
测试Imgproxy图片优化能力
在浏览器打开这个地址 https://img.yuanmabao.com/zijie/pic/2023/09/09/53t2v33ubru.jpg，观察图片是否正常显示。
- 无论原图尺寸多大，默认将输出最大宽度为
1024px的图片 - 查看图片右下角，将会显示我们添加的水印，且占最长边始终占图片对应边长的20%大小。
- 查看响应头信息，如果浏览器支持将包含
Content-Disposition: inline; filename="1692350245-285421-img30.webp"等类型信息。 - 添加缩放参数，例如在图片地址后面添加
?sm，将会生成一个最大宽度为640px的缩略图。更多参数如下：- xs -- 320px
- sm -- 640px
- md -- 800px
- lg -- 1024px
- xl -- 1280px
- xxl -- 1600px
- 3xl -- 2048px
- 4xl -- 2560px
- 5xl -- 3264px
- 6xl -- 4080px
结束语
本文以Flarum论坛程序作为引子，测试了Imgproxy的基础能力，实际上广大读者可以依据教程扩展到其他任何需要图片处理的场景中去，起码基于本文可以很简单的实现扩展Wordpress、Disucz等php应用的图片处理能力。
