Arkadiy's Cropper POC

Proof of concept on how to use Cropper.js by Arkadiy Shevrikuko

by Vasil Svetoslavov

HTML

<div id="loading" class="loading_inactive"></div>
<div id = "elemDiv">
  <img id = "elemDiv:elem" src=""/>
</div>
<button onclick = "cropImage()">crop</button>
<button onclick = "cropPreview()">preview</button>
<button onclick = "cropCancel()">cancel</button>
<button onclick = "changeImageSrc(0)">image 1</button>
<button onclick = "changeImageSrc(1)">image 2</button>
<button onclick = "changeImageSrc(2)">image 3</button>

<div id="modalPreview" class="hide_modal">
  <div id="canvasContainer"></div>
  <button onclick="hidePreviewModal()">OK</button>
</div>

CSS

.loading_inactive, .hide_modal {
  display: none;
  z-index: -1;
}
#elemDiv {
  max-width: 50%;
}
.loading_active, .show_modal {
  display: block;
  position: fixed;
}
.loading_active {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-color: black;
  z-index: 10;
}
.show_modal {
  top: 25%;
  left: 25%;
  background-color: white;
  z-index: 11;
}
#modalPreview {
  padding: 20px 20px 20px 20px;
}





/*!
 * Cropper.js v1.0.0-beta.1
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2017 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2017-01-21T12:28:26.786Z
 */

.cropper-container {
  font-size: 0;
  line-height: 0;

  position: relative;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  direction: ltr;
  -ms-touch-action: none;
      touch-action: none
}

.cropper-container img {
  /* Avoid margin top issue (Occur only when margin-top <= -height) */
  display: block;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
}

.cropper-modal {
  opacity: .5;
  background-color: #000;
}

.cropper-view-box {
  display: block;
  overflow: hidden;

  width: 100%;
  height: 100%;

  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
  position: absolute;

  display: block;

  opacity: .5;
  border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
  top: 33.33333%;
  left: 0;
  width: 100%;
  height: 33.33333%;
  border-top-width: 1px;
  border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333%;
  width:...

JavaScript

var imageSrources = [
	"https://thumb1.shutterstock.com/display_pic_with_logo/172762/258191603/stock-photo-programmer-designs-and-organizes-a-new-database-258191603.jpg", 
  "https://thumb9.shutterstock.com/display_pic_with_logo/219154/457758922/stock-photo-programmer-woman-designs-a-new-database-tables-457758922.jpg", 
  "https://thumb1.shutterstock.com/display_pic_with_logo/348181/300344546/stock-photo-modern-web-network-and-internet-telecommunication-technology-big-data-storage-and-cloud-computing-300344546.jpg"
  ];
var originalSrc = "null";
var cropper = -1;
var ACTIVATE_LOADING = 1;
var DEACTIVATE_LOADING = -1;

function cropImage() {
	var canvas = cropper.getCroppedCanvas();
	destroyCropper();
	canvas.toBlob(
		function(blob) {
			url = URL.createObjectURL(blob);
			$("#elemDiv\\:elem").get(0).src = url;
      initCropper();
		});
}

function cropCancel() {
	destroyCropper();
	var image = $("#elemDiv\\:elem").get(0);
  image.src = originalSrc;
  initCropper();
}

function changeImageSrc(index) {
	destroyCropper();
	var image = $("#elemDiv\\:elem").get(0);
  image.src = imageSrources[index];
  originalSrc = imageSrources[index];
  initCropper();
}

function destroyCropper() {
	changeLoadingState(ACTIVATE_LOADING);
	if(cropper != -1){
  	cropper.destroy();
  }
}

function initCropper() {
	var image = $("#elemDiv\\:elem");
  if(image.get().length > 0) {
    console.log("Starting crop creation");
    if(originalSrc === "null") {
      originalSrc = image.get(0).src;
    }
    cropper = new Cropper(image.get(0), {
      movable: false,
      rotatable: false,
      zoomOnWheel: true,
      ready: changeLoadingState(DEACTIVATE_LOADING)
    });
    console.log("Finished crop creation");
  }
}

function changeLoadingState(state) {
	switch(state * 1) {
   case ACTIVATE_LOADING:
   	$("#loading").removeClass("loading_inactive").addClass("loading_active");
   break;
   case DEACTIVATE_LOADING:
  ...