图压缩官网说明

项目概览

“图压缩”是一个纯静态单页官网，首页即提供图片压缩工具。用户可以在浏览器本地上传图片，调节压缩质量，修改输出尺寸，并下载压缩后的图片。

项目不依赖后端接口，也不需要构建流程，直接打开 index.html 即可预览和使用。

核心功能

• 支持上传 JPEG、PNG、WebP 图片。
• 使用浏览器 Canvas 在本地完成压缩，不上传用户图片。
• 支持质量调节，默认质量为 80%。
• 支持尺寸修改：
  • 等比例模式：修改宽度或高度时，另一边自动按比例计算。
  • 自定义模式：宽度和高度分别生效，可输出非原始比例图片。
• 支持查看压缩结果：
  • 原图大小
  • 压缩后大小
  • 节省比例
  • 输出格式
  • 输出尺寸
• 支持下载压缩图，文件名默认追加 -compressed。
• 支持中文、英文、日语三种语言切换。
• 语言文案集中维护在 locales.js 中。

页面结构

• 顶部导航：品牌名、功能、优势、立即使用、语言切换。
• Hero 区：左侧展示产品卖点，右侧直接放置图片压缩面板。
• 压缩面板：上传、质量调节、尺寸设置、结果预览和下载。
• 功能区：介绍格式支持、质量调节、尺寸修改和快速下载。
• 优势区：强调本地处理、流程快速、适合多场景使用。
• FAQ 和页脚：说明支持格式、隐私处理和压缩结果差异。

技术实现

• index.html：页面结构和主要 UI。
• styles.css：响应式布局、视觉样式、语言选择框和工具面板样式。
• script.js：上传、压缩、尺寸计算、语言切换、下载逻辑。
• locales.js：中文、英文、日语语言资源。

压缩流程：

1. 用户选择或拖拽图片。
2. 使用 createImageBitmap 读取图片尺寸。
3. 校验图片格式和像素数量。
4. 根据质量和尺寸设置绘制到 Canvas。
5. 使用 canvas.toBlob 生成压缩图片。
6. 展示压缩结果，并生成下载链接。

当前限制

• 最大图片尺寸限制为 2400 万像素以内，即 宽度 x 高度 <= 24,000,000。
• 暂无明确文件体积限制，限制重点是 Canvas 解码和绘制时的像素数量。
• 不支持放大图片，输出宽高不能超过原图宽高。
• 自定义宽高不会裁剪图片，比例不同会直接拉伸图片。
• PNG 输出会转为 WebP，以便获得更好的压缩效果。
• 无批量压缩、历史记录、服务端存储或账号系统。

使用方式

1. 打开 index.html。
2. 拖入图片，或点击上传区域选择图片。
3. 根据需要调整质量滑杆。
4. 根据需要选择等比例或自定义尺寸模式。
5. 查看压缩后大小、节省比例、输出格式和输出尺寸。
6. 点击下载按钮保存压缩后的图片。

测试清单

• 上传 JPEG、PNG、WebP，确认都能生成压缩结果。
• 上传非图片文件，确认提示格式不支持。
• 上传超过 2400 万像素的图片，确认显示尺寸过大提示。
• 调整质量滑杆，确认压缩结果重新生成。
• 等比例模式下修改宽度，确认高度自动更新。
• 等比例模式下修改高度，确认宽度自动更新。
• 自定义模式下修改宽高，确认两个输入互不联动。
• 输入空值、0、负数或超过原图尺寸，确认下载按钮不可用并显示提示。
• 切换中文、英文、日语，确认页面文案和控件状态正常。
• 检查桌面和移动端布局，确认无横向滚动、文字重叠或按钮溢出。

后续可改进方向

• 增加批量压缩和批量下载。
• 增加输出格式选择，例如 JPEG、WebP、PNG。
• 增加压缩前后图片视觉对比。
• 增加目标文件大小模式，例如压缩到 500KB 以内。
• 增加 EXIF 方向处理和元数据保留选项。
• 增加深色模式。
• 增加更完整的无障碍测试和键盘操作细节。
• 增加自动化浏览器测试，覆盖上传、尺寸调整和语言切换。