https://github.com/jo56/image-collage
Visual tool used to create collages out of multiple images, intended to simulate manipulations of physical photos
https://github.com/jo56/image-collage
collage-maker pts typescript
Last synced: about 21 hours ago
JSON representation
Visual tool used to create collages out of multiple images, intended to simulate manipulations of physical photos
- Host: GitHub
- URL: https://github.com/jo56/image-collage
- Owner: jo56
- Created: 2025-10-02T04:14:55.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-05-12T02:13:03.000Z (about 1 month ago)
- Last Synced: 2026-05-12T04:20:10.925Z (about 1 month ago)
- Topics: collage-maker, pts, typescript
- Language: TypeScript
- Homepage: https://jo56.github.io/image-collage/
- Size: 1.15 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# image-collage
Simple tool for creating collages out of multiple images. The images can be manipulated and cut apart like regular photographs. Try to see what other kinds of images you can create.
## Getting Started
### Installation
```bash
npm install
```
### Development
```bash
npm run dev
```
### Build
```bash
npm run build
```
## Usage
1. **Upload Images**: Click "Upload File" to add images to your canvas
2. **Move Images**: Select "Move" mode and drag images around. Click an image to bring it to the front
3. **Resize Images**: Select "Resize" mode and drag to scale images
4. **Cut Shapes**: Select "Cut" mode, click and drag to draw a shape across one or more images. When you release, a new cutout is created
5. **Erase**: Select "Erase" mode and drag to remove parts of images
6. **Pan Canvas**: Click and drag empty space to move the viewport
7. **Zoom**: Use mouse wheel to zoom in/out
## Technology Stack
- **React** + **TypeScript** - UI framework
- **Vite** - Build tool
- **Pts.js** - Canvas rendering and interactions
## License
MIT
