悦 · 图片转换

一款纯前端实现的图片格式转换与处理工具，无需后端服务器，所有操作均在浏览器端完成，保障图片隐私安全。

• 多格式转换：支持 JPG/PNG/WebP/AVIF/GIF/BMP/SVG/HEIF 等格式互转，输出格式包含 WebP/AVIF/JPG/PNG/HEIF/APNG/TIF
• 画质调节：支持 1-100 品质调节，针对有损压缩格式（如 WebP/AVIF）精准控制
• 尺寸处理：
  • 原始尺寸保留
  • 按比例缩放（1%-500%）
  • 自定义尺寸（支持锁定宽高比）
  • 自定义裁切（预设 1:1/4:3/3:2/16:9/9:16 等比例）
• 水印添加：支持上传水印图片，自定义水印位置、大小、透明度、边距
• 文件命名：支持自定义前缀/后缀命名规则
• 对比预览：转换前后图片滑动对比，直观查看效果
• 批量处理：支持多文件批量上传、转换、下载
• 本地操作：所有处理均在浏览器完成，图片永不上传至服务器

• 响应式设计：适配移动端/桌面端，断点适配 640px 以下设备
• 交互体验：
  • 拖拽上传 + 点击上传双模式
  • 平滑过渡动画（hover/active/拖拽状态）
  • 滑块调节（画质/透明度）实时反馈
  • 模态框/提示框优雅交互
• 性能优化：
  • DOM 缓存减少重复查询
  • 渐进式加载与动画
  • 支持 prefers-reduced-motion 适配系统动画偏好

1. 克隆/下载本项目代码
2. 直接用浏览器打开 image-converter.html 文件
3. 开始使用（无需搭建服务器）

1. 上传图片：
   • 方式1：点击上传区域，选择本地图片
   • 方式2：拖拽图片到上传区域
2. 配置参数：
   • 选择输出格式（默认 WebP）
   • 调节画质（默认 85）
   • 选择尺寸处理方式（原始/缩放/自定义/裁切）
   • （可选）启用水印并配置水印参数
   • （可选）配置文件命名规则
3. 开始转换：点击「开始转换」按钮，等待处理完成
4. 预览/下载：
   • 单文件：点击「对比」查看效果，点击「下载」保存文件
   • 批量：点击「全部下载」打包获取所有转换后文件

• 直接打开 image-converter.html 文件即可使用
• 支持 Chrome/Firefox/Safari/Edge 等现代浏览器
• 无需任何依赖，零配置启动

如需通过 HTTP 协议访问（解决部分浏览器本地文件限制）：

# 方法1：使用 Python 内置服务器
python -m http.server 8000

# 方法2：使用 Node.js http-server
npm install -g http-server
http-server -p 8000

# 方法3：使用 Nginx/Apache 部署
# 将文件放入服务器根目录，直接访问即可

image-converter.html
├── HTML 结构：页面布局与组件
├── CSS 样式：
│   ├── 变量定义（颜色/圆角/阴影等）
│   ├── 重置样式
│   ├── 响应式布局
│   ├── 交互动画
│   └── 组件样式（上传区/设置面板/模态框等）
└── JavaScript 逻辑：
    ├── 配置管理（localStorage 持久化）
    ├── 文件处理（上传/解析/预览）
    ├── 图片转换核心（Canvas 操作）
    ├── 水印处理逻辑
    ├── 对比预览功能
    ├── 下载功能（单文件/批量）
    └── 交互事件处理（拖拽/点击/滑块等）

本项目采用 MIT 许可证 - 详见 LICENSE 文件

1. 部分格式（如 AVIF/HEIF）在旧版浏览器中可能不支持预览，但不影响文件下载
2. GIF/APNG 动图转换可能存在帧丢失风险，建议转换前备份
3. 超大图片（＞10MB）处理可能导致浏览器卡顿，建议分批次处理
4. 水印图片建议使用 PNG 透明格式，效果最佳

作者：yefengs
更新日志：https://yefengs.com/3038.html
如有问题或建议，欢迎提交 Issue 或联系作者。

🌟 如果你觉得这个工具对你有帮助，欢迎 Star 支持！