Javascript – react-image-cropper issue implemention

The <ReactCrop> component doesn’t have a src property. You need to wrap it around an <img />.

Additionally, if you want to display a preview of the cropped image, you can draw the image directly to a canvas element ref.

Below is a simplified, annotated example.

import { useState, useRef, useEffect } from 'react';

import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';


const initialCropValues = {
  unit: '%',
  x: 0,
  y: 0,
  width: 50,
  height: 50,
};

function App() {
  // original image src
  const [src, setSrc] = useState(null);
  // state to store onCropChange crop values (as percentages)
  const [crop, setCrop] = useState(initialCropValues);
  // state to store onCropComplete crop values (as pixels)
  const [completedCrop, setCompletedCrop] = useState(null);

  // ref for img element
  const imgRef = useRef(null);
  // ref for canvas element
  const canvasRef = useRef(null);

  const onSelectFile = (e) => {
    // if a file is selected
    if (e.target.files && e.target.files.length > 0) {
      // instantiate a FileReader
      const reader = new FileReader();
      // listen for the load event only once
      reader.addEventListener(
        'load',
        () => {
          // if the result is a string set it as the src state
          if (typeof reader.result === 'string') setSrc(reader.result);
          // reset the crop values
          setCrop(initialCropValues);
          // set the initial completed crop to clear the canvas
          // of a previous image crop, if any
          setCompletedCrop({
            unit: 'px',
            x: 0,
            y: 0,
            width: 0,
            height: 0,
          });
        },
        { once: true }
      );
      // read the file as a data url
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  // set the crop values onCropChange
  const onCropChange = (crop) => setCrop(crop);

  // set the completed crop values onCropComplete
  const onCropComplete = (crop) => {
    setCompletedCrop(crop);
  };
  
  useEffect(() => {
    // return if there's no canvas element, image or crop values
    if (!canvasRef.current || !imgRef.current || !completedCrop) return;

    // reset the completed crop state
    setCompletedCrop(null);

    // destructure the crop values for convenience
    const { x, y, width, height } = completedCrop;

    // get the 2d context for the canvas element
    const ctx = canvasRef.current.getContext('2d');

    // make sure there is a context
    if (!ctx) return;

    // clear the canvas
    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);

    // set the canvas height and width to the crop size
    canvasRef.current.width = width;
    canvasRef.current.height = height;

    // calculate the original image scale
    const scaleX = imgRef.current.naturalWidth / imgRef.current.width;
    const scaleY = imgRef.current.naturalHeight / imgRef.current.height;

    // draw the cropped image to the canvas
    ctx.drawImage(
      imgRef.current,
      x * scaleX,
      y * scaleY,
      width * scaleX,
      height * scaleY,
      0,
      0,
      width,
      height
    );
    return () => {};
  }, [completedCrop, src]);
  
  return (
    <>
      <h1>React Image Crop</h1>
      <input type="file" accept="image/*" onChange={onSelectFile} />
      {src && (
        <ReactCrop
          crop={crop}
          ruleOfThirds
          onComplete={onCropComplete}
          onChange={onCropChange}
        >
          <img
            src={src}
            alt="Image to be cropped"
            style={{ maxHeight: '80vh' }}
            ref={imgRef}
          />
        </ReactCrop>
      )}
      <canvas ref={canvasRef} width={0} height={0} />
    </>
  )
}

export default App;