Skip to content

Latest commit

 

History

History
90 lines (58 loc) · 2.95 KB

README.md

File metadata and controls

90 lines (58 loc) · 2.95 KB
Raw

Image Converter

Overview

Image Converter is a web application that transforms images into larger composite images made up of smaller icons. You can choose from a variety of icon sets such as app icons, Minecraft blocks, and more. The conversion process happens in the background using a Service Worker, ensuring a smooth and efficient user experience without affecting the main thread.

Features

  • Icon Sets: Choose from a variety of icon sets including:

    • App icons
    • Minecraft blocks
    • Custom icons (make your own)

  • Background Processing: Utilizes a Service Worker to handle image conversion in the background, preventing the UI from freezing and ensuring a responsive experience.

  • Downloadable Results: Easily download the generated composite image.

Installation

Prerequisites

  • Node.js (for running the development environment)
  • A modern web browser (for testing the web application)

Steps

  1. Clone the Repository:
git clone https://github.com/AbdulrhmanSayedAli/ImageConverter.git
cd ImageConverter
  1. Install Dependencies:
npm install
  1. Run the Application:
npm start

Usage

  1. Choose an Icon Set:

    • In main.js file line 10 there is 3 vars which defines the images set.
    const ImagesCount = 420;
const ImagesFolderCount = "./app_images_minecraft_16";
const pixle_size = 16; //the width and height of each small icon (written in the folder name of each icon set)
    • To make you own Icon set create a folder and put inside it you icons that are pixle_size*pixle_size width and height and change the vars above.

  2. Upload an Image:

    • Click on the "Choose Image" button to select an image from your device.

  3. Convert:

    • Click the "Convert" button to start the conversion process. The Service Worker will handle the heavy lifting in the background.
    • Once the conversion is complete, the image will be downloaded automatically.

Technologies Used

  • HTML5 & CSS3: For structuring and styling the application.
  • JavaScript (ES6+): Core logic and interactivity.
  • Service Worker: For background processing of image conversion tasks.
  • Canvas API: To handle image manipulation and drawing.
  • Live Server: Provides a live development server with live reloading for better development experience.
  • Node.js: For setting up the development environment.

Contributing

Contributions are welcome! Please follow the steps below:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature-name).
  3. Make your changes and commit them (git commit -m 'Add some feature').
  4. Push to the branch (git push origin feature-name).
  5. Open a pull request.

License

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