Nissy-专业批量图片处理工具产品系统

开发了一款基于 Web 的图片批量处理工具，，为用户提供前端本地图片压缩、格式转换和尺寸调整等服务。项目采用前后端分离架构，实现完整的用户认证体系、配额管理系统和任务追踪功能。使用 HTML5 Canvas API 实现客户端图片处理，无需上传服务器即可完成处理，保护用户隐私。

1. 用户认证系统：实现双Token机制(accessToken+refreshToken)的JWT认证，支持用户名/邮箱登录、邮箱验证码注册、第三方登录对接、自动Token刷新和会话管理。封装统一的HTTP请求拦截器，实现401错误自动刷新Token并重试原请求，Token过期自动跳转登录页。

2. 前端图片处理引擎：基于 HTML5 Canvas API 实现客户端图片处理，支持三种处理模式(compress压缩/convert转换/resize调整)。压缩质量可调50%-100%，支持JPG/PNG/WebP/BMP/ICO等多种格式互转，尺寸调整支持自定义宽高并可保持比例。使用 canvas.toBlob() 实现高质量图片导出，支持批量处理和进度显示。

3. 高级图片编辑功能：实现图片裁剪功能(可拖动裁剪框、实时预览)、水印添加功能(支持文字/图片水印、透明度调节、位置拖动、平铺模式)。所有处理均在浏览器本地完成，无需上传服务器，保护用户隐私。

4. 配额管理系统：实时配额查询和可视化进度条展示，每日使用统计和累计处理统计，方案升级入口(FREE/PRO/BUSINESS)，配额扣除接口和超限提醒。

5. 任务历史管理：任务列表展示(支持状态筛选)，分页加载和下拉刷新，任务详情查询，支持批量下载(使用 JSZip 打包)和任务删除。

6. UI/UX设计：星空背景动画效果，半透明导航栏设计，模态框登录/注册交互，签到功能和用户下拉菜单，自定义Toast通知系统，渐变色主题(紫色系)和响应式布局。

此项目完全由我独立开发
前端采用 uni-app + Vue 2 框架开发，主要面向 H5 平台。核心技术包括：

1. 封装统一的HTTP请求层(utils/request.js)，实现请求/响应拦截器、JWT Token自动注入、401错误自动刷新Token并重试、完善的错误处理(400/401/网络错误)和Loading状态管理。

2. 基于 HTML5 Canvas API 实现前端图片处理引擎，使用 document.createElement('canvas') 创建离屏画布，通过 canvas.getContext('2d') 获取绘图上下文，使用 drawImage() 绘制图片，通过 canvas.toBlob() 导出处理后的图片。支持质量参数控制、格式转换和尺寸调整。

3. 实现图片裁剪和水印功能，使用 Canvas 坐标映射实现预览与原图的比例转换，支持拖动交互和实时预览。水印支持文字渲染(fillText)和图片绘制(drawImage)，支持透明度、旋转和平铺模式。

4. 使用 JSZip 库实现批量图片打包下载，使用 FileSaver.js 触发浏览器下载。状态管理使用 localStorage 轻量级方案，Token和用户信息持久化存储。

5. UI组件采用原生组件+自定义SCSS样式，实现渐变背景、毛玻璃效果、动画过渡和响应式布局。已完成 H5 平台的打包发布流程。