Skip to content

fengyuanchen/jquery-cropper

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Bumps [codecov](https://github.com/codecov/codecov-node) from 3.6.5 to 3.7.1.
- [Release notes](https://github.com/codecov/codecov-node/releases)
- [Commits](codecov/codecov-node@v3.6.5...v3.7.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
dc792e8

Git stats

Files

Permalink
Failed to load latest commit information.

jquery-cropper

Build Status Coverage Status Downloads Version

A jQuery plugin wrapper for Cropper.js.

Main

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

Getting started

Installation

npm install jquery-cropper jquery cropperjs

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/cropper.js"></script><!-- Cropper.js is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/jquery-cropper.js"></script>

Usage

Initialize with $.fn.cropper method.

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="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 initialized
var cropper = $image.data('cropper');

Options

See the available options of Cropper.js.

$().cropper(options);

Methods

See the available methods of Cropper.js.

$().cropper('method', argument1, , argument2, ..., argumentN);

Events

See the available events of Cropper.js.

$().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.

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

Browser support

It is the same as the browser support of Cropper.js. As a jQuery plugin, you also need to see the jQuery Browser Support.

Contributing

Please read through our contributing guidelines.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan