Awesome Merge Picture

October 22, 2024 · View on GitHub

A tool to quickly create a preview image of a dark and light mode project.

屏幕截图_11-9-2024_23127_awesome-merge-picture pages dev

Features

  • Upload two images for comparison
  • Interactive split-view with adjustable direction (vertical/horizontal)
  • Customizable split position using sliders
  • Export merged image
  • Keyboard shortcut to toggle dashboard visibility
  • Responsive design with a blurred gradient background

Technologies Used

  • React
  • Vite
  • UnoCSS
  • Framer Motion
  • React Icons

Getting Started

Prerequisites

  • Node.js (v20 or later recommended)
  • pnpm

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/awesome-merge-picture.git
cd awesome-merge-picture

  2. Install dependencies:

    pnpm install

  3. Start the development server:

    pnpm run dev

  4. Open your browser 和 visit http://localhost:5173 to see the application.

Usage

  1. Click the upload button to select two images.
  2. Use the sliders to adjust the split position.
  3. Toggle between vertical 和 horizontal split directions.
  4. Press the spacebar to hide/show the dashboard.
  5. Click the export button to download the merged image.

Building for Production

To create a production build, run:

pnpm run build

The built files will be in the dist directory.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source 和 available under the MIT License.