gdscjgec / image-editor

Open Source Web based Image Editor

Quick Image Editor

Participating in

About The Project

A web based image editor for all your editing needs. Use stunning filters and other tools to create and share amazing pics!

Features

• Apply Amazing Effects
• Crop, Rotate, and Resize
• Adjust Exposure
• Blur Filter
• And Much More!

Tech Stack

Demo

File Structure

  ├── assets/
        ├──favicon        contains favicon and shortcut icons
        ├──images         contains images and icons
        ├──logo           contains the logo
        ├──ui             contains the ui
  ├── css/
        ├──style.css      all the default styling of index.html
  ├── js/
        ├──main.js        all the functions of index.html
  ├── index.html          main page of the website

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

Setting up development environment (for VS Code Users)

Install The Live server extension on your native VS Code: Link (Helps you to run the live project and not reload any changes that you make in it)

Set up the project directory:

1. Clone the repo

   git clone https://github.com/your_username_/Project-Name.git

2. Navigate to Project Directory

   cd <project-name>

3. Open VS Code from terminal

   code .

4. Start up Live server

Navigate to the bottom right corner of Visual Studio Code window and click on the "Go Live" button. Your project will get loaded on the localhost url: http://127.0.0.1:5500/

Roadmap

See the open issues for a list of proposed features (and known issues). Feel free to raise new issues.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch ( git checkout -b feature/AmazingFeature )
3. Add your Changes ( git add . )
4. Commit your Changes ( git commit -m 'Add some AmazingFeature' )
5. Push to the Branch ( git push origin feature/AmazingFeature )
6. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Mail us at - [email protected]

Contributors

image-editor's Issues

Improve README.md File

📚 Documentation

The featured video in the about section is very old .

Add relevant screenshot or video (if any)

(Add here)

Fix Distortion of Image problem

Describe the Bug 🐛

Fixing the distortion problem which happens after uploading the image

Update README.md

📚 Documentation

Update README.md file

Fix the save button

Bug - Even if you don't upload any image file the save button can still download a empty image file .

Now your work is to fix this behavior. If Image canvas is empty , then do not let user to download anything.

Note- Before Making a pull request make sure you have done everything necessary and please add gifs and photos for better visualization.

Add opacity slider

🚀 Feature

Add a opacity slider to adjust the image opacity. By changing image opacity, you can either make the image slightly transparent or completely transparent.

Clear the canvas when image is uploaded

Describe the Bug 🐛

A clear and concise description of what the bug is

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

There is a spelling mistake in the title of the Index.html page

While crop is active: change cursor to CropTool and After cropping draw image to start crop position

🚀 Feature

When user selects crop, the cursor should change to crop tool. This increases user experience and hence the usability of the website.
After the cropped image is selected, the image should not translate to (0, 0) as it is doing now.

The image after cropping will remain at its start point or if it look good to center of the canvas. This also will experience user experience.

Additional context
I made this issue after using Image-Editor for 30 minutes and testing what might look good. This is totally subjective to individual likings and thinking.
Thanks

Add a photo Resize features

🚀 Feature

A clear and concise description of what the feature is.

Add a button which can resize the image based on the best practice like 16:4 , 1:1 etc.

uploaded Image preview

After Uploading Image , it does not fit into the canvas even it is not responsive.

What you need to do

You need to make sure the the uploaded image fit to the canvas and it responsive as well.

Convert the prototype into code

Here is the idea for the application. You need to code this one into fully fledge web application or we can say Re design the app..

Tech stack - You can use any tech stack you want but since it is beginner friendly repository so better to go with juts html,css and javaScript.

Make sure Every functional component work in the new design as well..

Here is the prototype

For better understanding you can checkout the design in figma :- https://www.figma.com/file/eStGe5ro0aLBSHVvNzK9Us/Design-Editor-UI-Design-(Community)?node-id=2%3A352

Design by ronitblenz

Add a delete Button

🚀 Feature

when you upload a photo , you will see there is not any option to remove the photo so your work is to add a working remove/delete button/icon for removing the photo from the canvas.

Add a redo button

Adding Scroll-to-top button

🚀 Feature

A scroll-to-top button so that the user doesn't have to scroll through the whole page and get on the top of the page just by clicking on the button.

Is your feature request related to a problem? Please describe.
Sometimes it is irritating when I have to scroll up and there is no scroll-to-top button present on the website.

Describe the solution you'd like
A scroll-to-top button is hidden when the user is already on top of the page and appears only when users stars scrolling down.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add undo button feature

🚀 Feature

When someone is click on Undo button the last action performed by user will be reverted.

Button filter glitch

Describe the Bug 🐛

Glitch in fliter buttons when hovered over

To Reproduce
Steps to reproduce the behavior:

1. Go to [https://gdscjgec.github.io/Image-Editor/](Image Editor)
2. Scroll down to filter buttons and hover them
3. See error glitch

Screenshots
[

Button.glitch.mp4

](url)

Desktop (please complete the following information):

• OS: Windows
• Browser Brave
• Version: Latest

Add an Exposure feature for photos

🚀 Feature

Image cropping Feature

🚀 Feature

Add an image Cropping Feature and make sure it is working for different kind of images like .png ,. jpeg .

Improve the Responsiveness of the webpage

Describe the Bug 🐛

The page is not viewable in small screens

Expected behavior
Make the webpage viewable in small screens

Enhance the overall styling

🚀 Feature

Enhance the overall styling

Transform the application to Progressive Web Application

🚀 Feature

1️⃣ Must be fully optimized for mobile devices.

2️⃣ User will be able to install the application into their phone.

3️⃣ User can work offline on the application.

This is how the installation button will pop up if you work with PWA features

You can use workbox or you can do it with plain JavaScript. Documentation PWA

Note : before making a PR , You must attach video , photos showing all those features .

text disappear when dark mode is active

Describe the Bug 🐛

A clear and concise description of what the bug is
When the dark mode is active the text on the button disappears.
To Reproduce
Steps to reproduce the behavior:

1. Click on the dark mode button
2. Watch the button without the text
3. See error

Expected behavior
it's expected to be visible when is dark mode

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [Windows]
• Browser [firefox.chrome]
• Version [92,94]

Smartphone (please complete the following information):

• Device: [none]
• OS: [none]
• Browser [none]
• Version [none]

Additional context
Add any other context about the problem here.

Remove Border

🚀 Feature

**Remove the border from the uploaded section as well as from the tool section and do some styling to make it look better
PS- Only for GDSC member

Enhance the overall Styling

Make the whole website user friendly where user can navigate and work easily without getting stuck or confused.

Things you can count

** Name every buttons with proper meaning
** Make sliders for filters and other meaningful features

Redesign the whole Application

🚀 Feature

A clear and concise description of what the feature is.

** Redesign the whole Application. You can go with trending Design or can also go with your own design system.

Note : Before Making a pull request make sure you have done everything necessary and please add gifs and photos.

Add rotation feature for images

🚀 Feature

The image will turn 90 degrees in response to an onClick event.

Dynamic size of canvas

🚀 Feature

Input height and width from user, and set the dimensions as such to the canvas.

Is your feature request related to a problem? Please describe.
This is a feature request which can increase functionality.

Describe the solution you'd like
Adding bootstrap number field and using the same input as dimensions of canvas.

Implement other useful Filter.

You work is to add some useful filters into the application.
You must implement at least 5 of them and it should be bug free.
Addd gifs and imgs for better visualization when you are going to make a PR , add JWOC label

Add a Black & white Filter

Do some styling and Detailed documentation

📚 Documentation

** You can use gifs,imgs and icons for documentation

Make the web page responsive

Website is not responsive at all , you need to make it responsive for smaller devices

Button Animations

🚀 Feature

**Add a beautiful animation on the buttons and make sure it is working with every browser like chrome,Fire and etc
PS: Only for GDSC members

Add a footer

🚀 Feature

Add a footer

UI design for the project

The project lacks a comfortable UI for the user,
Can you assign me to create a UI design for this website?
I would also like to mention, kindly place it in the medium category.

Thanks

Dark mode

🚀 Feature

**Add a dark and light mode toggle for the whole website

Note-Only for GDSC-JGEC members

Convert Sliders into buttons

Make sure it will work when you do that .Please add @jWoc when you make a PR
Add gifs and photos

Add blur effect

🚀 Feature

Add a slider for blur effect. Moving the slider will change the image blur intensity.

Make the website responsive for smaller Devices like Mobile and tablets.

You just need to fix the image , after uploading an image, It distort alot. you need to fix. Can you do that ???

Change Image Rendering Method

Image Rendering Method 🐛

As of now the image rendering method is just displaying the image as a background image in a div, this will allow us to apply CSS filters and such, but will cause complications when handling the image for download and applying multiple filters. So i suggest changing the image rendering method to a canvas-based one. I have already completed the work on that and will reference it shortly.