react-image-crop | A responsive image cropping tool for React | Frontend Framework library

I've built a Slack-style avatar image upload and crop feature, and I can't get the cropped image to save without corruption. The original file upload, using the same endpoint and method, works just fine. It's the cropped copy, created manually from a Blob, that is always corrupt.

Steps are pretty simple:

1. Select and upload an image file
2. Crop (react-image-crop) appears
3. Select area, hit Save

In Step 1, the file is uploaded when the file input changes. File is sent to a streaming endpoint which uploads the file to an s3 bucket.

I'm getting this error after I've updated the packages in my package JSON file.

I am using canvas to capture the cropped image. here is the function

After @typescript-eslint upgrade es-lint started lint errors like:

28:15 error 'token' is defined but never used @typescript-eslint/no-unused-vars

in source code:

I am get an error while uploading a cropped image using react-image-crop. I think, I am not properly converting the base64 to file type before uploading or that function isn't running?. I am new to react and javascript so lots of things, still confuses me. Can anyone please have a look at the code and help resolve the issue?

I am using django rest api.

This is the link to the package:

I'm using React-image-crop to select area of interest of an image, but I need to read the preset crop dimensions from props at first, so that the cropped area is selected when the image is open. I'm using componentDidMount() to update the crop in state. But it is not working and I got an error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I'm implementing a web app the uses the Cloud Vision API to detect text on user-generated images.

I'm using React and Firebase cloud functions.

The flow is the following:

• User gets image from Gallery or Camera, crops it using react-image-crop package
• This package uses a element to generate the cropped images
• I'm converting the image to base64 using canvas.toDataURL("image/jpeg",1.0);
• I'm passing the imageBase64 string to a cloud function
• The cloud function needs to read the image and call the Cloud Vision API

CLIENT CODE

I have a web app in which I installed an npm package. Now I noted that I need to add code to customize it. I tried to go to node_modules, found the package, and edited it but the changes don't show. is there a way to do it? Also to avoid losing the changes I make to the packages I forked the package from GitHub.

----Update I have aa package called react-image-crop the relative path is node_modules/react-image-crop. Every time the below function gets called I want to log X and Y of the position:

I am using react-image-crop. When using the npm, I can pull the crop dotted lines from the corner but I need to crop it from the sides as well. So it is possible to do so? Here is the code https://codesandbox.io/s/72py4jlll6