Follow the tutorials here to use the HTMLPLUS
library on React-based
projects.
Select your desired component from below and see the available properties, slots, events, styles and methods.
crop
Creates a new viewport and allows you to move and resize it.move
moves the canvas and viewport.mode
property is crop
).main
Enables to resize the viewport by dragging on the Sides.edge
Enables to resize the viewport by dragging on the vertices.both
Enables to resize the viewport by dragging on the Sides and vertices.reset
Restores the cropped area after resizing the window.none
, the viewport can extendfit
, contain
or cover
will restrict the viewportcontain
or cover
will additionally restrict thecontain
and cover
.contain
restrict the minimum canvas size to fit within the container. If thecover
restrict the minimum canvas size to fill fit the container. If the proportionsfit
restrict the viewport to not exceed the size of the canvas.none
no restrictions.false
Unable to zoom the image.true
Enables to zoom the image by touching and wheeling mouse.touch
Enables to zoom the image by touching.wheel
Enables to zoom the image by wheeling mouse.void
void
CropperZoomData
flipX() => Promise<void>
flipY() => Promise<void>
offsetX
Moving size (px) in the horizontal
direction. Use null
to ignore this.offsetY
Moving size (px) in the vertical
direction. Use null
to ignore this.move(offsetX?: number, offsetY?: number) => Promise<void>
x
The left
value of the canvas. Use null
to ignore this.y
The top
value of the canvas. Use null
to ignore this.moveTo(x?: number, y?: number) => Promise<void>
reset() => Promise<void>
rotate(degree: number) => Promise<void>
rotateTo(degree: number) => Promise<void>
base64
from the cropped image.toBase64() => Promise<string>
blob
value from the cropped image.toBlob() => Promise<Blob>
canvas
from the cropped image.toCanvas() => Promise<HTMLCanvasElement>
blob url
from the cropped image.toURL() => Promise<string>
zoom(ratio: number) => Promise<void>
zoomTo(ratio: number) => Promise<void>
Below is a collection of simple to complex examples.
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper area={1} src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper aspectRatio="3/4" src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper backdrop={false} src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper background view="none" src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper guides src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Cropper indicator src="/assets/images/panda.jpg"></Cropper>
</>;
};
export default App;
import React from "react";
import { Grid, Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Grid gutter="md">
<Grid.Item xs="12" sm="6">
<Cropper mode="move" src="/assets/images/panda.jpg" view="none"></Cropper>
</Grid.Item>
<Grid.Item xs="12" sm="6">
<Cropper mode="crop" src="/assets/images/panda.jpg"></Cropper>
</Grid.Item>
</Grid>
</>;
};
export default App;
plus-cropper {
height: 18rem;
}
import React from "react";
import { Grid, Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Grid gutter="md">
<Grid.Item xs="6">
<Cropper shape="rectangle" aspectRatio="2" src="/assets/images/panda.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="6">
<Grid gutter="md">
<Grid.Item xs="12">
<Cropper shape="square" src="/assets/images/panda.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="12">
<Cropper shape="circle" src="/assets/images/panda.jpg"></Cropper>
</Grid.Item>
</Grid>
</Grid.Item>
</Grid>
</>;
};
export default App;
plus-cropper[shape="rectangle"] {
height: 100%;
}
import React from "react";
import { Grid, Cropper } from "@htmlplus/react";
const App = () => {
return <>
<Grid gutter="md">
<Grid.Item xs="12" sm="5">
<Cropper className="style-1" indicator mode="crop" shape="circle" resizer="main" resizerShape="line" src="/assets/images/penguin.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="12" sm="7">
<Cropper className="style-2" indicator mode="crop" resizer="both" resizerShape="line" src="/assets/images/penguin.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="12" sm="6">
<Cropper className="style-3" guides indicator mode="crop" resizer="main" resizerShape="circle" shape="circle" src="/assets/images/cat.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="12" sm="6">
<Cropper className="style-4" guides mode="crop" resizer="edge" resizerShape="line" src="/assets/images/cat.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="12" sm="7">
<Cropper className="style-5" backdrop background mode="crop" resizer="edge" resizerShape="line" src="/assets/images/ladybug.jpg"></Cropper>
</Grid.Item>
<Grid.Item xs="12" sm="5">
<Cropper className="style-6" src="/assets/images/bear.jpg"></Cropper>
</Grid.Item>
</Grid>
</>;
};
export default App;
plus-cropper {
height: 250px;
}
plus-cropper.style-1 {
--plus-cropper-resizer-size: 20px;
--plus-cropper-viewport-opacity: 0;
--plus-cropper-viewport-style: dashed;
}
plus-cropper.style-2 {
--plus-cropper-indicator-color: #E6F018;
--plus-cropper-indicator-size: 15px;
--plus-cropper-indicator-weight: 2px;
--plus-cropper-resizer-color: black;
--plus-cropper-resizer-offset: -27px;
--plus-cropper-resizer-size: 21px;
--plus-cropper-viewport-color: #E6F018;
}
plus-cropper.style-3 {
--plus-cropper-indicator-color: #5499C7;
--plus-cropper-guides-color: black;
--plus-cropper-resizer-color: #5499C7;
--plus-cropper-resizer-size: 15px;
--plus-cropper-viewport-color: #5499C7;
--plus-cropper-viewport-weight: 2px;
}
plus-cropper.style-4 {
--plus-cropper-guides-weight: 2px;
--plus-cropper-resizer-size: 22px;
--plus-cropper-resizer-weight: 2px;
--plus-cropper-viewport-style: dashed;
--plus-cropper-viewport-weight: 2px;
}
plus-cropper.style-5 {
--plus-cropper-backdrop-color: white;
--plus-cropper-backdrop-opacity: 0.7;
--plus-cropper-resizer-color: #A93226;
--plus-cropper-resizer-size: 20px;
--plus-cropper-resizer-weight: 3px;
}
plus-cropper.style-6 {
--plus-cropper-viewport-opacity: 0;
--plus-cropper-viewport-style: dashed;
}