https://github.com/danish-jamil-01/image-resizer

Resize Images with the help of OpenCV
https://github.com/danish-jamil-01/image-resizer

glob image-manipulation image-resize image-resizer image-resizing opencv opencv-python python

Last synced: 27 days ago
JSON representation

Resize Images with the help of OpenCV

• Host: GitHub
• URL: https://github.com/danish-jamil-01/image-resizer
• Owner: Danish-Jamil-01
• License: mit
• Created: 2024-03-06T18:26:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-07-24T22:40:49.000Z (11 months ago)
• Last Synced: 2025-07-25T04:35:02.178Z (11 months ago)
• Topics: glob, image-manipulation, image-resize, image-resizer, image-resizing, opencv, opencv-python, python
• Language: JavaScript
• Homepage:
• Size: 22.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ✨ Image Resizer ✨

A modern, browser-based image resizer with a dynamic 3D background and a glassmorphism interface. This tool allows you to quickly and easily resize images to your desired dimensions while maintaining aspect ratio.

[![Live Demo](https://img.shields.io/badge/Live-Demo-brightgreen?style=for-the-badge&logo=github)](https://danish-jamil-01.github.io/Image-Resizer/)

---

![Project Screenshot](https://github.com/user-attachments/assets/6e51596e-9ccb-45fc-b868-051a5167937d)

## 📝 Description

This project is a complete evolution of a basic image resizer. It was built to explore modern web design trends like **glassmorphism** and to integrate real-time 3D graphics using **`three.js`**. The application is purely client-side, meaning all image processing happens directly in your browser, ensuring privacy and speed.

## 🚀 Features

* **Easy Image Upload:** Click to upload or drag & drop your image.

* **Custom Resizing:** Set custom width and height in pixels.

* **Aspect Ratio Lock:** Maintain the original image proportions with a single click.

* **Live Previews:** See a preview of the uploaded image and the final resized image.

* **Instant Download:** Download your resized image directly to your device.

* **Dynamic 3D Background:** An animated, real-time background built with `three.js` featuring abstract shapes.

* **Glassmorphism UI:** A sleek, modern "frosted glass" interface.

* **Responsive Design:** Looks great on both desktop and mobile devices.

## 🛠️ Technologies Used

* **HTML5:** For the core structure of the application.

* **CSS3:** For all styling, including Flexbox, Grid, custom properties, and the glassmorphism effect.

* **JavaScript (ES6+):** For all application logic, including DOM manipulation, file handling, and image processing with the Canvas API.

* **Three.js:** For creating and animating the 3D background scene.

## ⚙️ How To Use

1.  **Visit the live site:** [https://danish-jamil-01.github.io/Image-Resizer/](https://danish-jamil-01.github.io/Image-Resizer/)

2.  **Upload an Image:** Drag and drop an image file onto the upload box, or click it to select a file from your device.

3.  **Set Dimensions:** Once the preview appears, enter your desired width or height. If "Lock Aspect Ratio" is checked, the other dimension will update automatically.

4.  **Resize:** Click the "Resize Image" button.

5.  **Download:** A preview of the resized image will appear along with a "Download Image" button. Click it to save your new image.

## 💻 Local Development

To run this project on your local machine:

1.  Clone the repository:

    ```bash

    git clone https://github.com/Danish-Jamil-01/Image-Resizer.git

    ```

2.  Navigate to the project directory:

    ```bash

    cd Image-Resizer

    ```

3.  Open the `index.html` file in your web browser.