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