📷 在线图片压缩工具

一个简单易用的在线证件照压缩工具，可以在保持原有尺寸的情况下，将图片压缩至1M以下。

✨ 功能特性

• 🖼️ 保持原尺寸：压缩过程不改变图片的宽度和高度
• 🗜️ 智能压缩：自动调整压缩质量，确保文件小于1M
• 👀 实时对比：同时显示原图和压缩后的效果
• 📊 详细信息：显示图片尺寸和文件大小
• 💾 一键下载：快速保存压缩后的图片
• 🎨 美观界面：现代化的渐变设计，响应式布局
• 📱 移动端支持：完美适配手机和平板设备

🚀 快速开始

在线使用

1. 下载项目文件
2. 直接在浏览器中打开 index.html
3. 开始使用！

本地部署

# 克隆或下载项目
git clone <your-repo-url>

# 进入项目目录
cd image-compressor

# 使用任意 HTTP 服务器运行，例如：
# Python 3
python -m http.server 8000

# Node.js (需要安装 http-server)
npx http-server

# 然后在浏览器访问 http://localhost:8000

📖 使用说明

上传图片

支持两种上传方式：

1. 点击上传：点击上传区域，选择图片文件
2. 拖拽上传：直接将图片拖拽到上传区域

支持格式

• JPG / JPEG
• PNG
• WEBP
• 其他浏览器支持的图片格式

压缩过程

1. 上传图片后，工具会自动开始压缩
2. 使用二分法智能调整JPEG质量参数
3. 确保压缩后文件小于1M
4. 显示压缩前后的对比效果

下载图片

点击"💾 下载压缩图片"按钮，压缩后的图片会自动下载到本地，文件名格式为 compressed_原文件名.jpg

🛠️ 技术栈

• HTML5：页面结构
• CSS3：样式和动画效果
• JavaScript (ES6+)：核心压缩逻辑
• Canvas API：图片处理和压缩

📁 项目结构

image-compressor/
├── index.html      # 主页面
├── style.css       # 样式文件
├── script.js       # 核心逻辑
└── README.md       # 项目说明

🔧 核心原理

压缩算法

1. 使用 Canvas API 绘制原图
2. 保持原始宽高不变
3. 通过二分法查找最佳JPEG质量参数
4. 最多尝试10次，找到最接近1M的压缩质量
5. 输出为JPEG格式（压缩率更高）

代码示例

// 核心压缩函数
async function compressImage(file) {
    const targetSize = 1 * 1024 * 1024; // 1MB
    
    // 使用二分法查找最佳质量
    let quality = 0.9;
    let minQuality = 0.1;
    let maxQuality = 0.95;
    
    // 通过Canvas API进行压缩
    canvas.toBlob((blob) => {
        // 根据文件大小调整质量参数
    }, 'image/jpeg', quality);
}

🌟 特色功能

智能压缩

• 如果原图已经小于1M，使用高质量（0.95）保存
• 如果原图大于1M，自动调整质量参数
• 最多10次迭代，快速找到最佳压缩比

用户体验

• 拖拽上传支持
• 加载动画提示
• 实时预览对比
• 响应式设计

📝 注意事项

• 压缩后的图片格式统一为JPEG
• 透明背景的PNG会转换为白色背景
• 建议上传的原图质量较高，以获得更好的压缩效果
• 浏览器需要支持Canvas API和Blob API

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

💡 常见问题

Q: 为什么压缩后的图片还是超过1M？
A: 极少数情况下，由于图片内容复杂度极高，即使使用最低质量也可能超过1M。建议先适当裁剪图片尺寸。

Q: 支持批量压缩吗？
A: 当前版本仅支持单张图片压缩，批量功能可在后续版本中添加。

Q: 压缩会损失画质吗？
A: 会有轻微的画质损失，但工具会尽可能在文件大小和画质之间找到最佳平衡点。

Q: 可以离线使用吗？
A: 可以！所有处理都在浏览器本地完成，无需网络连接。

📧 联系方式

如有问题或建议，欢迎联系！