React-perspective-cropper

Description

React-perspective-cropper is a React component for cropping images based on OpenCV andperspective transformation.

Installation

npm install react-image-perspective-cropper

Requirements

• OpenCV
• React
• interactjs

Usage

import ReactImagePerspectiveCropper from 'react-image-perspective-cropper';

const Cropper = () => {

    return <PerspectiveCropper 
        src={"teste2.jpg"}
        width={1000} // Optional, if not present will be used the image width (measured in px)
        height={1000}  // Optional, if not present will be used the image width (measured in px)
        paddingX={0} // Optional, if not present will be used 100 (measured in px)
        paddingY={0} // Optional, if not present will be used 100 (measured in px)
        backgroundColor={"#202020"} // Optional, if not present will be used #202020
        draggableDotStyles={undefined} // Optional, if not present will be used the default styles
        draggableDotSize={10} // Optional, if not present will be used 10 (measured in px)
        handleFinishedCrop={(croppedImage) => {
                console.log(croppedImage); // Cropped imageData
        }}
        startPoints={[{x1,y1}, {x2,y2}, {x3,y3}, {x4,y4}]} // Optional, if not present will be used the default styles
        onPointsChange={(points: Point[]) => {console.log(points)}} // Called when the points change
        showGrid={true} // Optional, if not present will be used true
    />

}

export default Cropper;