Questions tagged [react-image-crop]
42 questions
0
votes
0 answers
react-image-crop returns black image when creating image blob file only on Chrome
I have an ImageCropper function that works perfectly on Firefox, but not Chrome.
On chrome, the blob file it produces is empty ie a black image.
Through debugging, I know that the sourceImage HTMLImageElement being passed into the ctx.drawImage()…

Simon Gowing
- 241
- 1
- 2
- 10
0
votes
0 answers
react-image-crop and scale
so i am using the react-image-crop with kotlin js, i have it working on a vanilla implementation without any css transformation...
i am having issues when it has been modified by css
i am using the crop preview from the example (the best i could…

Chris Legge
- 739
- 2
- 9
- 24
0
votes
0 answers
React image crop preview canvas not working after version change
I have changed the react-image-crop dependency version and migrated version 9 to 10. The image crop worked fine in the 9th version but in version 10, it returns a null value for the preview canvas.
Also,right after putting the crop, in shows a type…
0
votes
2 answers
Image crop scaling issue with react-image-crop
I just starting to learn React. I've been having issues with the react-image-crop package. The document they have was not newbie friendly, I just barely made it work at this point. Now my issue is that the result cropped image is totally different…

Slowcode_beef
- 1
- 1
- 2
0
votes
0 answers
Failed to execute 'toBlob' for canvas converting to file
i want to convert my cropped canvas to file,this is my code in order to do that:
const canvas = previewCanvasRef.current;
canvas?.toBlob((blob) => {
const file = new File([blob], 'fileName.jpg', { type: 'image/jpeg' });
}
but when i try to…

Maziyar parsi
- 11
- 1
- 4
0
votes
0 answers
react-image-crop last version Failed to execute 'drawImage' on 'CanvasRenderingContext2D'
I have literally tried very much to fix this error and nothing is currently working,
this is the code im using:
import "./styles.css";
import { useState } from "react";
import ReactCrop from "react-image-crop";
import…

Schevenz Rs
- 47
- 8
0
votes
1 answer
react javascript image cropper Cannot read properties of null
Im trying to get this code for image browsing then cropping the browsed image working:
This is the supposed code to be working:
import "./styles.css";
import React, { useState } from "react";
import ReactCrop from 'react-image-crop';
import…

Schevenz Rs
- 47
- 8
0
votes
0 answers
react-image-crop: How to get cropped image from canvas and set it as file input value in form to submit to backend?
How do I get the cropped image from canvas with DominicTobias/react-image-crop,
and set it as file input value for a form to submit to backend?
I followed this tutorial:…

yeln
- 462
- 2
- 10
- 23
0
votes
0 answers
react-image-crop reset to initial state
I have implemented react-image-crop. But after cropping I can not reset to initial state. When clicking ouside the selected croped image, the image reset to initial state.
I want to reset the crop to initial state on clicking a Button named Reset…
0
votes
0 answers
react-image-crop will not provide initial crop on canva
Have an issue with react-image-crop. If I change the crop, it works perfectly, but if I just load and then hit save, I get an empty image back. At first I thought maybe its just not loading it, but I can see the croped image on load. And I don't get…

vrghost
- 1,084
- 2
- 19
- 42
0
votes
0 answers
How to use react-image-crop with python-django backend cropping?
I am trying to use Python Pillow to crop the images with react-image-crop and it seems to be working fine, but I can not figure out how to set the scale (zooming) to be working with the backend. Any help would be greatly appreciated!
Frontend-…

Raad Altaie
- 1,025
- 1
- 15
- 28
0
votes
1 answer
How Can i set large cropper for large images .(react-image-crop)
I have used react-image-crop (https://www.npmjs.com/package/react-image-crop) to crop the large image. I need to crop a 1920X726 size image. if I am giving this size for cropper it is adding blank canvas into the image.
0
votes
1 answer
React Blob to File upload via Node endpoint - file is corrupt
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…

Tsar Bomba
- 1,047
- 6
- 29
- 52
0
votes
0 answers
React crop image to specific cropped dimensions
I am trying to crop an image in react by using the react-image-crop library, and I got the cropping functionality working.
import React, { useCallback, useRef, useState } from "react";
import ReactCrop, { Crop } from "react-image-crop";
import…

Riexn
- 113
- 2
- 11
0
votes
1 answer
In toast-ui/react-image-editor, not able download the image on download click
When I click on the download button it is taking me to the new blank page with the image, but in the API examples from the documents, its downloading on click, to the local storage, and for this in git its telling me to use file-saver to download…

MAHMAD MUSTAQ
- 1
- 1