I am curious if this package retains the quality of the original image after the crop... if cropping happens on the front end as is shown in the demo?

The reason I ask is when I use the example (as shown below), the resulting crop looks a lot more pixelated and less quality image so I am curious if that is what the end result is on the front end?

The workaround would be to pass the crop parameters and the original image to backend and have another package crop the image, but that would require a lot more work so is there a way to do this well on the front-end?

hi, i have this weird behaviour... not in all images, but with some particular images when i hit the image bottom boundary, the crop box goes back the top... any suggestion? thank you! Matteo

Firstly, great stuff on this project - really useful and simple!

My personal use-case is to have a predefined crop size, and then have moving that around be the only option for the user (ie. no resizing of the crop area, and no dragging to create a new crop area).

I had to fork the repo to implement this functionality, but wondering if that's something you'd be interested in for this repo? If so I can PR those changes in.

Thanks - love your work!

I'm using the latest (1.0.0-rc3) version of react-image-crop with the following crop attributes:

const cropAttributes = {
  width: 100,
  height: 12,
  x: 0,
  y: 0,
  aspect: 1663/200
}

and I'm receiving the following error in the Chrome console: Error: <polygon> attribute points: Expected number, "0 0, 1 0, 1 NaN, 0 NaN".

Interestingly enough, this error has no effect on the crop. Everything works as expected, the aspect ratio is locked, the height, width, and coordinates are also correct, even with different values.

It seems that the inclusion of aspect in the attributes is the only thing that causes this error. Also, if the aspect is the only attribute specified, no error occurs:

const cropAttributes = {
  aspect: 1663/200
}

I suspect this might be an issue with webkit but I'm not 100% certain.

Hi!

I'm just testing the new version of react-image-crop and I think there is a issue with the coords/size of crop. In the previous version I was using pixelCrop from onComplete to get the real coords/size of selection (regardless resize due to CSS). But in the new version the crop coords/size seems to be relative to a scale due to resize. This make incompatible pixelCrop from te previous version and crop of the new one. Also, the old pixelCrop is not available.

In my opinion, we should always return the real crop size, regardless a resize from the browser.

Hi! Thank you for creating this plugin! I'm currently trying to implement it in my project, but I keep getting the following error: warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method ofAddEditLinkModal.

Perhaps I'm implementing it the wrong way? I'm using webpack for my assets. I've put "react-image-crop" inside my "vendor" entry.

Inside my react component I've done the following import: import ReactCrop from "react-image-crop"; And the logic I created:

public state: State = {
	crop: {
		x: 0,
		y: 0,
		aspect: 10 / 4,
		width: 50,
	},
};
constructor(props: Props, state: State) {
	super(props, state);

	this.onCropImageChange = this.onCropImageChange.bind(this);
}

public handleImgSelection(e: any) {
	e.preventDefault();
	const {setImg} = this.props;

	const reader = new FileReader();
	const file = e.target.files[0];

	reader.onloadend = () => {
		setImg(file, reader.result);
	};

	reader.readAsDataURL(file);
}

public onCropImageChange(crop: State["crop"]) {
	this.setState({crop: crop});
}

Inside my render I'm rendering the following ReactCrop: <ReactCrop crop={this.state.crop} src={imgPreview} onChange={this.onCropImageChange} />

The imgPreview is the reader.result which is saved to my redux store.

If the image is rotated or flipped via Exif data, this information is not taken care of. As a result, the image is not shown properly in the cropper.

Example images: https://github.com/recurser/exif-orientation-examples

Hey @DominicTobias this lib looks great & really want to use it, but when i try to import it into my components i'm getting this error

error No default export found in module import/default

any advice would be appreciated thanks.

I couldn't find any previous discussion on this, so I will start one here.

Our use case involves adding ReactCrop inside a react-modal and we noticed that ReactCrop does not work properly on iOS when placed inside a modal. Basically, the crop rectangle disappears.

I'm not sure what could be causing this, but my guess is that on iOS Safari the getElementOffset code works unexpectedly because of the way the modal is positioned? I'm going to try to debug this further tomorrow.

I've modified the demo to include a modal for debugging purposes: https://github.com/Camversity/react-image-crop/tree/debug-modal

Any thoughts on this?

Hi,

as many others using this library, I also have issues with cropping mobile images that have orientation metadata. I understand that this is not an issue specifically of this library, however it's kind of hard to work with the cropper in the current state, and I would like to ask if the library can help in my scenario.

Using the library javascript-load-image, I can successfully obtain a CanvasHTMLElement with the image rotated in the proper orientation. However I still have the issue, later on, to use the content of the canvas with react-image-crop in order to show the cropper to the user.

So far I have been calling canvas.toDataURL() and using the result as the src prop for the cropper.

However this is quite slow and inefficient, since we already have a canvas element loaded with the proper image, and we are reconverting it to a URL so that the cropper can reload it once again into another img.

Would it be possible for the cropper to receive as prop the canvas element in the first place, and visualize the cropper layer on top of it?

The changes for the ES6 build no longer work when including ReactImageCrop statically

<Removing bad copy/paste ... see below>

Last working build 4.0.1

I believe this is due to the borders of crop selection but the cropped image exceeds the dimensions of the natural image which can cause black / white pixels around the cropped image.

I don't want to limit the max dimensions as this might produce inaccurate cropped image.

What's the work around for this?

https://user-images.githubusercontent.com/8109619/206909871-09fdf05d-1642-4d2f-b58a-f3e52975172f.mov

Hi, this is new, and seems to be an edge case of some sort (it's happened only twice that we've seen, and both recently, after using this library for a few years), but there is a situation where users crop an image, and then the image is super tiny in the top left of an otherwise black canvas.

https://d3k9p5zq72yv95.cloudfront.net/users/user/dDn7EL4_TnahHFov2_fqxA.jpeg

What the user cropped for their profile photo was what was ultimately in the top left of this canvas. I have a Clarity recording of the user's session, and can see they did nothing out of the ordinary, and the user saw a full crop of the image they selected, as was expected, but what was saved is the image you see linked above.

We are using 8.6.5.

This user was on iOS Safari:

{"os": "iOS", "ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6,2 Mobile/15E148 Safari/604.1", "model": "iPhone", "vendor": "Apple", "isMobile": true, "osVersion": "15.7"}

Thanks!

Mike

How do I get the cropped image from canvas, and set it as file input value in form to submit to backend?

here is my useEffect for the ref:

  /*
    |--------------------------------------------------------------------------
    | Use Effect 2
    |--------------------------------------------------------------------------
    */
    useEffect(() => {

        if(bigPreviewCanvasRef.current) {

            bigPreviewCanvasRef.current.toBlob(
                (blob) => {

                    const newImage = new File([blob], blob.name, {type: blob.type,});

                    console.log('bigPreviewCanvasRef.current > newImage: ' + JSON.stringify(newImage, null, 2));

                },
                'image/jpg',
                1
            )

        }

    }, [completedCrop]);
    ```

but it returns `bigPreviewCanvasRef.current > newImage: {}` EMPTY in console log everytime

I am currently trying to obtain a cropped image from a canvas element. I have tried to update the code to work with a canvas instead of the standard img I have seen in examples, but so far its just outputting a blank image for the result. Any help on how to correctly implement this functionality would be much appreciated. Thanks.

CodeSandbox example

Currently getter of document on ReactCrop simply returns document. And it is probably correct for 99,9% of use cases.

In my use case, however - I render crop tool into another window, from source window, via React portal. This means - source window runs the javascript, while crop lives in another window.

As a result - it simply doesnt work.

I did apply some workaround locally:

Reflect.defineProperty(ReactCrop.prototype, "document", {
  get() {
    // get document that 'owns' HTML instance of crop DOM element
    return (this as ReactCrop).componentRef.current?.ownerDocument ?? document;
  },
});

that solved the issue