Zoomable & Rotatable Image Cropper - Cropme.js

Cropme.js is a customizable, touch-enabled JavaScript image cropper plugin used for cropping an image to fit in a shape (currently supports circle and square).

More features:

• Zoomable with mousewheel or touch events.
• Rotatable with sliders or touch events.
• Get the cropped image in base64 and/or blob.
• Also works as a Vanilla JavaScript plugin.

Basic usage:

1. Installation.

# NPM
$ npm install cropme --save

2. Or download the zip and link to the necessary JavaScript and CSS files.

<link rel="stylesheet" href="/dist/cropme.css">
<script src="/dist/cropme.js"></script>

3. Initialize the cropme plugin on a specific image and done.

<img src="image.jpg" id="example">

$('#example').cropme();

4. Or define the image path in the JavaScript as follows.

<div id="example"></div>

var example = $('#example').cropme();
example.cropme('bind', {
  url: 'image.jpg'
});

5. Possible options to customize the image cropper.

{

  // width/height of the image cropper
  "container": {
    "width": 400,
    "height": 400
  },

  // shape options
  "viewport": {
    "width": 200,
    "height": 200,
    "type": "circle", // or 'square'
    "border": {
      "width": 2,
      "enable": true,
      "color": "#fff"
    }
  },

  // zoom options
  "zoom": {
    "min": .1,
    "max": 3,
    "enable": true,
    "mouseWheel": true,
    "slider": true
  },

  // rotation options
  "rotation": {
    "slider": true,
    "enable": true,
    "position": "left"
  }

  // custom CSS class
  customClass: 'my-custom-class'

  // or 'image'
  transformOrigin: 'viewport'
  
}

6. API methods.

// bind
example.cropme('bind', {
  url: 'image.jpg',
  position: {
    x: 230,
    y: 30
  },
  scale: 1.3,
  angle: 90
});

// rotate
example.cropme('rotate', 90);

// get position info
example.cropme('position');

// destroy
example.cropme('destroy');

// get cropped image
example.cropme('crop', {
  type: 'base64', // or 'blob'
  width: 100,
  scale: 2,
  mimetype: 'image/png',
  quality: .92
});

Changelog:

2020-03-03

• v1.4.3: Fix image attributes removed on init

2019-10-29

• v1.4.1: Fix undefined options when passing no argument

2019-10-28

• v1.4.0: Add mimetype and quality options for base64 output

2019-10-28

• v1.3.6: fix chrome border radius bug

2019-10-24

• v1.3.5: add support for ie11

2019-10-14

• v1.3.4: Fix no slider bug; Fixed promise.

2019-10-07

• v1.3.3: Add blob arguments for mimetype and quality

2019-07-31

• v1.3.2: Bugs fixed

2019-01-10

• v1.3

2019-01-08

• add rotate and scale around viewport center

---

This awesome jQuery plugin is developed by shpontex. For more Advanced Usages, please check the demo page or visit the official website.