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 project
PROJECT LINK
https://waadu-image-editor.netlify.app/
Go check it out
Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h
https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk
https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
Top comments (15)
I guess the main problem with it is that it doesn't edit the image!
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
It changes some CSS values (quite different to editing the image), but doesn't actually edit the image or allow saving
You can download the image the with download button
And all the properties are applied on image directly and when downloaded the image will be the one with styles applied on it
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
It is a demo image you have to select your image from the button then apply the stylings and download it
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.
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'
The image you selected is shown on the screen?
Sure
Yes. I've tried 4 different images
Maybe some bug i wi check it
@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:
Edited:
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:
Edited:
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
rangecontrols with some values showing up in the UI but some of them implement wrong values; i.e.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?
Thank you for mentioning all the bugs and i appreciate it really
Repo link -
github.com/ShubhamTiwari909/ImageE...