Cropper js is JavaScript plugin which is image cropper.
Four directions are available: Top, Right, Bottom and Left. For adding popovers read official documentation of bootstrap.
<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);
};