Crop, Zoom, Rotate and upload profile images in React using react-easy-crop and Firebase

preview_player
Показать описание
This video is the 6th part of React Firebase Gallery Project. In this video we added the option for the user to crop and edit his/her profile image. zooming, rotation and cropping the image then uploading this image into the storage and the database of Firebase. we used here the npm package React Easy Crop.
React-easy-crop
Reactjs
Firebase version 9
Material UI MUI
Simple React LightBox
uuidv4
.env-cmd

The whole videos playlist:

Github Source Code:

Demo Link:

00:00 Introduction
02:40 building Crop Modal
29:00 cropping functionality
35:45 publishing our changes into Firebase Hosting
  1. Code Like Pro
Рекомендации по теме
Crop, Zoom, Rotate 0:38:21

Crop, Zoom, Rotate and upload profile images in React using react-easy-crop and Firebase

React Image Crop 0:16:48

React Image Crop | How to Crop, Rotate, Zoom a image in ReactJS | Image cropping w/ react-image-crop

Transform Animations (Move, 0:04:30

Transform Animations (Move, Crop, Zoom, Rotate)

React.js react-easy-crop Example 0:09:24

React.js react-easy-crop Example to Crop,Rotate & Zoom Images & Download it as JPG in Browse...

How to crop, 0:00:40

How to crop, zoom and rotate your video

HOW TO: Crop, 0:00:59

HOW TO: Crop, Zoom, Rotate, Multi-Select & more on Markup Hero

LEARN OPENCV with 0:13:29

LEARN OPENCV with Python | Computer Vision | How to resize, rotate and crop images

Photoshop basic rotate 0:03:36

Photoshop basic rotate crop zoom snap tools

How to Edit 1:10:54

How to Edit like Issac | Premiere Pro tutorial

How to Crop 0:03:09

How to Crop and Rotate OBS Inputs

[Sony Vegas Pro 0:10:00

[Sony Vegas Pro 10 Tutorial] How to pan, crop, zoom, rotate

How to Zoom, 0:02:40

How to Zoom, Rotate, and Crop using Adobe Photoshop CS5

Image Crop - 0:00:55

Image Crop - Flip, Rotate & Resize Photo Crop

Adobe Premiere Elements 0:04:52

Adobe Premiere Elements 🎬 | How to Rotate, Crop and Zoom a video clip | Tutorials for Beginners

upload rotate crop 0:04:55

upload rotate crop image in PHP

How to Upload 0:01:57

How to Upload Multiple Photos without Cropping to Instagram

OBS Studio - 0:01:28

OBS Studio - How To Crop, Resize, Stretch & Rotate Sources!

Create a Rotate/Zoom 0:10:47

Create a Rotate/Zoom Image Component with React and Canvas

Resize, Rotate, and 0:11:58

Resize, Rotate, and Crop

How to crop 0:00:38

How to crop and rotate a photo?

CapCut Complete Course 0:08:02

CapCut Complete Course [Part 02] Clip Trim, Freeze, Flip, Rotate, Crop Tools, Zoom, Marker, Folders

Adobe Photoshop | 0:08:19

Adobe Photoshop | Transformations, Rotate, Scale, Move, Crop, Straighten, Distortion, Warp, & Gu...

WordPress Image Editing: 0:10:47

WordPress Image Editing: How to Crop, Scale, Rotate, Flip, Resize & Restore Images

WordPress Image Editor 0:04:28

WordPress Image Editor - How to Resize, Crop & Rotate Images in WordPress

Комментарии
Автор

Nice tutorial, solve a lot of confusion. Thanks for the video

saurabhvijayvargiya
Автор

How do you update the profile image at main page after crop the new image and submit. Is it because of the Loading component?

aungmyooo
Автор

Thanks! One weird thing I don't know if you tried was if you continue to crop your profile image over and over you can zoom in infinitely, not sure if that is an issue but is definitely interesting haha

timobrien
Автор

Nice guide. The only one problem that YOU ARE NOT USING TYPESCRIPT)

braivs