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 |