peterver/vanilla-image-cropper

A lightweight configurable imagecropper with no dependencies written in javascript, capable of cropping an image locally.

Installation

npm

npm install vanilla-image-cropper

bower

bower install vanilla-image-cropper

Examples

A vanilla image cropper instance will maintain the original aspect ratio of the provided image and adjust its own dimensions accordingly. This allows for the prevention of 'black bands' and provides a clean and slick interface.

new ImageCropper('.example-1', "./example1.jpg", {
    ...
});

Based on the options that you provide the vanilla image cropper will adjust itself, this way you can show the same image in a variety of dimensions.

new ImageCropper('.example-size-100', "./example1.jpg", {
	...
	max_width : 100,
	max_height : 100,
	...
});

Modes are a way of setting the way the preview area is built and rendered, currently two modes are possible :

  • square A square preview
  • circular The preview area will be rendered in a circular form

new ImageCropper('.example-mode-circular', "./example1.jpg", {
	...
	mode : 'circular'
	...
});

By passing the fixed_size property, the aspect ratio of the crop area will remain the same when resizing the preview area of te cropper

new ImageCropper('.example-fixed-off', "./example1.jpg", {
	...
	fixed_size : true
	...
});