How to Crop Images in React (react-image-crop)

In this video you'll learn how to use the react-image-crop library to crop images in React! You'll also learn how to use the HTML Canvas element to draw images.
Source Code: github.com/OneLightWebDev/rea...
React Image Crop: www.npmjs.com/package/react-i...
Support Me: www.buymeacoffee.com/nikitadev
Contact Me: [e-mail]
#react #javascript #programming

[@muhammadmusthafa1801]

Thanks man, im currently on a project and you just saved me a lot of headache. Nice explanation, keep going, you gained a subscriber❤

[@ryaaan0751]

Thanks so much for this! Very easy to follow and well explained! Keep up the good work!

[@-linteriuml-9586]

Really nice video! Thanks for the step-by-step explanation

[@hwapyongedouard]

dude , thanks, we need more under rated details like this , how about video crop? or resizer for smaller screens much like tiktok or ig reels

[@alirezajakson9436]

thank you so much , you're a life saver

[@itaiW]

damn only 2 weeks ago? i got here just in time! great video!

[@arak5754]

Excellent explanation. Thank you.

[@aleksey6151]

Bro you saved my life

[@andreswellmann7637]

Thank you so much!!

[@charlielamb3919]

Thank you!

[@diletant_av]

Никит, спасибо большое за хорошее объяснение. Пережимать можно уже на бэке, например, с помощью sharp

[@havindufonseka5048]

saved my life 💯

[@jaweki]

nice tutorial. Hey, do one tutorial for adjusting the crop size as user scrolls the page. this feature has been done on Tesla's (cyber truck) website.

[@preciousegwuenu2938]

Thanks, it helped

[@BhawaniSingh.]

You Should Make the Complete React Tutorial Playlist

[@-linteriuml-9586]

Could you maybe do a video where you show how we can include a zoom function

[@baudubrsl]

great video!!

[@mohammedrokerya8586]

Many Thanks for the video! Btw, which vscode plugins you use, especially the one which was autocompleting/suggesting the code like for declaring constants.

[@nikita-dev]

thank you! the autocomplete suggestions is GitHub Copilot

[@muhammadmusthafa1801]

im using aws codewhisperer. its free also works well

[@oussamasethoum1665]

Thank you

[@daFoggovien]

tysm man

[@plantnt489]

Very useful video man. Is there a way to pass the inputs name to the profile component?

[@prashlovessamosa]

Thanks for sharing.

[@cunghoctiengnhat888]

when we get canvas and convert to base 64 with to toDataURL , I get a problem which is request entity too large although I use body parse to limit the memory
can u help me handle this

[@vladuk1love]

Hey! I have a problem with canvas preview. If my image is 16:9 everything is fine, but with a 9:16 image the canvas preview also changes resolution and becomes rectangular(I need a square)

[@jayandraahire553]

How to rezise the image 200* 200 before uploading to server??

[@mohammedrokerya8586]

When I try to convert that canvas image to blob and send it to node api, it's size becomes too large. is there any other plugin or solution to this ?

[@nikita-dev]

You can generate a signed URL from your API, return that to the frontend, and then upload the image directly to your Cloud service via the signed url

[@mohammedrokerya8586]

​@@nikita-dev Thanks for the solution. Currently, I am using a plugin in node api, called "multer-sharp-s3" and it works wonders. it significantly reduces image size while maintaining the best possible quality.

[@mohammedrokerya8586]

Thank you for the solution. Currently, I am using a plugin in node api called "multer-sharp-s3," and it works wonders. It significantly reduces the image size while maintaining the best possible quality.

[@parmetra]

Like for Conor Bedard! ✌

[@ryostyles9904]

how to resize the image?

[@nikita-dev]

you would need to use a separate package to resize the image (on the frontend), or send it to a backend service that resizes the image.

[@yathishhosamani2837]

Thanks a lot