# image-slicer

**Repository Path**: mtxjh/image-slicer

## Basic Information

- **Project Name**: image-slicer
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Image Slicer

Image Slicer is a local Electron + Next.js desktop tool for slicing icons and assets from images. It imports images from disk, detects likely icon regions, lets you adjust slice rectangles manually, and exports the resulting assets as PNG, WebP, or SVG.

## Features

- Import one or more local images with the file picker or drag and drop.
- Automatically detect icon-like foreground regions from transparent or flat-background images.
- Draw, move, resize, rename, and delete slice rectangles on the preview canvas.
- Export individual slices or the current image's full slice set.
- Convert white backgrounds in slice assets to transparency.
- Export PNG slices, compressed WebP variants, or traced SVG assets.
- Save batches directly to a chosen folder in the Electron desktop app.
- Run as a desktop app for local-only image processing; source images are not uploaded.

## Tech Stack

- Next.js 16 and React 19 for the app UI.
- Electron for the desktop shell and native directory save flow.
- TypeScript for application code.
- Canvas APIs for image detection, cropping, transparency cleanup, WebP compression, and SVG tracing.

## Requirements

- Node.js 20 or newer is recommended.
- npm 10 or newer is recommended.
- Windows is the primary packaging target configured in this repository.

## Getting Started

Install dependencies:

```bash
npm install
```

Start the desktop app in development mode:

```bash
npm run dev
```

The command starts the Next.js dev server at `http://127.0.0.1:3000` and opens the Electron window when the server is ready.

To run only the web UI:

```bash
npm run web
```

To run Electron against an already-running app URL:

```bash
npm run electron
```

## Usage

1. Click **Import image** or drag image files into the preview area.
2. Review the automatically detected slices.
3. Toggle slice mode to draw new rectangles or adjust existing ones.
4. Use the asset panel to rename, delete, make transparent, or export slices.
5. Use batch export actions to save all slices from the selected source image.

## Scripts

```bash
npm run dev               # Start Next.js and Electron together
npm run web               # Start the Next.js web UI only
npm run electron          # Start Electron only
npm run typecheck         # Run TypeScript validation
npm run build             # Build the static Next.js output
npm run desktop:dir       # Build an unpacked desktop app
npm run desktop:portable  # Build a Windows portable package
npm run desktop:installer # Build a Windows NSIS installer
```

## Project Structure

```text
app/                         Next.js app entry, layout, API routes, and styles
components/                  UI components and the main image slicing interface
electron/                    Electron main process and preload bridge
lib/image-slicer/            Image processing, geometry, download, and desktop helpers
scripts/                     Build helper scripts
docs/                        UI planning and implementation notes
```

## Build Notes

The desktop build expects the static Next.js output under `out/` and packages Electron from `electron/main.cjs`. Generated build directories such as `.next/`, `out/`, and `release/` are intentionally excluded from version control.

## License

This project is private unless a license file is added.