Nsryjdtyk

I'm new to react and am learning to crop a photo. I've been following the codingforentreprenuers tutorial react and now canupload and crop an image. I want to take the cropped image and make it a certain size (e.g. 750x750 pixels). Thus no matter what size photo goes in, the same size photo comes out regardless of how much or how little you 'crop' it.

How can I set the width and height for this image cropper?

I'm tried the following, but it doesn't work.

crop: {

                aspect: 1/1,

                width: 750

            } 

React Code:

import React, { Component } from 'react'



import Dropzone from 'react-dropzone'

import ReactCrop from 'react-image-crop'

import './custom-image-crop.css';



import {base64StringtoFile,

    downloadBase64File,

    extractImageFileExtensionFromBase64,

    image64toCanvasRef} from './ResuableUtils'



const imageMaxSize = 1024 * 5000 // bytes

const acceptedFileTypes = 'image/x-png, image/png, image/jpg, image/jpeg, image/gif'

const acceptedFileTypesArray = acceptedFileTypes.split(",").map((item) => {return item.trim()})

class ImgDropAndCrop extends Component {

    constructor(props){

        super(props)

        this.imagePreviewCanvasRef = React.createRef()

        this.fileInputRef = React.createRef()

        this.state = {

            imgSrc: null,

            imgSrcExt: null,

            crop: {

                aspect: 1/1,

            }

        }

    }



    verifyFile = (files) => {

        if (files && files.length > 0){

            const currentFile = files[0]

            const currentFileType = currentFile.type

            const currentFileSize = currentFile.size

            if(currentFileSize > imageMaxSize) {

                alert("This file is not allowed. " + currentFileSize + " bytes is too large")

                return false

            }

            if (!acceptedFileTypesArray.includes(currentFileType)){

                alert("This file is not allowed. Only images are allowed.")

                return false

            }

            return true

        }

    }



    handleOnDrop = (files, rejectedFiles) => {

        if (rejectedFiles && rejectedFiles.length > 0){

            this.verifyFile(rejectedFiles)

        }





        if (files && files.length > 0){

             const isVerified = this.verifyFile(files)

             if (isVerified){

                 // imageBase64Data 

                 const currentFile = files[0]

                 const myFileItemReader = new FileReader()

                 myFileItemReader.addEventListener("load", ()=>{

                     // console.log(myFileItemReader.result)

                     const myResult = myFileItemReader.result

                     this.setState({

                         imgSrc: myResult,

                         imgSrcExt: extractImageFileExtensionFromBase64(myResult)

                     })

                 }, false)



                 myFileItemReader.readAsDataURL(currentFile)



             }

        }

    }





    handleImageLoaded = (image) => {

        //console.log(image)

    }

    handleOnCropChange = (crop) => {

        this.setState({crop:crop})

    }

    handleOnCropComplete = (crop, pixelCrop) =>{

        //console.log(crop, pixelCrop)



        const canvasRef = this.imagePreviewCanvasRef.current

        const {imgSrc}  = this.state

        image64toCanvasRef(canvasRef, imgSrc, pixelCrop)

    }

    handleDownloadClick = (event) => {

        event.preventDefault()

        const {imgSrc}  = this.state

        if (imgSrc) {

            const canvasRef = this.imagePreviewCanvasRef.current



            const {imgSrcExt} =  this.state

            const imageData64 = canvasRef.toDataURL('image/' + imgSrcExt)





            const myFilename = "previewFile." + imgSrcExt



            // file to be uploaded

            const myNewCroppedFile = base64StringtoFile(imageData64, myFilename)

            console.log(myNewCroppedFile)

            // download file

            downloadBase64File(imageData64, myFilename)

            this.handleClearToDefault()

        }





    }



    handleClearToDefault = event =>{

        if (event) event.preventDefault()

        const canvas = this.imagePreviewCanvasRef.current

        const ctx = canvas.getContext('2d');

        ctx.clearRect(0, 0, canvas.width, canvas.height)



        this.setState({

            imgSrc: null,

            imgSrcExt: null,

            crop: {

                aspect: 1/1

            }



        })

        this.fileInputRef.current.value = null

    }



    handleFileSelect = event => {

        // console.log(event)

        const files = event.target.files

        if (files && files.length > 0){

              const isVerified = this.verifyFile(files)

             if (isVerified){

                 // imageBase64Data 

                 const currentFile = files[0]

                 const myFileItemReader = new FileReader()

                 myFileItemReader.addEventListener("load", ()=>{

                     // console.log(myFileItemReader.result)

                     const myResult = myFileItemReader.result

                     this.setState({

                         imgSrc: myResult,

                         imgSrcExt: extractImageFileExtensionFromBase64(myResult)

                     })

                 }, false)



                 myFileItemReader.readAsDataURL(currentFile)



             }

        }

    }

  render () {

      const {imgSrc} = this.state

    return (

      <div>

        <h1>Drop and Crop</h1>





        <input ref={this.fileInputRef} type='file' accept={acceptedFileTypes} multiple={false} onChange={this.handleFileSelect} />

        <div>

        {imgSrc !== null ? 

            <div>





                 <ReactCrop 

                     src={imgSrc} 

                     crop={this.state.crop} 

                     onImageLoaded={this.handleImageLoaded}

                     onComplete = {this.handleOnCropComplete}

                     onChange={this.handleOnCropChange}/>



                  <br/>

                  <p>Preview Canvas Crop </p>

                  <canvas ref={this.imagePreviewCanvasRef}></canvas>

                  <button onClick={this.handleDownloadClick}>Download</button>

                  <button onClick={this.handleClearToDefault}>Clear</button>

              </div>





           : 

            // <div></div>

             <Dropzone onDrop={this.handleOnDrop} accept={acceptedFileTypes} multiple={false} maxSize={imageMaxSize}>Drop image here or click to upload</Dropzone>



         }

         </div>



      </div>



    )

  }

}



export default ImgDropAndCrop