[Live Preview] How to Create a jQuery Image Cropping Plugin | Cropper.js

Cropper.js is an easy-to-use JavaScript/jQuery plugin to crop images with support for live previews and custom aspect ratio. A plugin displays a resizable mesh layer on a specific image allowing for visual resizing and cropping of the image.

jquery image cropping and resizing, jquery crop image before upload, jquery image cropper with upload, crop image using jquery, jquery crop and resize image before upload

More options:

  • Fully responsive and mobile-friendly.
  • Get/set information.
  • Allows to move/zoom/rotate/scale pictures.

How to make use of it:

Installation:

# NPM
$ npm install cropperjs --save

1. Include the Cropper.js plugin’s information within the web page.

<link rel="stylesheet" href="/path/to/dist/cropper.min.css" />
<script src="/path/to/dist/cropper.min.js"></script>

2. Or import Cropper.js as an ES module.

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

3. To use it as a jQuery plugin, download the jQuery Wrapper after which include the following JavaScript information on the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/cropper.min.js"></script> 
<script src="/path/to/dist/jquery-cropper.min.js"></script>

4. Insert an image or canvas component into a container component.

<div>
  // Add Image Here
</div>

5. Make the image full width relative to its parent container.

img {
  max-width: 100%;
}

6. Attach the Cropper.js to the image and accomplished it.

// As a Vanilla JS plugin
const cropper = new Cropper(document.getElementById('image'), {
      // options here
});

// As a jQuery plugin
$('#image').Cropper({
  // options here
});

7. Available Options with default values.

// Define the view mode of the cropper
viewMode: 0,

// 0, 1, 2, 3
// Define the dragging mode of the cropper
dragMode: DRAG_MODE_CROP,

// 'crop', 'move' or 'none'
// Define the initial aspect ratio of the crop box
initialAspectRatio: NaN,

// Define the aspect ratio of the crop box
aspectRatio: NaN,

// An object with the previous cropping result data
data: null,

// A selector for adding extra containers to preview
preview: '',

// Re-render the cropper when resize the window
responsive: true,

// Restore the cropped area after resize the window
restore: true,

// Check if the current image is a cross-origin image
checkCrossOrigin: true,

// Check the current image's Exif Orientation information
checkOrientation: true,

// Show the black modal
modal: true,

// Show the dashed lines for guiding
guides: true,

// Show the center indicator for guiding
center: true,

// Show the white modal to highlight the crop box
highlight: true,

// Show the grid background
background: true,

// Enable to crop the image automatically when initialize
autoCrop: true,

// Define the percentage of automatic cropping area when initializes
autoCropArea: 0.8,

// Enable to move the image
movable: true,

// Enable to rotate the image
rotatable: true,

// Enable to scale the image
scalable: true,

// Enable to zoom the image
zoomable: true,

// Enable to zoom the image by dragging touch
zoomOnTouch: true,

// Enable to zoom the image by wheeling mouse
zoomOnWheel: true,

// Define zoom ratio when zoom the image by wheeling mouse
wheel<a href="#!">Zoom</a>Ratio: 0.1,

// Enable to move the crop box
cropBoxMovable: true,

// Enable to resize the crop box
cropBoxResizable: true,

// Toggle drag mode between "crop" and "move" when click twice on the cropper
toggleDragModeOnDblclick: true,

// Size limitation
minCanvasWidth: 0,
minCanvasHeight: 0,
minCropBoxWidth: 0,
minCropBoxHeight: 0,
minContainerWidth: 200,
minContainerHeight: 100,

// Shortcuts of events
ready: null,
cropstart: null,
cropmove: null,
cropend: null,
crop: null,
zoom: null

8. Events listeners.

// Vanilla JavaScript
image.addEventListener(Event, function () {});

// jQuery
image.on(Event, function () {});

image.addEventListener('ready', function () {
  // do something
});

image.addEventListener('cropstart', function (event) {
  /* event.detail.originalEvent: mousedown, touchstart and pointerdown
     event.detail.action:
       'crop': create a new crop box
       'move': move the canvas (image wrapper)
       'zoom': zoom in / out the canvas (image wrapper) by touch.
       'e': resize the east side of the crop box
       'w': resize the west side of the crop box
       's': resize the south side of the crop box
       'n': resize the north side of the crop box
       'se': resize the southeast side of the crop box
       'sw': resize the southwest side of the crop box
       'ne': resize the northeast side of the crop box
       'nw': resize the northwest side of the crop box
       'all': move the crop box (all directions)
  */
});

image.addEventListener('cropmove', function (event) {
  // event.detail.originalEvent: mousemove, touchmove and pointermove
});

image.addEventListener('cropend', function (event) {
  // event.detail.originalEvent: mouseup, touchend, touchcancel, pointerup and pointercancel
});

image.addEventListener('crop', function (event) {
  /* event.detail.x
     event.detail.y
     event.detail.width
     event.detail.height
     event.detail.rotate
     event.detail.scaleX
     event.detail.scaleY
  */
});

image.addEventListener('zoom', function (event) {
  /* event.detail.originalEvent: wheel, touchmove
     event.detail.oldRatio
     event.detail.ratio
  */
});

9. API Methods.

// Show the crop box.
new Cropper(image, {
    // options here
});

// Zoom the image.
cropper.zoom(0.1);

// Zoom the canvas (image wrapper) to an absolute ratio.
cropper.zoomTo(1,{x: Number, y: Number});

// Rotate the image.
cropper.rotate(-90);

// Rotate the image to an absolute degree.
cropper.rotateTo(90);

// Scale the image.
// scale(scaleX[, scaleY])
cropper.scale(1, -1);
cropper.scaleX(1);
cropper.scaleY(1);

// Enable (unfreeze) the cropper.
cropper.enable();

// Disable (freeze) the cropper.
cropper.disable();

// Reset the cropping zone.
// Add a true param to reset the cropping zone to the default state.
cropper.reset();

// Clear the cropping zone.
cropper.clear();

// Move the canvas (image wrapper) with relative offsets.
// move(offsetX[, offsetY])
cropper.move(0, -1);

// Move the canvas (image wrapper) to an absolute point.
// moveTo(x[, y])
croppermoveTo(value1, value2);

// Replace the image.
// replace(url[, hasSameSize])
cropper.replace(example.jpg, true);

// Get the cropped zone data.
// getData([rounded])
// rounded: OPTIONAL Set true to get rounded values.
// returns:
// x: the offset left of the cropped area
// y: the offset top of the cropped area
// width: the width of the cropped area
// height: the height of the cropped area
// rotate: the rotated degrees of the image
// scaleX: the scaling factor to apply on the abscissa of the image
// scaleY: the scaling factor to apply on the ordinate of the image
cropper.getData([rounded]);

// Reset the cropped zone with new data.
cropper.setData({width: 480, height: 270});

// Get the container size data.
// Returns:
// width: the current width of the container
// height: the current height of the container
cropper.getContainerData();

// Get an object containing image data, contains:
// Returns:
// left: the offset left of the image
// top: the offset top of the image
// width: the width of the image
// height: the height of the image
// naturalWidth: the natural width of the image
// naturalHeight: the natural height of the image
// aspectRatio: the aspect ratio of the image
// rotate: the rotated degrees of the image if rotated
// scaleX: the scaling factor to apply on the abscissa of the image if scaled
// scaleY: the scaling factor to apply on the ordinate of the image if scaled
cropper.getImageData();

// Output the canvas (image wrapper) position and size data.
// Returns:
// left: the offset left of the canvas
// top: the offset top of the canvas
// width: the width of the canvas
// height: the height of the canvas
// naturalWidth: the natural width of the canvas (read only)
// naturalHeight: the natural height of the canvas (read only)
cropper.getCanvasData();

// Change the canvas (image wrapper) position and size with new data.
// Props:
// left: the new offset left of the canvas
// top: the new offset top of the canvas
// width: the new width of the canvas
// height: the new height of the canvas
cropper.setCanvasData(data);

// Output the crop box position and size data.
// Returns:
// left: the offset left of the crop box
// top: the offset top of the crop box
// width: the width of the crop box
// height: the height of the crop box
cropper.getCropBoxData();

// Change the crop box position and size with new data.
cropper.setCropBoxData(data);

// Enable to reset the aspect ratio after initialized.
// "auto" or a positive number ("auto" for free ratio).
cropper.setAspectRatio(1.618);

// Get a canvas drawn the cropped image. 
// If it is not cropped, then returns a canvas drawn the whole image.
cropper.getCroppedCanvas({
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

// Change the drag mode.
// "crop", "move" and "none".
cropper.setDragMode("crop");

// Destroy the Cropper and remove the instance form the target image.
cropper.destroy();

Feature Rich Image Cropping Plugin, jquery cropper GitHub, crop image using coordinates javascript, crop image jquery


See Demo And Download

Official Website(fengyuanchen): Click Here

This superior jQuery/javascript plugin is developed by fengyuanchen. For extra Advanced Usage, please go to the official website.

Share