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()…
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…
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…
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…
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…
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…