Cropper
An image cropper/rotator/scaler and many other handy functions.
Usage
Create a container for any controls with a class of .f-cropper-container and a container for the image you would like to crop with the class .f-cropper-image and then on your image add the data attribute data-f-cropper passing any options there.
Example
Markup
<div class="f-cropper-container">
<div class="f-cropper-image">
<img src="..." alt="..." data-f-cropper="{ preview: '.f-cropper-preview' }">
</div>
<div class="f-cropper-preview">
<img src="/images/placeholder_800x400_1.jpg" alt="Picture">
</div>
</div>Output PNG
Example
Markup
<div class="f-cropper-container">
<div class="f-cropper-image">
<img src="..." alt="..." data-f-cropper="{ preview: '.f-cropper-preview', dragMode : 'move' }">
</div>
<div class="f-cropper-preview">
<img src="/images/placeholder_800x400_1.jpg" alt="Picture">
</div>
</div>All Options
Markup
<div class="f-cropper-container">
<div class="f-cropper-image">
<img src="..." alt="..." data-f-cropper="{ aspectRatio: 16 / 9, preview: '.f-cropper-preview' }">
</div>
<div class="f-cropper-preview">
<img src="/images/placeholder_800x400_1.jpg" alt="Picture">
</div>
</div>JavaScript options
Hold your breath: there's a lot of them!
| Option | Possible value | Default | Description |
|---|---|---|---|
viewMode |
0, 1, 2, 3 | 0 | Defines the viewmode of the cropper |
dragMode |
"crop", "move" or "none" | crop | The type of drag event on the cropper |
aspectRatio |
float | NaN | Default aspect for the crop area |
preview |
string | '' | Selector for the preview area |
responsive |
boolean | true | Will resize with the browser |
modal |
boolean | true | Show the dark background outside crop area |
guides |
boolean | true | Show guides inside the crop area |
center |
boolean | true | Show center guide for crop area |
highlight |
boolean | true | Show white background to highlight crop area |
movable |
boolean | true | Allow the image to moved |
rotatable |
boolean | true | Allow the image to be rotated |
scalable |
boolean | true | Allow the image to be scaled |
zoomable |
boolean | true | Allow the image to be zoomed |
zoomOnTouch |
boolean | true | Allow the image to be zoomed by touch |
zoomOnWheel |
boolean | true | Allow the image to be zoomed with the mousewheel |
wheelZoomRatio |
float | 0.1 | The ratio that the mousewheel zooms |
cropBoxMovable |
boolean | true | The crop area can be moved |
cropBoxResizable |
boolean | true | The crop area can be resized |
toggleDragModeOnDblclick |
boolean | true | Toogles drag mode when double-clicked |
mimeType |
string | Override the mime-type of output image | |
minCropBoxWidth |
integer | 0 | Minimum width of crop area |
minCropBoxHeight |
integer | 0 | Minimum height of crop area |
data |
object | null | an object with the previous cropping result data |
restore |
boolean | true | restore the cropped area after resize the window |
checkCrossOrigin |
boolean | true | check if the current image is a cross-origin image |
checkOrientation |
boolean | true | check the current image's Exif Orientation information |
background |
boolean | true | show the grid background |
autoCrop |
boolean | true | enable to crop the image automatically when initialize |
autoCropArea |
float | 0.8 | define the percentage of automatic cropping area when initializes |
minCanvasWidth |
integer | 0 | size limitation |
minCanvasHeight |
integer | 0 | size limitation |
minContainerWidth |
integer | 200 | size limitation |
minContainerHeight |
integer | 100 | size limitation |
build |
function | null | shortcut of event |
built |
function | null | shortcut of event |
cropstart |
function | null | shortcut of event |
cropmove |
function | null | shortcut of event |
cropend |
function | null | shortcut of event |
crop |
function | null | shortcut of event |
zoom |
function | null | shortcut of event |
copyToInput |
string | empty string | option to copy the canvas data to an input with this name |
