Image Upload and Crop

HTML

<div class="image-cropper">
<input type="file" id="imageLoader" name="imageLoader"/>
<div class="error">Invalid file.  Needs to be at least 100x100 pixels.</div>
<div class="clearfix">
<div class="canvasCon">
    <canvas id="imageCanvas" width="300" height="300"></canvas>
    <div class="canvasScreenTop"></div>
    <div class="canvasScreenBottom"></div>
    <div class="canvasScreenLeft"></div>
    <div class="canvasScreenRight"></div>
    <div class="toolbar">
        <div class="instructions">Click and drag to move.  Hold shift key to scale.</div>
        <button id="crop">Crop</button>
        <button id="reset">Reset</button>
    </div>
</div>
    <div class="cropResult"><img width="100" height="100"/></div></div>
<canvas id="cropCanvas" width="100" height="100"></canvas>
</div>

CSS

* {
    font-family: sans-serif;
}
#imageCanvas {
    width: 300px;
    height: 300px;
    background: white;
}
#cropCanvas {
    width: 100px;
    height: 100px;
}
#imageCanvas,[class^='canvasScreen'] {
    pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.canvasCon {
    position: relative;
    width: 300px;
    height: 300px;
    cursor: move;
    float: left;
    margin-right: 50px;
}
.toolbar {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: small;
}
.error {
    color: red;
}
#crop, #reset, .canvasCon, #cropCanvas, .instructions, .error {display: none;}
.cropResult {
    display: none;
    margin: 90px 0 0;
    float: left;
    border: 6px solid #eee;
}
.cropResult img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 4px;
}
[class^='canvasScreen'] {
    position: absolute;
    background: white;
    opacity: 0.9;
}
.canvasScreenTop {
    top: 0;
    left: 0;
    height: 100px;
    right: 0;
}
.canvasScreenBottom {
    bottom: 0;
    left: 0;
    height: 100px;
    right: 0;
}
.canvasScreenLeft {
    top: 100px;
    bottom: 100px;
    left: 0;
    width: 100px;
}
.canvasScreenRight {
    top: 100px;
    bottom: 100px;
    right: 0;
    width: 100px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

JavaScript

$(function() {
    // properties
    var isCaptured = false;
    var thumbSize = 100;
    var imageCoords = {
        x: 0,
        y: 0
    };
    var imageScale = 1;
    var imageDimensions = {
        width: 0,
        height: 0,
        minScale: 0.01,
        maxScale: 1
    }
    var currentImage = null;
    var originalSettings = {
        coords: {
            x: 0,
            y: 0,
        },
        scale: 1,
        dimensions: {
            width: 0,
            height: 0,
            minimum: thumbSize
        }
    };
    var scaleCenter = {
        x: 0,
        y: 0
    };
    var grabCenter = false;
    var isShiftKeyDown = false;

    // dom dependencies
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');
    var canCon = $('.canvasCon');

    // methods
    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    function refreshImage() {
        clearCanvas();
        boxed();
        ctx.drawImage(currentImage,
            imageCoords.x, imageCoords.y,
            imageDimensions.width * imageScale, imageDimensions.height * imageScale);
    }
    function resetImage() {
        if (!currentImage) return;
        imageDimensions.width = originalSettings.dimensions.width;
        imageDimensions.height = originalSettings.dimensions.height;
        imageScale = originalSettings.scale;
        imageCoords.x = originalSettings.coords.x;
        imageCoords.y = originalSettings.coords.y;

        refreshImage();
    }
    function handleImage(e){
        var reader = new FileReader();
        reader.onload = function(event){
            currentImage = new Image();
            currentImage.onload = function(){
                imageCoords.x = 0;
                imageCoords.y = 0;
                originalSettings.dimensions.width = currentImage.width;
                imageDimensions.width = currentImage.width;
                originalSettings.dimensions.height =...