# grid-split

**Repository Path**: meetdeath_admin/grid-split

## Basic Information

- **Project Name**: grid-split
- **Description**: 一款轻量级的桌面端图片宫格裁剪工具，支持自定义网格分割、预览与批量导出。纯前端处理，图片不上传至任何服务器。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GridSplit — 图片宫格裁剪工具

一款轻量级的桌面端图片宫格裁剪工具，支持自定义网格分割、预览与批量导出。纯前端处理，图片不上传至任何服务器。

## 功能特性

- **图片上传**：支持拖拽上传 / 点击选择，兼容 PNG、JPG、WebP、GIF（静态）
- **网格预设**：内置 1×1、2×2、3×3、4×4、2×3、3×2、2×4、4×2 八种常用分割
- **自定义网格**：支持手动输入 1~10 行 × 列的自由组合
- **自由调整**：关闭等分模式后，可拖拽网格线微调每条分割线位置
- **实时预览**：点击单个格子高亮选中，右上角实时预览该区域放大图
- **批量导出**：一键导出所有格子为 ZIP 压缩包，支持 PNG / JPG / WebP 格式
- **导出设置**：JPG 质量滑块、输出尺寸缩放（原图 / 百分比 / 自定义宽高）、命名前缀
- **图片变换**：90° 顺时针 / 逆时针旋转、水平 / 垂直翻转、背景色填充
- **撤销重做**：最多保存 50 步操作历史
- **深浅主题**：一键切换浅色 / 深色模式
- **快捷键支持**：完整的键盘快捷键体系，提升操作效率

## 快捷键

| 快捷键 | 功能 |
|--------|------|
| `Ctrl + Z` | 撤销 |
| `Ctrl + Y` | 重做 |
| `Ctrl + S` | 批量导出 ZIP |
| `+` / `−` | 缩放画布 |
| `0` | 重置缩放 |
| `R` | 顺时针旋转 90° |
| `Shift + R` | 逆时针旋转 90° |
| `H` | 水平翻转 |
| `V` | 垂直翻转 |
| `G` | 显示 / 隐藏网格线 |

## 运行方式

```bash
# 克隆仓库
git clone <仓库地址>
cd grid-split

# 安装依赖
npm install

# 开发运行
npm start

# 打包为安装包
npm run build:mac    # macOS .dmg
npm run build:win    # Windows .exe
npm run dist         # 同时打包 macOS + Windows
```

打包输出位于 `dist/` 目录。

## 技术栈

- **框架**：Electron（桌面端封装）
- **渲染层**：原生 HTML5 + CSS3 + JavaScript（零前端依赖）
- **图片处理**：HTML Canvas API
- **批量打包**：JSZip
- **打包工具**：electron-builder

## 项目界面

  <table>
      <tr>
          <td width="80%"><img src="screenshots/sjt.png"  alt="项目界面"></td>   
      </tr>  
  </table>

## 作者

**拾光匣子**

- 源码托管：[Gitee](https://gitee.com/meetdeath_admin/grid-split)

## 许可证

MIT License

## 捐赠支持

  😀 开发调试需要消耗不少 token,你可以请作者喝杯咖啡表示鼓励

  <table>
      <tr>
          <td width="50%"><img src="screenshots/wx.jpg"  alt="微信收款码"></td>
          <td width="50%"><img src="screenshots/zfb.jpg" alt="支付宝收款码"></td>
      </tr>  
  </table>