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

Picture
Picture

Download Crop

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

Download Crop

Picture
Picture
Picture
Picture

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