Cropping and resizing images in React

npm install react-easy-crop --save

yarn add react-easy-crop

// ImageCropper.jsimport React, { useState } from 'react'import Cropper from 'react-easy-crop'import { getCroppedImg } from './cropImage'const ImageCropper = ({ getBlob, inputImg }) => {    const [crop, setCrop] = useState({ x: 0, y: 0 })    const [zoom, setZoom] = useState(1)    /* onCropComplete() will occur each time the user modifies the cropped area,     which isn't ideal. A better implementation would be getting the blob     only when the user hits the submit button, but this works for now  */    const onCropComplete = async (_, croppedAreaPixels) => {        const croppedImage = await getCroppedImg(            inputImg,            croppedAreaPixels        )        getBlob(croppedImage)    }    return (        /* need to have a parent with `position: relative`     to prevent cropper taking up whole page */        <div className='cropper'>             <Cropper                image={inputImg}                crop={crop}                zoom={zoom}                aspect={1}                onCropChange={setCrop}                onCropComplete={onCropComplete}                onZoomChange={setZoom}            />        </div>    )}export default ImageCropper

// ImageUpload.jsimport React, { useState } from 'react'import * as firebase from 'firebase/app'import ImageCropper from './ImageCropper'const ImageUpload = () => {    const [blob, setBlob] = useState(null)    const [inputImg, setInputImg] = useState('')    const getBlob = (blob) => {        // pass blob up from the ImageCropper component        setBlob(blob)    }    const onInputChange = (e) => {        // convert image file to base64 string        const file = e.target.files[0]        const reader = new FileReader()        reader.addEventListener('load', () => {            setInputImg(reader.result)        }, false)        if (file) {            reader.readAsDataURL(file)        }    }    const handleSubmitImage = (e) => {    // upload blob to firebase 'images' folder with filename 'image'        e.preventDefault()        firebase            .storage()            .ref('images')            .child('image')            .put(blob, { contentType: blob.type })            .then(() => {                // redirect user             })    }    return (        <form onSubmit={handleSubmitImage}>            <input                type='file'                accept='image/*'                onChange={onInputChange}            />            {                inputImg && (                    <ImageCropper                        getBlob={getBlob}                        inputImg={inputImg}                    />                )            }            <button type='submit'>Submit</button>        </form>    )}export default ImageUpload

// cropImage.js// create the image with a src of the base64 stringconst createImage = (url) =>    new Promise((resolve, reject) => {        const image = new Image()        image.addEventListener('load', () => resolve(image))        image.addEventListener('error', error => reject(error))        image.setAttribute('crossOrigin', 'anonymous')        image.src = url    })export const getCroppedImg = async (imageSrc, crop) => {    const image = await createImage(imageSrc)    const canvas = document.createElement('canvas')    const ctx = canvas.getContext('2d')    /* setting canvas width & height allows us to     resize from the original image resolution */    canvas.width = 250    canvas.height = 250    ctx.drawImage(        image,        crop.x,        crop.y,        crop.width,        crop.height,        0,        0,        canvas.width,        canvas.height    )    return new Promise((resolve) => {        canvas.toBlob((blob) => {            resolve(blob)        }, 'image/jpeg')    })}