Cropme is a customizable and easy to use javascript image cropper plugin.

See the demo

Support:

• Two-dimensional translation
• Scaling
• Free rotation
• Multi-touch support (pinch-zoom, two finger rotation, ...)
• Base64 and blob exportation
• Multiple croppers

dist/
├── cropme.css
├── cropme.min.css   (compressed)
├── cropme.js        (UMD)
└── cropme.min.js    (UMD, compressed)

npm

npm install cropme

Download

Download the project and extract it.
then put the dist/cropme.min.css and the dist/cropme.min.js in you project.

<link rel="stylesheet" href="path-to/cropme.min.css">
<script src="path-to/cropme.min.js"></script>

new Cropme(element, options);

• element (HTMLElement, required): *the cropper wrapping HTML element, can be a <div> or <img> tag.

• options (Object, optional): The configuration options, see Options.

Vanilla javascript

<div id="container"></div>

<script>
  var element = document.getElementById('container');
  var cropme = new Cropme(element);
  cropme.bind({
    url: 'images/naruto.jpg'
  });
</script>

<!-- or use image tag -->
<img src="images/naruto.jpg" id="myImage" />
<script>
  var element = document.getElementById('myImage');
  new Cropme(element);
</script>

JQuery

<div id="container"></div>

<script>
  var example = $('#container').cropme();
  example.cropme('bind', {
    url: 'images/naruto.jpg'
  });
</script>

<!-- or use image tag -->
<img src="images/naruto.jpg" id="myImage" />
<script>
  $('#myImage').cropme();
</script>

• Target: the container of the cropper.
• Key: container
• Parameters:
  • width (int, default: 300): the outer container width
  • height (int, default: 300): the outer container height

container: {
  width: 500,
  height: 400
}

• Target: the part that will be cropped.
• Key: viewport
• Parameters:
  • width (int, default: 100): the viewport width
  • height (int, default: 100): the viewport height
  • border (object): the viewport frame border
    • enable (bool, default: true): toggle the border
    • width (int, default: 2): the border width
    • color (string, unit: hex, rgba, hsl, default: #fff): the border color

viewport: {
  width: 100,
  height: 100,
  border: {
    enable: true,
    width: 2,
    color: '#fff'
  }
}

• Target: the image zoom options
• Key: zoom,
• Parameters:
  • min (number, default: 0.01): minimum zoom
  • max (number, default: 3): maximum zoom
  • enable (bool, default: true): enable or disable the zoom feature
  • mouseWheel (bool, default: true): enable or disable mouse wheel zoom
  • slider (bool, default: false): toggle the slider input

zoom: {
  min: 0.01,
  max: 3,
  enable: true,
  mouseWheel: true,
  slider: false
}

• Target: the image rotation
• Key: rotation
• Parameters:
  • enable (bool, default: true): enable or disable the rotation
  • slider (bool, default: false): toggle the slider input
  • position (string, default: right, available: right, left): the slider input position

rotation: {
  enable: true,
  slider: false,
  position: 'right'
}

• Target: the container class
• Parameter:
  • customClass (string, default: null): the class of the container

{
  customClass: 'my-custom-class'
}

Binds an image and return a promise after the image is loaded.

The bind() method expects an Object containing:

• url (required)
  • type: String
  • description: The url of the image to bind.
• position
  • x: (int,the x translation coordinate).
  • y: (int,the y translation coordinate).
    The image is translated from its origin.
    If not specified, the image is centered horizontaly and verticaly.
  • scale: (float,The scale of the image, 1 is the original image size).
    If not specified, the image will takes the container's height and scale automatically.
  • angle: (int,The rotation of the image by an angle in degree around its origin).

$('#myImage').cropme('bind', {
  url: 'images/naruto.jpg',
  position: {
    x: 230,
    y: -30,
    scale: 1.3,
    angle: 90
  },
});

Rotate the image to the given angle.

• angle
  • description: The angle the image will be rotated to.
    The rotation is not relative to the current image rotation.
  • type: number
  • unit: degree

$('#myImage').cropme('rotate', 90);

Returns a promise with the cropped image.

As a parameter, the crop() function can receive:

1. An Object containing:

• type
  • type: String
  • default: base64
  • possible value: base64, blob
  • description: The image exportation format
• width
  • type: int
  • description: The width of the output images, the height will be
    proportional.
• scale
  • type: number
  • description: The size of the ouput, relative to the original image size.
    If scale has a value, the width get ignored.

2. A String specifying the exportation format (base64 or blob)

Calling crop() without parameters returns a base64 image with the viewport size.

// string
$('#myImage').cropme('crop', 'blob');

// object
$('#myImage').cropme('crop', {
    type: 'base64',
    width: 800
});

// no parameter
$('#myImage').cropme('crop')
    .then(function(output) {
        // here you can use the base64 output
    });

Returns an object specifying the image configuration

$('#myImage').cropme('position');

Output: Object

{
  x: 20,
  y: 40,
  scale: 1.4,
  angle: 45
}

Destroy the cropme instance

$('#myImage').cropme('destroy');

Thank you for your contribution to this project.

Fork the project then

npm install && npm run watch