Skip to content

catca/react-cropper-custom

Repository files navigation

react-cropper-custom

A React component to crop images with interactions.

cropper

language

Korean

Demo

Check out the examples:

Features

  • Supports drag, zoom interactions.
  • The image is automatically enlarged to fit the crop area.

Installation

yarn add react-cropper-custom

or

npm install react-cropper-custom --save

Basic usage

import { Cropper } from 'react-cropper-custom';
import "react-cropper-custom/dist/index.css";

const Demo = () => {
  const [zoom, setZoom] = useState(1);

  const onCropComplete = (croppedArea) => {
    console.log(croppedArea);
  };

  return (
    <Cropper
      src={yourImage}
      width={WIDTH}
      height={HEIGHT}
      zoom={zoom}
      onZoomChange={setZoom}
      onCropComplete={onCropComplete}
    />
  );
};

Props

Prop Type Required Description
src string The image to be cropped. src is required.
width number Size of the crop area (in pixels). Defaults to 0. If the width and height values are 0, the crop area is responsive. It also follows the proportions of aspect props.
height number Size of the crop area (in pixels). Defaults to 0. If the width and height values are 0, the crop area is responsive. It also follows the proportions of aspect props.
aspect number Aspect of the crop area (height / width). Defaults to 1.
zoom number Zoom of the media between minZoom and maxZoom. Defaults to 1.
minZoom number Minimum zoom of the media. Defaults to 1.
maxZoom number Maximum zoom of the media. Defaults to 3.
onZoomChange zoom => void Called everytime the zoom is changed. Use it to update your zoom state.
initialCroppedArea {x: number, y: number, width: number, height: number} Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedArea passed to onCropComplete.
onCropComplete Function Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in pixels and image.

onCropComplete(croppedArea)

This callback is the one you should use to save the cropped area of the media. It's passed 1 arguments:

  1. croppedArea: coordinates and dimensions of the cropped area in percentage of the media dimension.

croppedArea argument have the following shape:

const croppedArea = {
  x: number, // x/y are the coordinates of the top/left corner of the cropped area
  y: number,
  width: number, // width of the cropped area
  height: number, // height of the cropped area
};

Examples

responsive cropper

import { Cropper, getCroppedImg } from 'react-cropper-custom';
import "react-cropper-custom/dist/index.css";

const Demo = () => {
  const [img, setImg] = useState(yourImage);
  const [aspect, setAspect] = useState(1);

  const onCropComplete = async (croppedArea) => {
    try {
      const image = await getCroppedImg(yourImage, croppedArea, { width: 1200, height: 1200 * aspect });
      setImg(image);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div className="wrapper">
      <Cropper
        src={yourImage}
        aspect={aspect}
        onCropComplete={onCropComplete}
      />
    <div>
  );
};
.wrapper {
  width: 100%;
  max-width: 540px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

License

MIT

Maintainers

This project is maintained by catca.