文章目录
这是一个基于PHP的独立Web应用，支持拖拽上传、实时预览、字体选择和尺寸调节，完全适配Typecho等内容管理系统。
2026年2月28日更新：
新增功能
-
背景类型新增“预设图片”选项
-
自动扫描
presets/目录下的图片（支持jpg、png、webp）并显示为缩略图供选择 -
预览和生成时均支持预设图片背景
使用步骤
-
在程序根目录创建
presets文件夹。 -
将您喜欢的背景图片放入该目录（支持 jpg、png、webp）。
-
刷新界面，即可在“预设图片”选项中看到这些图片，点击即可使用。
文件修改说明
-
index.php：增加预设图片扫描、UI 选择器、预览逻辑 -
api.php：增加预设图片处理逻辑
新增目录
在程序根目录创建 presets 文件夹，并将您喜欢的背景图片放入其中。支持格式：jpg、jpeg、png、webp。
注意事项
-
确保
presets目录可读（一般755权限即可）。 -
预设图片的文件名将直接用于URL，建议使用英文字母、数字、下划线，避免特殊字符。
-
如果预设目录为空，界面会提示“暂无预设图片”，不影响其他功能。
项目结构
thumbnail-generator/
├── index.php # 主界面（HTML+CSS+JS）
├── api.php # 图片生成API
├── fonts/ # 存放字体文件（TTF）
├── uploads/ # 临时上传背景图存储
├── cache/ # 生成的缩略图缓存
└── README.md # 使用说明
使用说明 (README.md)
# 文章缩略图生成器
一个轻量、可自定义的缩略图生成工具，专为Typecho等博客系统设计。支持拖拽上传、实时预览、字体选择和尺寸调节。
## 功能特点
- 独立部署，无需数据库
- 响应式界面，支持移动端
- 实时预览画布
- 背景：纯色、渐变、上传图片
- 文字：主标题/副标题，可调字体、颜色、大小、对齐
- 预设模板快速切换
- 生成高清PNG图片，一键下载
## 安装步骤
1. 将所有文件上传至服务器（如 `/thumbnail-generator/`）
2. 确保 `uploads/` 和 `cache/` 目录可写（权限755或777）
3. 在 `fonts/` 目录放入TTF字体文件（支持中文请使用思源黑体、阿里巴巴普惠体等）
4. 访问 `index.php` 即可使用
## 字体准备
本工具需要TrueType字体（.ttf）来渲染文字。您可以从以下位置获取免费商用字体：
– [思源黑体](https://github.com/adobe-fonts/source-han-sans)
– [阿里巴巴普惠体](https://www.alibabafonts.com/)
下载后放入 `fonts/` 目录即可。
## 与Typecho集成
您可以通过以下方式将生成的缩略图嵌入文章：
1. 生成图片后点击下载，上传至Typecho媒体库
2. 或直接复制图片链接，在文章中使用 `<img src=””>` 引用
3. 可结合自定义字段，将缩略图URL存入文章
## 技术栈
– 前端：原生HTML/CSS/JS，Canvas实时预览
– 后端：PHP 7+，GD库扩展
– 存储：文件系统
## 注意事项
– 确保PHP已启用GD库和mbstring扩展
– 上传的图片临时存储在 `uploads/`，生成图片缓存于 `cache/`，建议定期清理
部署与使用
-
准备环境：确保PHP版本≥7.0，已安装
gd、mbstring扩展。 -
上传文件：将上述代码保存为对应文件，创建
fonts、uploads、cache目录并设置可写权限。 -
添加字体：下载至少一个TTF字体放入
fonts目录（如不添加，程序将无法正常渲染文字）。 -
访问使用：通过浏览器访问
index.php即可开始设计缩略图。
核心流程
-
实时预览：所有参数调整都会自动更新左侧Canvas预览（300ms防抖）。
-
生成图片：点击“生成缩略图”按钮，将当前配置（包括上传的背景图）通过FormData提交至
api.php。 -
后端处理：
api.php使用GD库合成图片，保存至cache目录，返回可访问的URL。 -
结果展示：前端显示生成的图片并提供下载链接。
这个工具完全独立，不依赖任何第三方库，轻量可控.
演示：https://layu.net/thumbnail-generator/
# 文章缩略图生成器
一个轻量、可自定义的缩略图生成工具，专为Typecho等博客系统设计。支持拖拽上传、实时预览、字体选择和尺寸调节，新增**预设背景图片**功能，可从内置图片库快速选择背景。
## 功能特点
- 独立部署，无需数据库
- 响应式界面，支持移动端
- 实时预览画布
- 背景：纯色、渐变、上传图片、**预设图片**
- 文字：主标题/副标题，可调字体、颜色、大小、对齐
- 预设模板快速切换（明亮、深色、渐变、极简）
- 生成高清PNG图片，一键下载
## 安装步骤
1. 将所有文件上传至服务器（如 `/thumbnail-generator/`）
2. 确保以下目录可写（权限755或777）：
- `uploads/`（临时上传背景图）
- `cache/`（生成的缩略图缓存）
3. 在 `fonts/` 目录放入TTF字体文件（支持中文请使用思源黑体、阿里巴巴普惠体等）
4. **可选**：在 `presets/` 目录放入预设背景图片（支持jpg、png、webp），程序将自动显示在界面中供选择
5. 访问 `index.php` 即可使用
## 字体准备
本工具需要TrueType字体（.ttf）来渲染文字。您可以从以下位置获取免费商用字体：
- [思源黑体](https://github.com/adobe-fonts/source-han-sans)
- [阿里巴巴普惠体](https://www.alibabafonts.com/)
下载后放入 `fonts/` 目录即可。
## 预设背景图片
1. 在程序根目录创建 `presets` 文件夹。
2. 将您喜欢的背景图片放入该目录（支持 jpg、png、webp）。
3. 在界面中选择“预设图片”背景类型，即可看到所有图片缩略图，点击即可使用。
## 与Typecho集成
您可以通过以下方式将生成的缩略图嵌入文章：
1. 生成图片后点击下载，上传至Typecho媒体库
2. 或直接复制图片链接，在文章中使用 `
` 引用
3. 可结合自定义字段，将缩略图URL存入文章
## 技术栈
- 前端：原生HTML/CSS/JS，Canvas实时预览
- 后端：PHP 7+，GD库扩展
- 存储：文件系统
## 注意事项
- 确保PHP已启用GD库和mbstring扩展
- 上传的图片临时存储在 `uploads/`，生成图片缓存于 `cache/`，建议定期清理
- 预设图片文件名建议使用英文字母、数字、下划线，避免特殊字符导致URL问题
0