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

Download Crop

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

zoom_in zoom_out

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

Replace Image Download Crop

drag_handle crop

zoom_in zoom_out

arrow_back arrow_forward arrow_upward arrow_downward

rotate_left rotate_right

swap_horiz swap_vert

check delete

lock_outline lock_open

refresh file_upload power_settings_new

Get Cropped Canvas 160×90 320×180

close

Cropped

Download

Get Data Set Data Get Container Data Get Image Data Get Canvas Data Set Canvas Data Get Crop Box Data Set Crop Box Data

0,0 50,50

100% 50%

180° 0°

16:9 4:3 2:3 1:1

Get It Re-apply

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!