A simple jQuery image cropping plugin.
... <div class="img-container"> <img src="img/picture.jpg"> </div> ... ... <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> ...
$(".img-container > img").cropper({ aspectRatio: 16 / 9, preview: ".img-preview", crop: function(e) { $("#dataX").val(Math.round(e.x)); $("#dataY").val(Math.round(e.y)); $("#dataHeight").val(Math.round(e.height)); $("#dataWidth").val(Math.round(e.width)); $("#dataRotate").val(e.rotate); $("#dataScaleX").val(e.scaleX); $("#dataScaleY").val(e.scaleY); } });
<div class="cropper-example-1"> <img src="img/picture.jpg" alt="Picture"> </div>
$('.cropper-example-1 > img').cropper({ aspectRatio: 16 / 9, autoCropArea: 0.65, strict: false, guides: false, highlight: false, dragCrop: false, cropBoxMovable: false, cropBoxResizable: false });
Demo:
HTML:
<div class="modal fade" id="cropper-example-2-modal"> <div class="modal-dialog"> <div class="modal-content"> ... <div class="modal-body"> <div id="cropper-example-2"> <img src="img/picture.jpg" alt="Picture"> </div> </div> ... </div> </div> </div>
JavaScript:
var $image = $('#cropper-example-2 > img'), cropBoxData, canvasData; $('#cropper-example-2-modal').on('shown.bs.modal', function () { $image.cropper({ autoCropArea: 0.5, built: function () { // Strict mode: set crop box data first $image.cropper('setCropBoxData', cropBoxData); $image.cropper('setCanvasData', canvasData); } }); }).on('hidden.bs.modal', function () { cropBoxData = $image.cropper('getCropBoxData'); canvasData = $image.cropper('getCanvasData'); $image.cropper('destroy'); });
<button class="btn btn-primary" id="replace-toggle" type="button">Toggle</button> <div class="cropper-example-3"> <img src="img/picture.jpg" alt="Picture"> </div>
.cropper-example-3 { width: 100%; } .cropper-example-3 > img { max-width: 100%; }
var $image = $('.cropper-example-3 > img'), replaced; $image.cropper({ movable: false, zoomable: false, rotatable: false, scalable: false }); $('#replace-toggle').click(function () { var url = 'img/picture-2.jpg'; if (replaced) { url = 'img/picture.jpg'; } $image.cropper('replace', url); replaced = !replaced; });
This example requires a PHP server to upload and crop image. Please download and test it.