react-cropper-custom

A React component to crop images with interactions.

language

Korean

Demo

Check out the examples:

• Basic example with hooks
• Responsive cropper example with hooks

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.