Hi micah,
Here i have created an example. Take this as a reference and implement in your code.
JQuery-CropBox-min.js
"use strict"; !function (t) { "function" == typeof define && define.amd ? define(["jquery"], t) : t(jQuery) } (function (t) { var e = function (e, n) { var n = n || t(e.imageBox), i = { state: {}, ratio: 1, options: e, imageBox: n, thumbBox: n.find(e.thumbBox), spinner: n.find(e.spinner), image: new Image, getDataURL: function () { var t = this.thumbBox.width(), e = this.thumbBox.height(), i = document.createElement("canvas"), a = n.css("background-position").split(" "), o = n.css("background-size").split(" "), s = parseInt(a[0]) - n.width() / 2 + t / 2, r = parseInt(a[1]) - n.height() / 2 + e / 2, u = parseInt(o[0]), g = parseInt(o[1]), c = parseInt(this.image.height), m = parseInt(this.image.width); i.width = t, i.height = e; var p = i.getContext("2d"); p.drawImage(this.image, 0, 0, m, c, s, r, u, g); var d = i.toDataURL("image/png"); return d }, getBlob: function () { for (var t = this.getDataURL(), e = t.replace("data:image/png;base64,", ""), n = atob(e), i = [], a = 0; a < n.length; a++) i.push(n.charCodeAt(a)); return new Blob([new Uint8Array(i)], { type: "image/png" }) }, zoomIn: function () { this.ratio *= 1.1, a() }, zoomOut: function () { this.ratio *= .9, a() } }, a = function () { var t = parseInt(i.image.width) * i.ratio, e = parseInt(i.image.height) * i.ratio, a = (n.width() - t) / 2, o = (n.height() - e) / 2; n.css({ "background-image": "url(" + i.image.src + ")", "background-size": t + "px " + e + "px", "background-position": a + "px " + o + "px", "background-repeat": "no-repeat" }) }, o = function (t) { t.stopImmediatePropagation(), i.state.dragable = !0, i.state.mouseX = t.clientX, i.state.mouseY = t.clientY }, s = function (t) { if (t.stopImmediatePropagation(), i.state.dragable) { var e = t.clientX - i.state.mouseX, a = t.clientY - i.state.mouseY, o = n.css("background-position").split(" "), s = e + parseInt(o[0]), r = a + parseInt(o[1]); n.css("background-position", s + "px " + r + "px"), i.state.mouseX = t.clientX, i.state.mouseY = t.clientY } }, r = function (t) { t.stopImmediatePropagation(), i.state.dragable = !1 }, u = function (t) { i.ratio *= t.originalEvent.wheelDelta > 0 || t.originalEvent.detail < 0 ? 1.1 : .9, a() }; return i.spinner.show(), i.image.onload = function () { i.spinner.hide(), a(), n.bind("mousedown", o), n.bind("mousemove", s), t(window).bind("mouseup", r), n.bind("mousewheel DOMMouseScroll", u) }, i.image.src = e.imgSrc, n.on("remove", function () { t(window).unbind("mouseup", r) }), i }; jQuery.fn.cropbox = function (t) { return new e(t, this) } });
HTML
<div>
<style type="text/css">
.container
{
position: absolute;
top: 10%;
left: 10%;
right: 0;
bottom: 0;
}
.cropped > img
{
margin-right: 10px;
}
.imageBox
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid #aaa;
background: #fff;
overflow: hidden;
background-repeat: no-repeat;
cursor: move;
}
.imageBox .thumbBox
{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
box-sizing: border-box;
border: 1px solid rgb(102, 102, 102);
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
background: none repeat scroll 0% 0% transparent;
}
.imageBox .spinner
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
line-height: 400px;
background: rgba(0,0,0,0.7);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="Script/JQuery-CropBox-min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var options = { thumbBox: '.thumbBox', spinner: '.spinner', imgSrc: 'avatar.png' }
var cropper = $('.imageBox').cropbox(options);
$('#file').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$('#btnCrop').on('click', function () {
var img = cropper.getDataURL();
$('.cropped').append('<img src="' + img + '">');
})
$('#btnZoomIn').on('click', function () { cropper.zoomIn(); })
$('#btnZoomOut').on('click', function () { cropper.zoomOut(); })
});
</script>
</div>
<div class="container">
<input type="file" id="file" />
<br />
<br />
<input type="button" id="btnZoomIn" value="+" />
<input type="button" id="btnZoomOut" value="-" />
<input type="button" id="btnCrop" value="Crop" />
<br />
<br />
<div class="imageBox">
<div class="thumbBox">
</div>
</div>
<br />
<br />
<div class="cropped">
</div>
</div>
Screenshot
Note: You can't resize the cropping tool but you can drag the image to crop for a particular area and make zoomin and zoomout.
For more details refer the below link.
https://github.com/hongkhanh/cropbox
https://www.jqueryscript.net/other/Lightweight-jQuery-Image-Cropping-Plugin-Cropbox.html
