微信群聊头像切片工具

这是一个基于H5和Tailwind CSS开发的web应用，用于将一张图片按照指定人数进行分割，生成若干个等大小的正方形部分，用于微信群聊头像的拼接展示。

功能特点

1. 默认图片支持：

   • 提供一组默认图片供用户选择（风景、动物、抽象图案等）
   • 用户也可以上传自己的图片进行分割

2. 支持多种人数分割规则：

   • 2人：将图片水平二等分，分成上下两部分
   • 3人：将图片切割成一个倒三角形分布
   • 4人：将图片切割成四宫格
   • 5人：将图片切割成上下两层，上层两块，下层三块
   • 6人：将图片切割成上下两层，每层三块
   • 7人：将图片切割成上下三层，顶部一块，中间和底部各三块
   • 8人：将图片切割成上下三层，上层两块，中间和底部各三块
   • 9人：将图片切割成3x3的九宫格

3. 切片下载功能：

   • 长按切片图片直接保存
   • 点击切片下载单个图片
   • 一键打包下载所有切片

安装与运行

依赖要求

• Node.js (推荐 v14 或更高版本)
• npm 或 yarn

安装步骤

1. 克隆或下载本仓库

git clone <仓库地址>
cd WechatGroupDivide

2. 安装依赖

npm install
# 或
yarn install

3. 运行开发服务器

npm run dev
# 或
yarn dev

4. 访问应用 在浏览器中打开 http://localhost:3000 即可使用

构建生产版本

npm run build
# 或
yarn build

构建后的文件在 dist 目录，可以部署到任何静态网站托管服务

使用方法

1. 选择群聊人数（2-9人）
2. 上传自己的图片或从默认图片库中选择
3. 点击"生成切片"按钮
4. 在结果页面中，可以:
   • 长按单个切片保存
   • 点击单个切片下载
   • 点击"一键打包下载所有切片"按钮下载所有切片

技术栈

• HTML5 / JavaScript
• Tailwind CSS：用于样式设计
• Vite：用于构建和开发
• html2canvas：用于图像处理

注意事项

• 请使用高分辨率图片获得最佳效果
• 推荐使用正方形或接近正方形的图片
• 本工具输出的图片不会压缩画质，保持原图质量

许可证

MIT