Cropper JS
Cropper js is a react plugin which is image cropper.
Basic example
Advanced JavaScript image cropper.
Xpx
Ypx
Widthpx
Heightpx
Rotatedeg
ScaleX
ScaleY
import React, { useState } from 'react';
import { Button, ButtonGroup, Col, Form, InputGroup, Row } from 'react-bootstrap';
import Cropper from "react-cropper";
//Css
import "cropperjs/dist/cropper.css";
//Image
import CropperImg from '../../../Assets/dist/img/cropper.jpg';
const CropperJsBasicExample = () => {
//default image
const [image, setImage] = useState(CropperImg);
//Options
const [cropper, setCropper] = useState();
const [rotateHorizontal, setrotateHorizontal] = useState(-1);
const [rotateVertical, setRotateVertical] = useState(-1);
const [showData, setShowData] = useState("");
const [viewMode, setViewMode] = useState(1);
//data
const [dataX, setDataX] = useState(" ");
const [dataY, setDataY] = useState(" ");
const [dataHeight, setDataHeight] = useState(" ");
const [dataWidth, setDataWidth] = useState(" ");
const [dataRotate, setDataRotate] = useState(" ");
const [dataScaleX, setDataScaleX] = useState(" ");
const [dataScaleY, setDataScaleY] = useState(" ");
const OnCrop = (e) => {
setDataX(Math.round(e.detail.x));
setDataY(Math.round(e.detail.y));
setDataHeight(Math.round(e.detail.height));
setDataWidth(Math.round(e.detail.width));
setDataRotate(Math.round(e.detail.rotate));
setDataScaleX(Math.round(e.detail.scaleX));
setDataScaleY(Math.round(e.detail.scaleY))
}
//Function for select another image
const onImgageChange = (e) => {
e.preventDefault();
const files = e.target.files;
const reader = new FileReader();
reader.onload = () => {
setImage(reader.result);
}
reader.readAsDataURL(files[0]);
}
//Flip image horizontal
const onFlipH = () => {
if (rotateHorizontal === -1) {
setrotateHorizontal(1)
}
else if (rotateHorizontal === 1) {
setrotateHorizontal(-1)
}
cropper.scale(rotateHorizontal, 1)
}
//Flip image vertical
const onFlipV = () => {
if (rotateVertical === -1) {
setRotateVertical(1)
}
else if (rotateVertical === 1) {
setRotateVertical(-1)
}
cropper.scale(1, rotateVertical)
}
//Get Data
const onGetData = () => {
const data = cropper.getData();
setShowData(data);
}
//Get Container Data
const getContainerData = () => {
const containerData = cropper.getContainerData();
setShowData(containerData);
}
//Get Image Data
const getImageData = () => {
const imgData = cropper.getImageData();
setShowData(imgData);
}
//Get Canvas Data
const getCanvasData = () => {
const canvasData = cropper.getCanvasData();
setShowData(canvasData);
}
//Get CropboxData
const getCropBoxData = () => {
const cropBoxData = cropper.getCropBoxData();
setShowData(cropBoxData);
}
return (
<>
<Row>
<Col md={8}>
<div className="img-container">
<Cropper
zoomTo={0.5}
initialAspectRatio={16 / 9}
preview=".img-preview"
src={image}
viewMode={viewMode}
crop={OnCrop}
minCropBoxHeight={10}
minCropBoxWidth={10}
background={true}
responsive={true}
checkOrientation={false}
onInitialized={(instance) => {
setCropper(instance);
}}
guides={true}
/>
</div>
</Col>
<Col md={4}>
<div className="docs-preview clearfix">
<div className="img-preview preview-lg" />
<div className="img-preview preview-md" />
<div className="img-preview preview-sm" />
<div className="img-preview preview-xs" />
</div>
<div className="docs-data">
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>X</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataX}
readOnly
/>
<span className="input-group-append">
<InputGroup.Text>px</InputGroup.Text>
</span>
</InputGroup>
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>Y</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataY}
readOnly
/>
<span className="input-group-append">
<InputGroup.Text>px</InputGroup.Text>
</span>
</InputGroup>
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>Width</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataWidth}
readOnly
/>
<span className="input-group-append">
<InputGroup.Text>px</InputGroup.Text>
</span>
</InputGroup>
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>Height</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataHeight}
readOnly
/>
<span className="input-group-append">
<InputGroup.Text>px</InputGroup.Text>
</span>
</InputGroup>
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>Rotate</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataRotate}
readOnly
/>
<span className="input-group-append">
<InputGroup.Text>deg</InputGroup.Text>
</span>
</InputGroup>
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>ScaleX</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataScaleX}
readOnly
/>
</InputGroup>
<InputGroup size="sm">
<span className="input-group-prepend">
<InputGroup.Text>ScaleY</InputGroup.Text>
</span>
<Form.Control
type="text"
id="dataX"
value={dataScaleY}
readOnly
/>
</InputGroup>
</div>
</Col>
</Row>
<Row id="actions" className="mt-4" >
<Col md={8} className="docs-buttons">
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="setDragMode" data-option="move" title="Move" onClick={() => cropper.setDragMode('move')}>
<span title="cropper.setDragMode(“move“)">
<span className="fa fa-arrows" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="setDragMode" data-option="crop" title="Crop" onClick={() => cropper.setDragMode('crop')}>
<span title="cropper.setDragMode(“crop“)">
<span className="fa fa-crop" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="zoom" data-option="0.1" title="Zoom In" onClick={() => cropper.zoom(0.1)} >
<span title="cropper.zoom(0.1)">
<span className="fa fa-search-plus" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="zoom" data-option="-0.1" title="Zoom Out" onClick={() => cropper.zoom(-0.1)}>
<span title="cropper.zoom(-0.1)">
<span className="fa fa-search-minus" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="move" data-option={-10} data-second-option={0} title="Move Left" onClick={() => cropper.move(-1, 0)}>
<span title="cropper.move(-10, 0)">
<span className="fa fa-arrow-left" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="move" data-option={10} data-second-option={0} title="Move Right" onClick={() => cropper.move(1, 0)} >
<span title="cropper.move(10, 0)">
<span className="fa fa-arrow-right" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="move" data-option={0} data-second-option={-10} title="Move Up" onClick={() => cropper.move(0, -1)}>
<span title="cropper.move(0, -10)">
<span className="fa fa-arrow-up" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="move" data-option={0} data-second-option={10} title="Move Down" onClick={() => cropper.move(0, 1)}>
<span title="cropper.move(0, 10)">
<span className="fa fa-arrow-down" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="rotate" data-option={-45} title="Rotate Left" onClick={() => cropper.rotate(-45)} >
<span title="cropper.rotate(-45)">
<span className="fa fa-rotate-left" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="rotate" data-option={45} title="Rotate Right" onClick={() => cropper.rotate(45)}>
<span title="cropper.rotate(45)">
<span className="fa fa-rotate-right" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="scaleX" data-option={-1} title="Flip Horizontal" onClick={onFlipH} >
<span title="cropper.scaleX(-1)">
<span className="fa fa-arrows-h" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="scaleY" data-option={-1} title="Flip Vertical" onClick={onFlipV}>
<span title="cropper.scaleY(-1)">
<span className="fa fa-arrows-v" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="crop" title="Crop" onClick={() => cropper.crop()} >
<span title="cropper.crop()">
<span className="fa fa-check" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="clear" title="Clear" onClick={() => cropper.clear()} >
<span title="cropper.clear()">
<span className="fa fa-remove" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="disable" title="Disable" onClick={() => cropper.disable()}>
<span title="cropper.disable()">
<span className="fa fa-lock" />
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" data-method="enable" title="Enable" onClick={() => cropper.enable()}>
<span title="cropper.enable()">
<span className="fa fa-unlock" />
</span>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button data-toggle="tooltip" data-placement="top" data-method="reset" title="Reset" onClick={() => cropper.reset()}>
<span title="cropper.reset()">
<span className="fa fa-refresh" />
</span>
</Button>
<label className="btn btn-primary btn-upload mb-0" data-toggle="tooltip" data-placement="top" htmlFor="inputImage" title="Upload image file">
<input type="file" className="sr-only" id="inputImage" name="file" accept="image/*" onChange={onImgageChange} />
<span title="Import image with Blob URLs">
<span className="fa fa-upload" />
</span>
</label>
<Button data-toggle="tooltip" data-placement="top" data-method="destroy" title="Destroy" onClick={() => cropper.destroy()}>
<span title="cropper.destroy()">
<span className="fa fa-power-off" />
</span>
</Button>
</ButtonGroup>
<div className="btn-group btn-group-crop">
<Button data-toggle="tooltip" data-placement="top" title="getCroppedCanvas" data-method="getCroppedCanvas" onClick={() => cropper.getCroppedCanvas()}>
<span title="cropper.getCroppedCanvas()">
Get Cropped Canvas
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getCroppedCanvas({ width: 160, height: 90 })" data-method="getCroppedCanvas" data-option="{ “width“: 160, “height“: 90 }" onClick={() => cropper.getCroppedCanvas({ width: 160, height: 90 })} >
<span title="cropper.getCroppedCanvas({ width: 160, height: 90 })">
160×90
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getCroppedCanvas({ width: 320, height: 180 })" data-method="getCroppedCanvas" data-option="{ “width“: 320, “height“: 180 }" onClick={() => cropper.getCroppedCanvas({ width: 320, height: 180 })}>
<span title="cropper.getCroppedCanvas({ width: 320, height: 180 })">
320×180
</span>
</Button>
</div>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getData()" data-method="getData" data-option data-target="#putData" onClick={onGetData} >
<span title="cropper.getData()">
Get Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.setData(data)" data-method="setData" data-target="#putData" onClick={() => cropper.setData(showData)}>
<span title="cropper.setData(data)">
Set Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getContainerData()" data-method="getContainerData" data-option data-target="#putData" onClick={getContainerData} >
<span title="cropper.getContainerData()">
Get Container Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getImageData()" data-method="getImageData" data-option data-target="#putData" onClick={getImageData} >
<span title="cropper.getImageData()">
Get Image Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getCanvasData()" data-method="getCanvasData" data-option data-target="#putData" onClick={getCanvasData}>
<span title="cropper.getCanvasData()">
Get Canvas Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.setCanvasData(data)" data-method="setCanvasData" data-target="#putData" onClick={() => cropper.setCanvasData(showData)} >
<span title="cropper.setCanvasData(data)">
Set Canvas Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.getCropBoxData()" data-method="getCropBoxData" data-option data-target="#putData" onClick={getCropBoxData} >
<span title="cropper.getCropBoxData()">
Get Crop Box Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.setCropBoxData(data)" data-method="setCropBoxData" data-target="#putData" onClick={() => cropper.setCropBoxData(showData)} >
<span title="cropper.setCropBoxData(data)">
Set Crop Box Data
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.moveTo(0)" data-method="moveTo" data-option={0} onClick={() => cropper.moveTo(0)} >
<span title="cropper.moveTo(0)">
0,0
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.zoomTo(1)" data-method="zoomTo" data-option={1} onClick={() => cropper.zoomTo(1)} >
<span title="cropper.zoomTo(1)">
100%
</span>
</Button>
<Button data-toggle="tooltip" data-placement="top" title="cropper.rotateTo(180)" data-method="rotateTo" data-option={180} onClick={() => cropper.rotateTo(180)}>
<span title="cropper.rotateTo(180)">
180°
</span>
</Button>
<input type="text" className="form-control mt-10" id="putData" placeholder="Get data to here or set data with this value" value={JSON.stringify(showData)} readOnly />
</Col>
<Col md={4} className="docs-toggles">
<ButtonGroup className="docs-aspect-ratios" data-toggle="buttons">
<Button variant="primary" defaultValue="1.7777777777777777" onClick={() => cropper.setAspectRatio(16 / 9)}>16:9</Button>
<Button variant="primary" defaultValue="1.3333333333333333" onClick={() => cropper.setAspectRatio(4 / 3)}> 4:3</Button>
<Button variant="primary" defaultValue={1} onClick={() => cropper.setAspectRatio(1 / 1)}> 1:1</Button>
<Button variant="primary" defaultValue="0.6666666666666666" onClick={() => cropper.setAspectRatio(2 / 3)}>2:3</Button>
<Button variant="primary" defaultValue="NaN" onClick={() => cropper.setAspectRatio(NaN)}>Free</Button>
</ButtonGroup>
<ButtonGroup className="docs-view-modes" data-toggle="buttons">
<Button variant="primary" id="viewMode0" name="viewMode" defaultValue={0} defaultChecked onClick={() => setViewMode(0)}>VM0</Button>
<Button variant="primary" id="viewMode1" name="viewMode" defaultValue={1} onClick={() => setViewMode(1)}>VM1</Button>
<Button variant="primary" id="viewMode2" name="viewMode" defaultValue={2} onClick={() => setViewMode(2)}>VM2</Button>
<Button variant="primary" id="viewMode3" name="viewMode" defaultValue={3} onClick={() => setViewMode(3)}>VM3</Button>
</ButtonGroup>
</Col>
</Row>
</>
);
}
export default CropperJsBasicExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.