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

Cropper as React components

Currently only support Webpack build

Docs

• Image Cropper

Installation

npm install webpack
npm install style-loader css-loader

Usage

var Cropper = require('react-cropper');
var Demo = React.createClass({
  _crop: function(){
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  },

  render: function() {
    return (
      <Cropper
        ref='cropper'
        src={'http://fengyuanchen.github.io/cropper/img/picture.jpg'}
        style={{height: 400, width: '100%'}}
        // Cropper.js options
        aspectRatio={16 / 9}
        guides={false}
        crop={this._crop} />
    );
  }
});