simple-image-cropper

simple-image-cropper is a customizable ReactJS library for cropping some specific part of an image by zooming and and selecting specific portion of image.

Installation

1npm install simple-image-cropper

Usage

simple-image-cropper is a customizable library so you can apply your own styles on specific parts of this tool. simple-image-cropper uses a higher order component function called withCropper which makes it possible to apply custom design on it.

Imports

1import { withCropper, Avatar, ZoomSlider } from 'simple-image-cropper';

Basic Example

1const Cropper = withCropper(({ avatarProps, zoomSliderProps, onSave, onCancel }) => {
2  return (
3    <div>
4      <Avatar avatarProps={avatarProps} />
5      <ZoomSlider zoomSliderProps={zoomSliderProps} />
6      <button type="button" onClick={onCancel}>Cancel</button>
7      <button type="button" onClick={onSave}>Save</button>
8    </div>
9   );
10});
11
12class App extends React.Component() {
13  constructor(props){
14    ...
15  }
16  onSave(url) {
17    ...
18  }
19  onCancel() {
20    ...
21  }
22  render() {
23    returns (
24      <Cropper
25        width={200}
26        height={200}
27        url={imageUrl}
28        onCancel={this.onCancel}
29        onSave={this.onSave}
30      />
31    )
32  }
33}

withCropper()

withCropper is a higher order component function which provides all the necessary props required by the Avatar and ZoomSlider component and by the cancel and save button and returns a Cropper Component.

1const Cropper = withCropper(({ avatarProps, zoomSliderProps, onSave, onCancel }) => {
2  return ...
3}); // returns Croppper Component

Note: withCropper returns a Cropper Component which renders our image cropper.

---

Avatar

Avatar component is responsible for showing image with zooming and dragging features.

1<Avatar avatarProps={avatarProps} />

Note: avatarProps is provided by withCropper function's single object argument's property.

1<Avatar
2  className="avatar"
3  style={{ borderRadius: '100%' }}
4  avatarProps={avatarProps}
5/>

Note: Avatar component also accepts style and className props.

---

ZoomSlider

ZoomSlider component is responsible for showing range slider for zoom.

1<ZoomSlider zoomSliderProps={zoomSliderProps} />

Note: zoomSliderProps is provided by withCropper function's single object argument's property.

1<ZoomSlider
2  className="zoom-slider"
3  style={{ marginTop: '10px' }}
4  zoomSliderProps={zoomSliderProps}
5/>

Note: ZoomSlider component also accepts style and className props.

---

Cropper

Cropper component is responsible for render our image cropper. Cropper Component is returned from withCropper function.
Cropper component accepts 5 arguments:

Prop	Type	Required
width	number	true
height	number	true
url	image url or base64 url	true
onSave	function	true
onCancel	function	false

width : number

width is the width of the Avatar component. Required.

height : number

height is the height of the AvatarComponent. Required.

url: string

url is the online image url or base64 url. Required.
Note: If you are using file type input for image you will need to read file using fileReader api to convert it into data url.

onSave: function

onSave prop accepts a function which is passed to a button through withCropper function and is called when this button is clicked. Function passed to this prop is called with a url argument which is the base64 url of cropped part of image. Required.

onCancel: function

onCancel prop accepts a function which is passed to a button through withCropper function and is called when this button is clicked. Not Required.

Additional Help

If you are using file type input for image you will need to convert that file into data url using fileReader api.
You can use code below to convert input file to data url.

1class App extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      imageUrl: null,
6    };
7    this.onFileChange = this.onFileChange.bind(this);
8  }
9
10  onFileChange(e) {
11    const file = e.target.files[0];
12
13    const fileReader = new FileReader();
14
15    fileReader.readAsDataURL(file);
16
17    fileReader.onloadend = (e) => {
18      this.setState({ imageUrl: e.target.result });
19    };
20  }
21
22  render() {
23    const { imageUrl } = this.state;
24
25    return (
26      <div className="app">
27        <input type="file" onChange={this.onFileChange} />
28        ...
29        <Cropper
30          width={200}
31          height={200}
32          url={imageUrl}
33          onCancel={this.onCancel}
34          onSave={this.onSave}
35        />
36      </div>
37    );
38  }
39}