Hi @giacomocerquone , Could you please tell me why I am getting this warning? when I select the image I get this warning?

ERROR
Cannot read properties of undefined (reading 'imread')
TypeError: Cannot read properties of undefined (reading 'imread')
at showPreview

Would be nice to add tests though I'm unsure on the right tool to do some integration and e2e test!

A typescript typing's file should be added in order to let the editors provide correct hints on this package api

It would be nice to be able to declare a return mime-type for the image instead of just using the mime-type from the original image.

locally I am currently doing something like this (modified from the example)

const doSomething = async () => {
    try {
      const res = (await cropperRef?.current?.done({
        preview: true,
        filterCvParams: {
          grayScale: false,
          th: false,
        },
        image: {
          quality: 0.8,
          type: "image/jpeg",
        },
      })) as Blob;

      updateBlobState(res);
      setFileChanged(true);
    } catch (e) {
      console.log("error", e);
    }
  };

And then in Canvas.js using extended options.

canvasRef.current.toBlob(
          (blob) => {
            blob.name = image.name;
            resolve(blob);
            setLoading(false);
          },
          opts.image.type || image.type,
          opts.image.quality || 1
        );

I can submit a pull request if this is something you would be interested in adding to the library.
I believe the way I did it would implement it in a non-breaking way, given the OR operations to provide defaults.

Hi,Is it possible to do rotation?

When I tried to install this library, an error was raised because the react version was not compatible. Can you update the react version, please?

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/react-perspective-cropper
npm ERR!   react-perspective-cropper@"*" from the root project

How to keep image unchanged after crop, currently it's going to black and white. Have any way to keep it original quality as well as the same color?

Hi @giacomocerquone,

I'm implementing this feature in a React app with typescript, and I can't initialize the croppedRef, I noticed in the files it is React.ElementRef with no children type, but it does require this ElementRef<{specific type}>.

Because of that, I can't call done method to crop the image.

I saw on npmjs it has the TypeScript icon, but I haven't seen a @types package, as I understand it's there because of the interface with props, but I can't inherit type of ref or anything.

Any ideas?

const [file, setFile] = useState<File | null>(null);
const [croppedFile, setCroppedFile] = useState<File | null>(null);

I have these two states, file is the initial one, croppedFile is passed to the component, on reset, I want to redo the crop from the file I already have, so this means to reassign the file to the cropped one state setCroppedFile(file).

const resetCrop = () => {
    setCroppedFile(file);
    cropperRef?.current?.backToCrop();
  };

This ends up leaving loading on true.

As of now both the image to crop and the resulting cropped image are presented with a maxHeight and maxWidth based on the height and width of the uploaded image.

This is a problem for two reasons:

• The user can't correctly style it with CSS since canvas can't be styled through HTML styled wrapper elements that force a certain width or height to the inner child
• The cropped image should be smaller, nonetheless it is presented with the same size of the original image