react-cropper

What is react-cropper?

The react-cropper package is a React wrapper for Cropper.js, a JavaScript image cropping library. It allows you to easily integrate image cropping functionality into your React applications.

What are react-cropper's main functionalities?

Basic Image Cropping

This code demonstrates how to set up a basic image cropping component using react-cropper. It includes a reference to the Cropper instance and logs the cropped image data URL to the console.

```jsx
import React, { useRef } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

const ImageCropper = () => {
  const cropperRef = useRef(null);
  const onCrop = () => {
    const cropper = cropperRef.current.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://via.placeholder.com/800x400"
      style={{ height: 400, width: '100%' }}
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

export default ImageCropper;
```

Custom Aspect Ratio

This example shows how to set a custom aspect ratio for the cropping area. In this case, the aspect ratio is set to 4:3.

```jsx
import React, { useRef } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

const CustomAspectRatioCropper = () => {
  const cropperRef = useRef(null);
  const onCrop = () => {
    const cropper = cropperRef.current.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://via.placeholder.com/800x400"
      style={{ height: 400, width: '100%' }}
      aspectRatio={4 / 3}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

export default CustomAspectRatioCropper;
```

Cropping with Preview

This example demonstrates how to display a preview of the cropped image. The cropped image data URL is stored in the state and displayed in an <img> element.

```jsx
import React, { useRef, useState } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

const CropperWithPreview = () => {
  const cropperRef = useRef(null);
  const [preview, setPreview] = useState('');

  const onCrop = () => {
    const cropper = cropperRef.current.cropper;
    setPreview(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <div>
      <Cropper
        src="https://via.placeholder.com/800x400"
        style={{ height: 400, width: '100%' }}
        initialAspectRatio={16 / 9}
        guides={false}
        crop={onCrop}
        ref={cropperRef}
      />
      <div>
        <h3>Preview:</h3>
        <img src={preview} alt="Cropped Preview" />
      </div>
    </div>
  );
};

export default CropperWithPreview;
```

Other packages similar to react-cropper

react-image-crop

react-image-crop is another React component for cropping images. It provides a simple and flexible way to crop images with support for touch devices. Compared to react-cropper, it has a more straightforward API but lacks some advanced features like zooming and rotating.

react-easy-crop

react-easy-crop is a React component to crop images and videos. It offers a simple and intuitive interface for cropping, with support for touch gestures. It is similar to react-cropper but focuses on ease of use and simplicity, making it a good choice for basic cropping needs.

react-avatar-editor

react-avatar-editor is a React component for cropping and rotating images, particularly useful for profile pictures and avatars. It provides a user-friendly interface for image manipulation. Compared to react-cropper, it is more specialized for avatar editing and includes features like border radius and scale.

README

react-cropper

Cropperjs as React component

Demo

Click for a Demo

Docs

• Cropperjs

Installation

Install via npm

npm install --save react-cropper

You need cropper.css in your project which is from cropperjs. Since this project have dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later

Breaking Change (version >= 2.0.0)

1. Support for ref has been removed. Use the onInitialized method to get the cropper instance. Added back ref support in 2.1.0.
2. To set initial aspect ratio, instead of using aspectRatio use initialAspectRatio.
3. Props data, canvasData and cropBoxData are directly passed on to cropperjs and their respective setters are not called as earlier.
4. React Cropper now does not try to use/execute moveTo as earlier. Directly use the moveTo method from the cropper instance.
5. React Cropper does not depend on @types/react-cropper and provides its own types. Please uninstall/remove @types/react-cropper as they might 'cause issues.

Quick Example

import React, { useRef } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<HTMLImageElement>(null);
  const onCrop = () => {
    const imageElement: any = cropperRef?.current;
    const cropper: any = imageElement?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

Options

src

• Type: string
• Default: null

<Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />

alt

• Type: string
• Default: picture

crossOrigin

• Type: string
• Default: null

dragMode

https://github.com/fengyuanchen/cropperjs#dragmode

scaleX

https://github.com/fengyuanchen/cropperjs#scalexscalex

scaleY

https://github.com/fengyuanchen/cropperjs#scalexscaley

enable

https://github.com/fengyuanchen/cropperjs#enable

disable

https://github.com/fengyuanchen/cropperjs#disable

zoomTo

https://github.com/fengyuanchen/cropperjs#zoomto

rotateTo

https://github.com/fengyuanchen/cropperjs#rotateto

Other options

Accept all options in the docs as properties.

Methods

Use the cropper instance from onInitialized to access cropperjs methods

Build

npm run build

Development

npm start

Author

Fong Kuanghuei

Maintainer

Shubhendu Shekhar

License

MIT