Cropper getCroppedCanvas() is not a function error

Question

i was working on a project using Cropper to cut images, and i just have this error This is my code, the error is in the handleCrop function, can somebody help me ? :)

import { useRef, useState } from "react";
import UploadWidget from "../../UploadWidget/UploadWidget";
import styles from './Grilla0.module.css'
import Cropper from "react-cropper";
import 'cropperjs/dist/cropper.css';


const Grilla0 = ({ phoneImg }) => {

    const [imgData, setImgData] = useState(null);

    const [escala, setEscala] = useState(1);

    const [translateX, setTranslateX] = useState(0);

    const [translateY, setTranslateY] = useState(0);

    const [croppedImage, setCroppedImage] = useState(null);

    const cropperRef = useRef(null);

    const handleCrop = () => {
        if (cropperRef.current) {
            const croppedCanvas = cropperRef.current.getCroppedCanvas();
            const croppedImageBase64 = croppedCanvas.toDataURL();
            setCroppedImage(croppedImageBase64);
        }
    };

    return (
        <>
            <div className={styles.marco}>
                {imgData && (
                    <Cropper
                        ref={cropperRef}
                        src={imgData.url}
                        className={styles.croper}
                        style={{
                            transform: `scale(${escala}) translate(${translateX}px, ${translateY}px)`,
                        }}
                        aspectRatio={NaN}
                        guides={true}
                        viewMode={1}
                        dragMode="move"
                        autoCropArea={1}
                        cropBoxResizable={false}
                    />
                )}
                <img className={styles.marcoImg} src={phoneImg} alt="" />
            </div>

            <UploadWidget getImageData={setImgData} />

            <div className={styles.containerEditar}>
                <div className={styles.container}>
                    <button
                        className={styles.button}
                        onClick={() => setEscala(escala + 0.3)}
                    >
                        Zoom +
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setEscala(escala - 0.3)}
                    >
                        Zoom -
                    </button>
                </div>

                <div className={styles.container}>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateY(translateY - 5)}
                    >
                        Arriba
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateY(translateY + 5)}
                    >
                        Abajo
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateX(translateX + 5)}
                    >
                        {"=>"}
                    </button>
                    <button
                        className={styles.button}
                        onClick={() => setTranslateX(translateX - 5)}
                    >
                        {"<="}
                    </button>
                </div>
            </div>

            <button className={styles.button2} onClick={handleCrop}>
                Recortar
            </button>

            {croppedImage && (
                <div>
                    <h2>Imagen recortada:</h2>
                    <img src={croppedImage} alt="Imagen recortada" />
                </div>
            )}
        </>
    );
}

export default Grilla0;

I tried what is in that code and i expect to get a button that you can click and the image that you previusly load, once you click the button, it should generate another image but cutted by the dimensions that can be modified by the buttons "Zoom +" "Zoom -", "Arriba", "Abajo", "<=", "=>".

Answer 1

It should be:

const handleCrop = () => {
        if (cropperRef.current) {
            const croppedCanvas = cropperRef.current.cropper.getCroppedCanvas();
            const croppedImageBase64 = croppedCanvas.toDataURL();
            setCroppedImage(croppedImageBase64);
        }
};

See official example