hoichoi-opensource / imageresizer Goto Github PK

A simple tool to resize images in different dimensions and compare file size

Home Page: https://imageresizerx.vercel.app/

License: MIT License

HTML 5.64% JavaScript 1.69% TypeScript 91.90% CSS 0.77%

avif avif-images hacktoberfest hacktoberfest-accepted hacktoberfest2023 image image-manager image-manipulation image-processing imageoptimizer

imageresizer's Introduction

Image Resizer

A simple Node.js application to upload images, resize them to specified dimensions or aspect ratios, and export them in both webp and avif formats.

Features

Upload images through a web interface.
Resize images based on pixel dimensions or aspect ratios.
Export resized images in webp and avif formats.
Retain and display all historically uploaded and resized images.

Prerequisites

Node.js

Setup & Installation

Clone the repository:

git clone https://github.com/hoichoi-opensource/imageresizer.git
cd image-resizer

Install the required packages:

npm install

Running the Application

Start the server:

node server.js

Visit http://localhost:3000 in your browser to access the application.

Usage

Click on the "Choose File" button to select an image.
Click on the "Upload and Resize" button.
The resized images in both webp and avif formats will be displayed along with their respective file sizes.

Contributing to the Project

We welcome contributions from everyone who is interested in helping to improve this project! Whether it's fixing bugs, adding new features, improving documentation, or spreading the word, your help is appreciated.

Here are some ways you can contribute:

Reporting bugs: If you find a bug, please report it by opening a new issue on GitHub.
Suggesting enhancements: Have an idea to make this project better? Share it with us by opening a new issue for discussion.
Submitting changes: Want to submit a fix or a feature? Great! Fork the repository, make your changes, and submit a pull request.

Getting Started

Fork the repository: Click the 'Fork' button at the top right of this page to create your copy of the repository.
Clone your fork:
Create your feature branch:
Make your changes: Implement the changes or improvements you propose.
Commit your changes:
Push to the branch:
Submit a pull request: Go to your fork on GitHub and click the 'Pull Request' button to send your changes review.

Please see our CONTRIBUTING.md for guidelines on how to contribute to this project.

Checkout the current issues as well to start .

imageresizer's People

Contributors

Stargazers

Watchers

Forkers

arp99 r3yc0n1c raunakmandal warmachine028 itsroy69 tamalcodes sayakongit dharmi04 arupamsengupta shinjan-saha

imageresizer's Issues

[DX] Issue and pull request templates for contributors

What i am suggesting to add ?

I am suggesting adding Issue and PR Templates to the repository, it can be as many categories as needed - primary categories of issues are mostly: bugs, docs, feature, and so on.

Why to add it ?

Having templates in place prevents spam, and helps out the contributors to raise the issue quickly along with automated labels which in turn makes it easy for the maintainer to manage the contributions. The Pull request template in turn makes sure that there is always ample information on the changes that were made.

Can I work on it ?

Yes, I will be glad to help an Opensource project grow more !

UI/UX Improvements Needed for Image Upload and Resize Feature

Issue:
The current UI/UX design for the image upload and resize feature on the frontend lacks intuitiveness and clarity. Users have reported difficulties in understanding the process and have experienced inconsistencies in the resizing functionality.

Steps to Reproduce:

Navigate to the image upload section.
Try uploading an image.
Attempt to resize the uploaded image.
Expected Behavior:

The image upload button should be clearly labeled and easily accessible.
Upon uploading, users should receive feedback indicating a successful upload.
The resize feature should provide clear handles or markers to adjust the image dimensions.
The final resized image should maintain its aspect ratio and quality.
Actual Behavior:

The upload button is not prominently displayed.
No feedback is provided after image upload.
Resizing handles are not intuitive, leading to distorted images.
The resized image sometimes loses quality.
Suggested Improvements:

Redesign the image upload button to make it more prominent and add a tooltip or label.
Provide a success notification or visual cue after a successful image upload.
Improve the resizing handles to ensure they are user-friendly and maintain the image's aspect ratio.
Ensure the image quality remains consistent after resizing.

[BUG 🐞] Node modules to be removed

Node modules must not be uploaded to version control
It must be added to .gitignore file to untrack it

Assign me this issue to remove node_modules directory

Error 404: NOT_FOUND while deploying to Vercel

I encountered an error while trying to deploy the project to Vercel. The deployment failed, and I received the following error message, while trying to upload the image and resize it .

`404: NOT_FOUND
Code: NOT_FOUND
ID: bom1::krfmm-1696231582630-9713fa1e91c3

`
Steps to Reproduce:

Pushed the latest changes to the GitHub repository.
Triggered a new deployment on Vercel.
Now go to the url and upload a image and then try to resize it .