Cacher is the code snippet organizer for pro developers

// https://github.com/fengyuanchen/cropperjs

// npm install cropperjs

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


/*

Initialize with Cropper constructor:

Browser: window.Cropper
CommonJS: var Cropper = require('cropperjs')
ES2015: import Cropper from 'cropperjs'

*/

/*
//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%; 
}
*/


var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop: function(e) {
    console.log(e.detail.x);
    console.log(e.detail.y);
    console.log(e.detail.width);
    console.log(e.detail.height);
    console.log(e.detail.rotate);
    console.log(e.detail.scaleX);
    console.log(e.detail.scaleY);
  }
});


//The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a visible block element.

//If you are using cropper in a modal, you should initialize the cropper after the modal shown completely. 


//Known image size increase: When export the cropped image on browser-side with the HTMLCanvasElement.toDataURL method, the size of the exported image may be greater than the original image's. This is because the type of the exported image is not the same as the original image's. So just pass the type the original image's as the first parameter to toDataURL to fix this. For example, if the original type is JPEG, then use cropper.getCroppedCanvas().toDataURL('image/jpeg') to export image.


Options

// You may set cropper options with new Cropper(image, options). 
// If you want to change the global default options, You may use Cropper.setDefaults(options).



Methods

// As there is an asynchronous process when load the image, 
// you should call most of the methods after ready, except "setAspectRatio", "replace" and "destroy".

//If a method doesn't need to return any value, it will return the cropper instance (this) for chain composition.

new Cropper(image, {
  ready: function () {
    // this.cropper[method](argument1, , argument2, ..., argumentN);
    this.cropper.move(1, -1);
    // Allows chain composition
    this.cropper.move(1, -1).rotate(45).scale(1, -1);
  }
});


crop() //Show the crop box manually.

new Cropper(image, {
  autoCrop: false,
  ready: function () {
    // Do something here
    // ...

    // And then
    this.cropper.crop();
  }
});

reset() // Reset the image and crop box to their initial states.
clear() // Clear the crop box.

//(...) Acabar de leer

getCroppedCanvas([options])

width / height / minWidth / minHeight: the destination dimensions of the output canvas
fillColor: (transparent) fill any alpha values 
imageSmoothingEnabled: (true) if images are smoothed //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
imageSmoothingQuality: "low" (default), "medium", or "high". //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality

Returns an HTMLCanvasElement (a canvas drawn the cropped image).


The aspect ratio of the output canvas will be fitted to aspect ratio of the crop box automatically.
*If you intend to get a JPEG image from the output canvas, you should set the fillColor option first, if not, the transparent part in the JPEG image will become black by default.



After then, you can display the canvas as an image directly, or use HTMLCanvasElement.toDataURL (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) to get a Data URL, or use HTMLCanvasElement.toBlob (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) to get a blob and upload it to server with FormData (https://developer.mozilla.org/en-US/docs/Web/API/FormData) if the browser supports these APIs.

Avoid to get a blank output image, you might need to set the maxWidth and maxHeight properties to limited numbers, because of the size limits of a canvas element.


// example1

cropper.getCroppedCanvas({
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

// example: Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
cropper.getCroppedCanvas().toBlob(function (blob) {
  var formData = new FormData();

  formData.append('croppedImage', blob);

  // Use `jQuery.ajax` method
  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});