React-cropper-custom-test NPM

react-cropper-custom

A React component to crop images with interactions.

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

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:

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.

react crop cropper image crop

normalize-wheel

@infinitebrahmanuniverse/nolb-react-cr @everything-registry/sub-chunk-2548

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago