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 components

Demo

Docs

• Image Cropper

Installation

Install via npm

npm install --save react-cropper

Webpack User

You also need a couple of loaders for webpack

npm install style-loader css-loader

Browserify User

https://github.com/cheton/browserify-css

npm i --save-dev browserify-css

Compile your project with command line like

 browserify -t reactify -g browserify-css index.jsx > bundle.js

If you are using gulp, browserify or other build tools, make sure you enable global option true

For example in gulp you should do

b.transform(browserifycss, {global: true});

Todo

• Unit test

Quick Example

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} />
    );
  }
});

Options

src

• Type: string
• Default: null

  <Cropper src='http://fengyuanchen.github.io/cropper/img/picture.jpg' />

Other options

Accept all options in the docs as attributes.

  <Cropper
    src='http://fengyuanchen.github.io/cropper/img/picture.jpg'
    aspectRatio={16 / 9} 
    guides={false} 
    crop={this._crop} />

Methods

Assign a ref attribute to use methods

var Demo = React.createClass({

  _crop: function(){
    var dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
    console.log(dataUrl);
  },

  render: function() {
    return (
      <Cropper
        ref='cropper'
        crop={this._crop} />
    );
  }
})

Build

npm run build

Author

Fong Kuanghuei([e-mail])

License

MIT