arwy-image-cropper-react

Intention

This is a small component for clipping images. It supports mouse and touch events.
You give a base64image in and get the cropped image back at every user interaction.

Props

| | | | |-|-|-| | thumbSize: | width and height of the thumbnail
| src: | base64image source
| preview: | displays the thumbnail on ImageCropper. this prop is for debugging
| onChange: | callback to get thumb in base64 format
|

important you should set height of the ImageCropper parent container

Install

npm install --save arwy-image-cropper-react

Usage

import * as React from 'react'

import { ImageCropper}  from 'arwy-image-cropper-react'

class Example extends React.Component {

  render () {

    let src = "data:image .....
    
    let handleOnChange = (base64Image) => { 
      console.log('base64Image:', base64Image);
    };

    return (
      <ImageCropper onChange={handleOnChange} src={src} thumbSize={{ width: 50, height: 50 }} preview />
    )
  }
}

License

MIT © make4711