PixelMorph - Image Format Converter

🖼️ Overview

PixelMorph is a powerful, browser-based image format converter that supports a wide range of formats including SVG, PNG, JPEG/JPG, ICO, WebP, BMP, TIFF, GIF, and PDF. Built with React and modern web technologies, PixelMorph provides a seamless conversion experience with an intuitive user interface.

✨ Features

• Comprehensive Format Support: Convert between multiple formats:
  • SVG to PNG, JPG, ICO, WebP, BMP, TIFF, GIF, PDF
  • PNG to JPG, ICO, WebP, BMP, TIFF, GIF, PDF
  • JPG to PNG, ICO, WebP, BMP, TIFF, GIF, PDF
  • ICO to PNG, JPG, WebP, BMP, TIFF
  • WebP to PNG, JPG, ICO, BMP, TIFF
  • BMP to PNG, JPG, ICO, WebP, TIFF, GIF, PDF
  • TIFF to PNG, JPG, ICO, WebP, BMP, GIF, PDF
  • GIF to PNG, JPG, ICO, WebP, BMP, TIFF, PDF
  • PDF to PNG, JPG, ICO, WebP, BMP, TIFF, GIF
• Advanced Image Controls:
  • Customizable dimensions with interactive sliders
  • Image quality adjustment
  • Rotation control
  • Background color customization
  • Aspect ratio preservation
• Drag & Drop Support: Easy file uploading with drag and drop functionality
• Real-time Preview: See your image before and after conversion
• No Server Uploads: All processing happens locally in your browser for privacy
• Responsive Design: Works on desktop and mobile devices
• Dark Mode Support: Comfortable viewing in any lighting condition
• Batch Processing: Convert multiple images in succession

🚀 Live Demo

View Live Demo (https://pixelmorph.netlify.app/)

📸 Screenshots

🛠️ Technologies Used

• React: UI building and component architecture
• React Router: Navigation and routing
• File-Saver: Client-side file saving functionality
• HTML5 Canvas API: Image processing and manipulation
• jsPDF: PDF generation and handling
• React Colorful: Color picker component
• React Dropzone: Drag and drop functionality
• CSS3: Styling and responsive design
• Vite: Fast development and optimized builds

🔧 Installation & Setup

Prerequisites

• Node.js (v14.0.0 or higher)
• npm or yarn

Installation Steps

1. Clone the repository:

   git clone https://github.com/aminshahid573/pixelmorph.git
   cd pixelmorph

2. Install dependencies:

   npm install
   # or
   yarn

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open your browser and navigate to:

   http://localhost:5173
   

🔍 How to Use

1. Select Conversion Type: Choose from the wide range of conversion options on the landing page
2. Upload Image: Either drag & drop your image or click to select
3. Customize Output:
   • Adjust dimensions using sliders or input fields
   • Set image quality (1-100%)
   • Rotate the image (0-360 degrees)
   • Choose background color
   • Toggle aspect ratio preservation
4. Convert: Click the convert button to process your image
5. Preview: Review the converted image in real-time
6. Download: Click the download button to save your converted image

📦 Building for Production

To create a production build:

npm run build
# or
yarn build

The build artifacts will be stored in the dist/ directory.

🧪 Running Tests

npm run test
# or
yarn test

🤝 Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• React - UI Library
• Vite - Build Tool
• File-Saver - Client-side file saving
• React Router - Routing library
• jsPDF - PDF generation
• React Colorful - Color picker
• React Dropzone - Drag & drop

📞 Contact

Shahid Amin - @aminshahid_d - aminshahid5515@gmail.com

Project Link: https://github.com/aminshahid573/pixelmorph

---

Made with ❤️ by Shahid Amin