Asset.Clip

A simple web tool for quickly cropping and exporting multiple assets from a single image sheet. Upload an image, define your crop areas, and export them as a zip file.

Features

• Interactive Cropping: Use your mouse to draw and resize crop areas directly on the uploaded image.
• Multiple Layers: Create as many crop areas (layers) as you need.
• Customizable Exports: For each layer, you can customize:
  • Output dimensions (width, height)
  • Fit mode (contain or cover)
  • Background color
  • Output format (png, jpeg, webp)
  • Filename
• Presets: Quickly apply predefined dimensions for common use cases (e.g., icons, banners).
• Live Previews: See a live preview of the selected crop's output.
• Bulk Export: Export all your defined crops at once into a single .zip file.
• Session History: Access previously uploaded images and exported zip files from your current session.

Tech Stack

• Frontend:
  • React
  • TypeScript
  • Vite
  • Konva.js for the cropping canvas
  • Tailwind CSS for styling
• Backend:
  • Node.js
  • Express
  • Sharp for high-performance image processing
  • Multer for file uploads
  • Archiver for creating zip files

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Setup and Run

1. Clone the repository:

   git clone <repository-url>
   cd asset-clip

2. Install dependencies:

   npm install

3. Run the development server: This command starts both the backend server and the Vite development server with Hot Module Replacement (HMR).

   npm run dev

4. Open the app: Navigate to http://localhost:3000 in your web browser.

Available Scripts

• npm run dev: Starts the development server.
• npm run start: Starts the production server (requires running npm run build first).
• npm run build: Builds the React frontend for production into the dist directory.
• npm run preview: Serves the production build locally for previewing.
• npm run lint: Runs the TypeScript compiler to check for type errors.
• npm run clean: Removes the dist directory.

API Endpoints

The Express backend provides the following API endpoints under the /api prefix:

• POST /api/upload: Upload a single image.
• GET /api/uploads: Get a list of uploaded files for the current session.
• DELETE /api/uploads: Clear all uploaded files for the session.
• DELETE /api/uploads/:id: Delete a specific uploaded file.
• GET /api/image/:id: Serve a specific uploaded image file.
• POST /api/preview-crop: Generate a temporary preview for a single crop definition.
• POST /api/export: Export a batch of defined crops as a zip archive.