Very Cool jQuery image cropping plugin

Home Image EffectsVery Cool jQuery image cropping plugin

Very Cool jQuery image cropping plugin

4 years ago Views

11576

2094

fengyuanchen

This is A simple jQuery image cropping plugin.

Main

dist/
├── cropper.css     ( 5 KB)
├── cropper.min.css ( 4 KB)
├── cropper.js      (67 KB)
└── cropper.min.js  (24 KB)

How to use it:

Include files:

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

CDNJS

The CDNJS provides CDN support for Cropper's CSS and JavaScript. You can find the links here.

RawGit

<link  href="https://cdn.rawgit.com/fengyuanchen/cropper/v1.0.0/dist/cropper.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/fengyuanchen/cropper/v1.0.0/dist/cropper.min.js"></script>

Usage

Initialize with $.fn.cropper method.

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

$('.container > img').cropper({
  aspectRatio: 16 / 9,
  crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

Tag: image gallery