# ImageResizer

**Repository Path**: hyz2xx/image-resizer

## Basic Information

- **Project Name**: ImageResizer
- **Description**: ImageResizer 是一个简单易用的在线图像处理工具，专门用于调整图片尺寸并添加自定义背景。该工具完全基于前端技术开发，无需后端服务器支持，所有图片处理都在用户浏览器本地完成，确保数据隐私安全。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-31
- **Last Updated**: 2025-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🖼️ ImageResizer - 在线图像尺寸调整工具

## 📝 项目简介

ImageResizer 是一个简单易用的在线图像处理工具，专门用于调整图片尺寸并添加自定义背景。该工具完全基于前端技术开发，无需后端服务器支持，所有图片处理都在用户浏览器本地完成，确保数据隐私安全。

## ✨ 核心功能

### 🎯 主要特性
- **自定义尺寸设置**: 支持任意宽高尺寸设置，最大支持4000x4000像素
- **预设尺寸快选**: 提供常用尺寸快捷按钮（1920×1080、1280×720等）
- **多种背景选项**: 支持透明背景和自定义颜色背景
- **灵活缩放模式**: 提供自适应缩放和保持原尺寸两种模式
- **智能图片居中**: 自动将上传的图片居中放置，保持原始宽高比
- **拖拽上传**: 支持拖拽文件到上传区域
- **实时预览**: 提供原图和处理结果的实时预览
- **一键下载**: 支持PNG格式下载，保持透明背景

### 🛠️ 技术特性
- **纯前端实现**: 无需服务器，完全在浏览器中运行
- **响应式设计**: 适配桌面和移动设备
- **文件格式支持**: JPG、PNG、GIF等常见图片格式
- **文件大小限制**: 最大支持10MB图片文件
- **现代浏览器兼容**: 支持所有现代浏览器

## 🚀 使用方法

### 1. 设置目标尺寸
- 在左侧面板输入目标宽度和高度
- 或点击预设尺寸按钮快速设置

### 2. 选择背景
- **透明背景**: 适合需要透明背景的场景
- **颜色背景**: 使用颜色选择器或输入十六进制颜色值

### 3. 设置图片缩放模式
- **自适应缩放**: 图片会自动缩放以适应目标尺寸，保持宽高比
- **保持原尺寸**: 图片保持原始大小，超出部分会被裁剪

### 4. 上传图片
- 点击上传区域选择文件
- 或直接拖拽图片文件到上传区域
- 支持JPG、PNG、GIF格式，最大10MB

### 5. 处理和下载
- 点击"生成图片"按钮处理图片
- 在右侧预览处理结果
- 点击"下载图片"保存到本地

## 💻 技术栈

- **HTML5**: 页面结构和语义化标签
- **CSS3**: 样式设计和动画效果
- **JavaScript (ES6+)**: 核心逻辑和图片处理
- **Tailwind CSS**: UI框架和响应式设计
- **Canvas API**: 图片绘制和处理
- **File API**: 文件上传和处理

## 📁 项目结构

```
image-tools/
├── index.html          # 主页面文件
├── script.js           # JavaScript核心逻辑
└── README.md           # 项目说明文档
```

## 🔧 安装和运行

### 本地运行
1. 克隆或下载项目文件
2. 直接在浏览器中打开 `index.html` 文件
3. 无需安装额外依赖，即可开始使用

### 部署到服务器
1. 将所有文件上传到Web服务器
2. 通过域名或IP地址访问 `index.html`
3. 支持GitHub Pages、Vercel、Netlify等静态托管平台

## 🎨 界面预览

### 主界面布局
- **左侧面板**: 参数设置区域（尺寸、背景、上传）
- **右侧面板**: 预览区域（原图、处理结果、图片信息）

### 功能区域
1. **尺寸设置**: 宽度/高度输入框 + 预设尺寸按钮
2. **背景设置**: 透明/颜色选择 + 颜色预览
3. **图片设置**: 自适应缩放/保持原尺寸模式选择
4. **文件上传**: 拖拽上传区域 + 文件信息显示
5. **预览区域**: 原图预览 + 处理结果展示
6. **操作按钮**: 生成图片 + 下载图片

## 🔍 核心算法

### 图片缩放和居中算法
```javascript
// 获取用户选择的缩放模式
const scaleMode = document.querySelector('input[name="scale-mode"]:checked').value;

let scale;
if (scaleMode === 'original') {
    // 保持原尺寸
    scale = 1;
} else {
    // 自适应缩放 - 计算最适合的缩放比例（保持宽高比）
    const scaleX = canvasWidth / imgWidth;
    const scaleY = canvasHeight / imgHeight;
    scale = Math.min(scaleX, scaleY);
}

// 计算居中位置
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
```

### 缩放模式说明
- **自适应缩放**: 图片按比例缩放至完全适应画布，不会被裁剪
- **保持原尺寸**: 图片保持原始大小，超出画布的部分会被裁剪

### 背景处理
- **透明背景**: 利用Canvas默认透明特性
- **颜色背景**: 使用fillRect()填充指定颜色

## 🌟 特色亮点

1. **隐私安全**: 所有处理在本地完成，图片不会上传到服务器
2. **简单易用**: 直观的用户界面，无需学习成本
3. **功能完整**: 涵盖常见的图片尺寸调整需求
4. **性能优化**: 支持大图片处理，内存管理优化
5. **跨平台**: 支持Windows、macOS、Linux、移动设备

## 📋 版本信息

- **当前版本**: v1.0.0
- **发布日期**: 2025年1月
- **兼容性**: 现代浏览器（Chrome 90+, Firefox 88+, Safari 14+, Edge 90+）

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进项目！

### 开发建议
- 遵循现有代码风格
- 添加适当的注释
- 测试新功能的兼容性
- 更新相关文档

## 📄 许可证

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

## 🔗 相关链接

- [在线演示](/) 
- [问题反馈](https://github.com/your-username/image-tools/issues)
- [功能建议](https://github.com/your-username/image-tools/discussions)

---

**ImageResizer** - 让图片处理变得简单高效！ 🚀