Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 955 Commits
.github		.github
dist		dist
docs		docs
src		src
test		test
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.stylelintrc		.stylelintrc
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
composer.json		composer.json
karma.conf.js		karma.conf.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
rollup.config.js		rollup.config.js

Repository files navigation

Cropper

A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced withCropper.js.

Demo
Cropper.js - JavaScript image cropper (recommended)
jquery-cropper - A jQuery plugin wrapper for Cropper.js (recommended for jQuery users to use this instead of Cropper)

Main

dist/├── cropper.css├── cropper.min.css   (compressed)├── cropper.js        (UMD)├── cropper.min.js    (UMD, compressed)├── cropper.common.js (CommonJS, default)└── cropper.esm.js    (ES Module)

Getting started

Installation

npm install cropper jquery

Include files:

<scriptsrc="/path/to/jquery.js"></script><!-- jQuery is required --><linkhref="/path/to/cropper.css"rel="stylesheet"><scriptsrc="/path/to/cropper.js"></script>

Usage

Initialize with$.fn.cropper method.

<!-- Wrap the image or canvas element with a block element (container) --><div><imgid="image"src="picture.jpg"></div>

/* Limit image width to avoid overflow the container */img {max-width:100%;/* This rule is very important, please do not ignore this! */}

var$image=$('#image');$image.cropper({aspectRatio:16/9,crop:function(event){console.log(event.detail.x);console.log(event.detail.y);console.log(event.detail.width);console.log(event.detail.height);console.log(event.detail.rotate);console.log(event.detail.scaleX);console.log(event.detail.scaleY);}});// Get the Cropper.js instance after initializedvarcropper=$image.data('cropper');

Options

See the availableoptions of Cropper.js.

$('img').cropper(options);

Methods

See the availablemethods of Cropper.js.

$('img').once('ready',function(){$(this).cropper('method',argument1,,argument2, ...,argumentN);});

Events

See the availableevents of Cropper.js.

$('img').on('event',handler);

No conflict

If you have to use other plugin with the same namespace, just call the$.fn.cropper.noConflict method to revert to it.

<scriptsrc="other-plugin.js"></script><scriptsrc="cropper.js"></script><script>$.fn.cropper.noConflict();// Code that uses other plugin's "$('img').cropper" can follow here.</script>