图片字幕生成器

项目介绍

这是一个简单易用的图片字幕生成器，可以为图片添加多行字幕，每行字幕都有独立的背景，呈现切割感效果。用户可以自定义字幕的高度、字体大小、字体颜色和背景颜色，并将生成的图片保存到本地。

功能特点

1. 图片上传：支持上传本地图片作为背景
2. 字幕自定义：
   • 可设置字幕高度（每行字幕的高度）
   • 可设置字体大小
   • 可设置字体颜色
   • 可设置背景/轮廓颜色
3. 多行字幕：支持添加多行字幕，每行显示为独立的一条
4. 切割效果：每行字幕都有独立的背景，形成切割感
5. 图片导出：可将添加字幕后的图片保存为PNG格式

使用方法

1. 点击"上传图片"按钮，选择本地图片
2. 在右侧控制面板设置字幕参数：
   • 字幕高度：调整每行字幕的高度
   • 字体大小：调整字体的大小
   • 字体颜色：选择字体的颜色
   • 轮廓颜色：选择字幕背景的颜色
3. 在文本框中输入字幕内容，每行将显示为独立的一条字幕
4. 点击"生成字幕图片"按钮，保存生成的图片

技术实现

• 前端：HTML5、CSS3、JavaScript
• UI框架：Bootstrap 5
• 图标：Font Awesome
• 图片导出：html2canvas

项目结构

• index.html：主页面HTML结构
• style.css：样式表
• script.js：JavaScript功能实现

注意事项

• 图片过大可能会影响性能
• 字幕行数过多可能会超出图片底部范围
• 建议使用现代浏览器（Chrome、Firefox、Edge等）获得最佳体验