Pixelate

KO | EN

gitlite — search

#hacktoberfest #react #typescript #llm #golang #machine-learning #linux #windows #kubernetes #vue #security #ios #openai #open-source

(★ 9)

Pixelate - Electron based program to pixelate images with extensive controls

Pixelate 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Pixelate

A cross-platform Electron desktop app that transforms images into grid-based pixelated artwork. Built for designers and artists who want crisp, geometric pixel art from any source image.

Runs fully offline — no cloud services, APIs, or telemetry.

## Features

- **Dual preview** — original image on the left, live pixelated preview on the right
- **Adjustable grid** — set columns and rows with optional aspect-ratio lock
- **Color modes** — standard (full color), grayscale, and threshold-based black & white
- **Palette reduction** — reduce output to 4, 8, 16, 32, or 64 colors via median-cut quantization
- **Crop tool** — define a region of interest before processing
- **Export** — PNG, JPEG, and SVG at custom sizes up to 16x scale
- **Settings persistence** — grid, mode, export preferences remembered between sessions
- **Drag-and-drop** — drop PNG, JPEG, WebP, or GIF files directly into the app

## Tech Stack

Electron, TypeScript, React, Vite, Tailwind CSS, electron-builder, electron-store

## Prerequisites

- [Node.js](https://nodejs.org/) >= 18
- npm >= 9

## Getting Started

```bash
# Install dependencies
npm install

# Run in development mode (with hot reload)
npm run dev
```

The app window will open automatically. In dev mode, Vite serves the renderer at `localhost:5173` and the Electron shell connects to it.

## Scripts

| Command | Description |
|---|---|
| `npm run dev` | Start dev server + Electron with hot reload |
| `npm test` | Run all tests once |
| `npm run test:watch` | Run tests in watch mode |
| `npm run test:coverage` | Run tests with coverage report |
| `npm run build` | Type-check, bundle, and package the app |
| `npm run build:vite` | Bundle only (no packaging) |
| `npm start` | Launch the built app with Electron |

## Building for Distribution

```bash
npm run build
```

Output goes to the `release/` directory. Produces a `.dmg` and `.zip` on macOS, `.exe` installer and `.zip` on Windows.

## Project Structure

```
src/
  main/           Electron main process (window, menu, IPC, file dialogs)
  preload/        Secure preload bridge (contextIsolation: true)
  renderer/
    components/   React UI components
    hooks/        React hooks (image loading, processing, crop, export, preferences)
    state/        App state management (React Context + useReducer)
    processing/   Image processing engine (pixelate, grayscale, threshold, quantize, export)
    utils/        Utility functions (color, aspect ratio, math, validation, canvas)
    types/        TypeScript type definitions
    styles/       Global CSS and theme variables
```

## How It Works

1. Load an image via file dialog or drag-and-drop
2. The source is divided into a grid of cells (columns x rows)
3. Each cell's color is computed as the mean average of all pixels in that region
4. Color mode transforms are applied (grayscale or B&W threshold)
5. Optional palette reduction maps cells to the nearest color in a reduced palette
6. The preview renders the grid; export writes it as PNG, JPEG, or SVG

Processing is debounced and runs off the main render path to keep the UI responsive.

## License

MIT

Pixelate

Pixelate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Pixelate

Pixelate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README