# ImageProcessor

**Repository Path**: YIYIN9111/image-processor

## Basic Information

- **Project Name**: ImageProcessor
- **Description**: 使用vue3+ts+element-plus开发一个图片处理工具。
1.允许用户上传一张图片。
2.使用Canvas 对上传的图片进行简单的模糊处理，并将其作为背景绘制在画布上。
3.将原始图片居中显示在模糊背景之上。
4.提供一个按钮让用户可以下载处理后的图像。
5.可以设置调节背景模糊程度
6.整体图片宽高也支持调整
- **Primary Language**: HTML
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-27
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ImageProcessor

#### 介绍
使用vue3+ts+element-plus开发一个图片处理工具。

1. 允许用户上传一张图片。
2. 这里是列表文本使用Canvas 对上传的图片进行简单的模糊处理，并将其作为背景绘制在画布上。
3. 将原始图片居中显示在模糊背景之上。
4. 提供一个按钮让用户可以下载处理后的图像。
5. 可以设置调节背景模糊程度
6. 整体图片宽高也支持调整

## 项目结构
```
📦image-processor
├── public             # 静态资源
├── src
│   ├── assets         # 静态资源
│   ├── components     # Vue组件
│   │   ├── HelloWorld.vue  # 示例组件
│   │   └── ImageProcessing.vue  # 核心图片处理组件
│   ├── App.vue        # 根组件
│   └── main.ts        # 入口文件
├── package.json       # 项目配置
├── vite.config.ts     # Vite配置
└── tsconfig.json      # TypeScript配置
```

## 快速开始
```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

## 主要技术栈
- Vue 3 + Composition API
- TypeScript 5
- Vite 4

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)