Cropper JS

														
<div class="row">
	<div class="col-md-8">
		<div class="img-container">
			<img src="dist/img/cropper.jpg" alt="Picture">
		</div>
	</div>
	<div class="col-md-4">
		<div class="docs-preview clearfix">
			<div class="img-preview preview-lg"></div>
			<div class="img-preview preview-md"></div>
			<div class="img-preview preview-sm"></div>
			<div class="img-preview preview-xs"></div>
		</div>
		<div class="docs-data">
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataX">X</label>
				<input type="text" class="form-control" id="dataX" placeholder="x">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataY">Y</label>
				<input type="text" class="form-control" id="dataY" placeholder="y">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataWidth">Width</label>
				<input type="text" class="form-control" id="dataWidth" placeholder="width">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataHeight">Height</label>
				<input type="text" class="form-control" id="dataHeight" placeholder="height">
				<span class="input-group-text">px</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataRotate">Rotate</label>
				<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
				<span class="input-group-text">deg</span>
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleX">ScaleX</label>
				<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
			</div>
			<div class="input-group input-group-sm">
				<label class="input-group-text" for="dataScaleY">ScaleY</label>
				<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
			</div>
		</div>
	</div>
</div>
													

														
<!-- Cropper JS -->															
<script src="vendors/cropperjs/dist/cropper.min.js"></script>
window.onload = function () {
	'use strict';
	var Cropper = window.Cropper;
	var URL = window.URL || window.webkitURL;
	var container = document.querySelector('.img-container');
	var image = container.getElementsByTagName('img').item(0);
	var download = document.getElementById('download');
	var actions = document.getElementById('actions');
	var dataX = document.getElementById('dataX');
	var dataY = document.getElementById('dataY');
	var dataHeight = document.getElementById('dataHeight');
	var dataWidth = document.getElementById('dataWidth');
	var dataRotate = document.getElementById('dataRotate');
	var dataScaleX = document.getElementById('dataScaleX');
	var dataScaleY = document.getElementById('dataScaleY');
	var options = {
		aspectRatio: 16 / 9,
		preview: '.img-preview',
		ready: function (e) {
		console.log(e.type);
		},
		cropstart: function (e) {
		console.log(e.type, e.detail.action);
		},
		cropmove: function (e) {
		console.log(e.type, e.detail.action);
		},
		cropend: function (e) {
		console.log(e.type, e.detail.action);
		},
		crop: function (e) {
		var data = e.detail;
	
		console.log(e.type);
		dataX.value = Math.round(data.x);
		dataY.value = Math.round(data.y);
		dataHeight.value = Math.round(data.height);
		dataWidth.value = Math.round(data.width);
		dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
		dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
		dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
		},
		zoom: function (e) {
		console.log(e.type, e.detail.ratio);
		}
	};
	var cropper = new Cropper(image, options);
	};