JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4.4/5 ( 12 votes)
Your Rating:
Cropit - a "customizable crop and zoom" jQuery plugin
What it is
- A jQuery plugin for image cropping and zooming.
- Loads images locally via FileReader, and does cropping using canvas.
- Designed to be extremely customizable via CSS.
- Best for the cases where you want users to upload images of a specific size and ratio.
Source: scottcheng.github.io
1. INCLUDE JS FILES
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="../dist/jquery.cropit.js"></script>
2. HTML
<!-- This wraps the whole cropper --> <div id="image-cropper"> <!-- This is where the preview image is displayed --> <div class="cropit-image-preview"></div> <!-- This range input controls zoom --> <!-- You can add additional elements here, e.g. the image icons --> <input type="range" class="cropit-image-zoom-input" /> <!-- This is where user selects new image --> <input type="file" class="cropit-image-input" /> <!-- The cropit- classes above are needed so cropit can identify these elements --> </div>
3. JAVASCRIPT
$('.image-cropper').cropit();
4. CSS
.cropit-image-preview {
/* You can specify preview size in CSS */
width: 960px;
height: 540px;
}
5. OPTIONS
$imageCropper.cropit(options);
$preview jQuery element
The HTML element that displays image preview.
Default: $imageCropper.find('.cropit-image-preview')
$fileInput jQuery element
File input element.
Default: $imageCropper.find('input.cropit-image-input')
$imageZoomInput jQuery element
Range input element that controls image zoom.
Default: $imageCropper.find('input.cropit-image-zoom-input')
$previewContainer jQuery element
Preview container. Only needed when imageBackground is true.
Default: $imageCropper.find('.cropit-image-preview-container')
width number
Width of image preview in pixels. If set, it will override the CSS property.
Default: null
height number
Height of image preview in pixels. If set, it will override the CSS property.
Default: null
imageBackground boolean
Whether or not to display the background image beyond the preview area.
Default: false
imageBackgroundBorderWidth number
Width of background image border in pixels. If greater than 0, the background image beyond the width will be hidden.
Default: 0
exportZoom number
The ratio between the desired image size to export and the preview size. For example, if the preview size is 300px * 200px, and exportZoom = 2, then the exported image size will be 600px * 400px. This also affects the maximum zoom level, since the exported image cannot be zoomed to larger than its original size.
Default: 1
onFileChange function
Called when user selects a file in the select file input.
onImageLoading function
Called when image starts to be loaded.
onImageLoaded function
Called when image is loaded.
onZoomEnabled function
Called when image the zoom slider is enabled.
onZoomDisabled function
Called when image the zoom slider is disabled.
6. API
// Returns the cropped image in Data URI format.
$imageCropper.cropit('croppedImageData');
// Returns whether the current image is big enough to be zoomable.
// Note that an image cannot be zoomed to larger than its original size.
$imageCropper.cropit('isZoomable');
// Returns the source of current image.
// If the image is loaded through the file input, the image source will be
// in Data URI format.
$imageCropper.cropit('imageSrc');
// Returns the image offset of the current cropping
// E.g. { x: -10, y: -15 }
$imageCropper.cropit('offset');
// Returns the current zoom.
$imageCropper.cropit('zoom');
// Returns the current image size.
// E.g. { width: 1920, height: 1080 }
$imageCropper.cropit('imageSize');
// Returns the current preview area size.
// E.g. { width: 600, height: 400 }
$imageCropper.cropit('previewSize');
// Sets preview area size.
$imageCropper.cropit('previewSize', { width: 800, height: 450 });
