DEV Community

Cover image for Image editor With React

Image editor With React

Shubham Tiwari on July 15, 2022

Hello guys today i want to show you an image editor app created with React js It's not an advance image editor But can be considered as a good pro...
Collapse
 
jonrandy profile image
Jon Randy 🎖️

I guess the main problem with it is that it doesn't edit the image!

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

It just have some adjustments options
It doesn't edit the image at advance level but can change the saturation, contract, brightness,etc tones of the image

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

It changes some CSS values (quite different to editing the image), but doesn't actually edit the image or allow saving

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

You can download the image the with download button

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

And all the properties are applied on image directly and when downloaded the image will be the one with styles applied on it

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

OK, so I didn't see the download button as it was off the bottom of the page (as some buttons are also off the right side and almost inaccessible). However, clicking the 'download' button gets me just a transparent PNG - not the image in the editor

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

It is a demo image you have to select your image from the button then apply the stylings and download it

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️ • Edited

OK, I would have expected the demo image to work though - better UX to remove the demo image if it doesn't work, then the user is forced to open an image.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

But having said that, I just tried uploading an image and that has the same result - downloads a mostly blank PNG with just some small text that says 'Example'

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

The image you selected is shown on the screen?

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Sure

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

The image you selected is shown on the screen?

Yes. I've tried 4 different images

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Maybe some bug i wi check it

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

@shubhamtiwari909, you may find useful to know which device and browser @jonrandy is using for troubleshooting purposes just in case... 🙄

By the way it (quote unquote) worked to me on Chrome (latest) over Windows 11

Original:
Image description

Edited:
Image description

As you can see the issue is that the original image was 512x512 pixels and weighting 33,2kb and the result is 2451x727 pixels for any reason which made it increase in the weight to 172kb while scaling the original image and creating a big blank space at the right.

I think that the increase in height of the original image relates to the rotation, it tries to square to fit the entire result in, is it possible? If that's the reason this is nice (it could be an option). The horizontal increase on the other hand is maybe 3 times bigger than it should be.

Edit: tried with a larger image just in case,

original:
Image description

Edited:
Image description

Again, it increased horizontally more than expected, not 3 times but half maybe, and the image gets cut so my hypothesis was wrong, which makes vertical size increasing a bug instead of a feature 😆

Last but not least, almost controls are range controls with some values showing up in the UI but some of them implement wrong values; i.e.

  • invert implements a range from 0 to 360. It should be from 0 to 100%
  • Brightness implements a range from 0.1 to 1.5, instead it should be either from 0 to 2 or from 0 to 200%
  • Blur has a maximum of 20px, which is OK mostly, you can increase it to 100px as max so it will cover any text blur use-case as well.
  • Contrast can raise more than 500% but I'd say more than that is negligible, but 500 has a notable difference in comparison with 200%.
  • Grayscale implements a range from -100% to 100%. It should be from 0 to 100%

Didn't check the rest but you can found the definitions of all available filters here.

As extra bug, if you put some relatively big image and you rotate it, eventually it will cover the rotate controls so you can't come back. You need then, to reload the page and start the process over again. Having a greater z-index on the controls should fix that.

Keep going, it's almost done! It just needs a bit of polishing 😁👌

PD: Can't see the repo link, it could help checking the issue. Would you mind sharing?

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you for mentioning all the bugs and i appreciate it really
Repo link -
github.com/ShubhamTiwari909/ImageE...