What's HTMLPLUS?Why HTMLPLUS?UI Components
HTMLPLUS

Cropper

An image cropper is a web & mobile component which enable the user to resize, move, crop
an area of images before they're uploaded to the server.

Usage

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

API

PlusCropper

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
area
Type
numbernumber
Default
0.75
A number between 0 and 1. Define the automatic cropping area size.
Name
aspectRatio
Type
number | stringnumber | string
Default
undefined
Defines the initial aspect ratio of the viewport.
Name
backdrop
Type
booleanboolean
Default
true
Shows the black modal above the image and under the viewport.
Name
background
Type
booleanboolean
Default
undefined
Shows the grid background of the container.
Name
disabled
Type
booleanboolean
Default
undefined
Disables the cropper.
Name
guides
Type
booleanboolean
Default
undefined
Shows the dashed lines above the viewport.
Name
indicator
Type
booleanboolean
Default
undefined
Shows the center indicator above the viewport.
Name
mode
Type
"crop" | "move""crop" | "move"
Default
'move'
Defines the cropping mode of the cropper.
- crop Creates a new viewport and allows you to move and resize it.
- move moves the canvas and viewport.
Name
resizer
Type
"both" | "edge" | "main""both" | "edge" | "main"
Default
'both'
Enables to resize the viewport by dragging (Works when the value of the 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.
Name
resizerShape
Type
"circle" | "line" | "square""circle" | "line" | "square"
Default
'square'
Specifies the shape of the resizer.
Name
responsive
Type
"reset" | boolean"reset" | boolean
Default
'reset'
Re-renders the cropper when resizing the window.
- reset Restores the cropped area after resizing the window.
Name
shape
Type
"circle" | "rectangle" | "square""circle" | "rectangle" | "square"
Default
'rectangle'
Specifies the shape of the viewport.
Name
src
Type
stringstring
Default
undefined
Replace the image's src and rebuild the cropper.
Name
value
Type
CropperValueCropperValue
Default
undefined
The previous cropped data if you had stored, will be passed to value automatically when initialized.
Name
view
Type
"contain" | "cover" | "fit" | "none""contain" | "cover" | "fit" | "none"
Default
'cover'
Define the view mode of the cropper. If you set viewMode to none, the viewport can extend
outside the canvas, while a value of fit, contain or cover will restrict the viewport
to the size of the canvas. A viewMode of contain or cover will additionally restrict the
canvas to the container. Note that if the proportions of the canvas and the container are
the same, there is no difference between contain and cover.
- contain restrict the minimum canvas size to fit within the container. If the
proportions of the canvas and the container differ, the minimum canvas will be
surrounded by extra space in one of the dimensions.
- cover restrict the minimum canvas size to fill fit the container. If the proportions
of the canvas and the container are different, the container will not be able
to fit the whole canvas in one of the dimensions.
- fit restrict the viewport to not exceed the size of the canvas.
- none no restrictions.
Name
zoomRatio
Type
numbernumber
Default
0.1
Defines zoom ratio when zooming the image by wheeling mouse.
Name
zoomable
Type
"touch" | "wheel" | boolean"touch" | "wheel" | boolean
Default
true
Enables to zoom the image.
- 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.
Name
onCrop
This event fires when the canvas or the viewport changed.
Value
void
Name
onReady
This event fires when the target image has been loaded and the cropper instance is ready for operating.
Value
void
Name
onZoom
This event fires when a cropper instance starts to zoom in or zoom out its canvas.
Value
CropperZoomData
Name
--plus-cropper-backdrop-color
Used to adjust the backdrop color.
Name
--plus-cropper-backdrop-opacity
Used to adjust the backdrop opacity.
Name
--plus-cropper-guides-color
Used to adjust the guides color.
Name
--plus-cropper-guides-opacity
Used to adjust the guides opacity.
Name
--plus-cropper-guides-style
Used to adjust the guides style.
Name
--plus-cropper-guides-weight
Used to adjust the guides weight.
Name
--plus-cropper-indicator-color
Used to adjust the indicator color.
Name
--plus-cropper-indicator-opacity
Used to adjust the indicator opacity.
Name
--plus-cropper-indicator-size
Used to adjust the indicator size.
Name
--plus-cropper-indicator-weight
Used to adjust the indicator weight.
Name
--plus-cropper-resizer-color
Used to adjust the resizer color.
Name
--plus-cropper-resizer-offset
Used to adjust the resizer offset.
Name
--plus-cropper-resizer-opacity
Used to adjust the resizer opacity.
Name
--plus-cropper-resizer-size
Used to adjust the resizer size.
Name
--plus-cropper-resizer-weight
Used to adjust the resizer weight.
Name
--plus-cropper-viewport-color
Used to adjust the viewport color.
Name
--plus-cropper-viewport-opacity
Used to adjust the viewport opacity.
Name
--plus-cropper-viewport-style
Used to adjust the viewport style.
Name
--plus-cropper-viewport-weight
Used to adjust the viewport weight.
Name
flipX
Type
Promise<void>Promise<void>
Flip horizontal.
Value
flipX() => Promise<void>
Name
flipY
Type
Promise<void>Promise<void>
Flip vertical.
Value
flipY() => Promise<void>
Name
move
Type
Promise<void>Promise<void>
Move the canvas with relative offsets.
- 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.
Value
move(offsetX?: number, offsetY?: number) => Promise<void>
Name
moveTo
Type
Promise<void>Promise<void>
Move the canvas to an absolute point.
- x The left value of the canvas. Use null to ignore this.
- y The top value of the canvas. Use null to ignore this.
Value
moveTo(x?: number, y?: number) => Promise<void>
Name
reset
Type
Promise<void>Promise<void>
Reset the image and viewport to their initial states.
Value
reset() => Promise<void>
Name
rotate
Type
Promise<void>Promise<void>
Rotate the image with a relative degree.
Value
rotate(degree: number) => Promise<void>
Name
rotateTo
Type
Promise<void>Promise<void>
Rotate the image to an absolute degree.
Value
rotateTo(degree: number) => Promise<void>
Name
toBase64
Type
Promise<string>Promise<string>
Gets base64 from the cropped image.
Value
toBase64() => Promise<string>
Name
toBlob
Type
Promise<Blob>Promise<Blob>
Gets blob value from the cropped image.
Value
toBlob() => Promise<Blob>
Name
toCanvas
Type
Promise<HTMLCanvasElement>Promise<HTMLCanvasElement>
Gets canvas from the cropped image.
Value
toCanvas() => Promise<HTMLCanvasElement>
Name
toURL
Type
Promise<string>Promise<string>
Gets blob url from the cropped image.
Value
toURL() => Promise<string>
Name
zoom
Type
Promise<void>Promise<void>
Zoom the canvas with a relative ratio.
Value
zoom(ratio: number) => Promise<void>
Name
zoomTo
Type
Promise<void>Promise<void>
Zoom the canvas to an absolute ratio.
Value
zoomTo(ratio: number) => Promise<void>

Examples

Below is a collection of simple to complex examples.

Default

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Cropper } from "@htmlplus/react";

const App = () => {
  return <>    
    <Cropper src="/assets/images/panda.jpg"></Cropper>    
  </>;
};

export default App;

area

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Cropper } from "@htmlplus/react";

const App = () => {
  return <>    
    <Cropper area={1} src="/assets/images/panda.jpg"></Cropper>    
  </>;
};

export default App;

Aspect Ratio

PreviewScriptStylesandboxEdit on CodeSandbox
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;

Backdrop

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Cropper } from "@htmlplus/react";

const App = () => {
  return <>    
    <Cropper backdrop={false} src="/assets/images/panda.jpg"></Cropper>    
  </>;
};

export default App;

Background

PreviewScriptStylesandboxEdit on CodeSandbox
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;

Guides

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Cropper } from "@htmlplus/react";

const App = () => {
  return <>    
    <Cropper guides src="/assets/images/panda.jpg"></Cropper>    
  </>;
};

export default App;

Indicator

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Cropper } from "@htmlplus/react";

const App = () => {
  return <>    
    <Cropper indicator src="/assets/images/panda.jpg"></Cropper>    
  </>;
};

export default App;

Mode

PreviewScriptStylesandboxEdit on CodeSandbox
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;
}

Shape

PreviewScriptStylesandboxEdit on CodeSandbox
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%;
}

Styles

PreviewScriptStylesandboxEdit on CodeSandbox
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;
}
Contributors
Prev
Click Outside
Next
Dialog
SELECT YOUR FRAMEWORK
React logo
React
© 2020 HTMLPLUS. Released under MIT License.