Resize image on Html5 Canvas & Crop

by David McClelland

HTML

<input type="file" class="btn js-loadfile" value="Upload" />
		<button class="btn js-reset">Reset</button>
		<button class="btn js-crop">Crop</button>
		<div class="crop-wrapper">
			<div class="top-overlay">
			</div>
			<div class="bottom-overlay">
			</div>
			<div class="left-overlay">
			</div>
			<div class="right-overlay">
			</div>
			<div class="overlay">
				<div class="overlay-inner">
				</div>
			</div>
			<img class="resize-image hidden" src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder5-500x500.jpg" alt="image for resizing" width="100" height="100">
		</div>

		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

CSS

.crop-wrapper {
	background-color:rgba(255,255,255,1);
	position:relative;
	width:100%;
	height:90vh;
	overflow:hidden;
}
.resize-container { }

.resize-container {
    position: relative;
    display:none;
    //display: inline-block;
    cursor: move;
    margin: 0 auto;
}

.resize-container-ontop {
	position:absolute;
	cursor:move;
	background-color:rgba(5,255,5,0);
	z-index:1000;
	width:100%;
	height:100%;
}

.resize-container img {
    display: block;
}

.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed rgba(0,0,0,.9);
}

.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(0,0,0,.9);
    z-index: 999;
}

.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.top-overlay {
	z-index:990;
	background-color: rgba(222,222,222,.6);
	width:100%;
	height:50%;
	margin-top:-150px;
	position:absolute;
}

.bottom-overlay {
	z-index:990;
	background-color: rgba(222,222,222,.6);
	width:100%;
	height:50%;
	margin-bottom:-150px;
	position:absolute;
	bottom:0;
}

.right-overlay {
	z-index:990;
	background-color: rgba(222,222,222,.6);
	width:50%;
	height:300px;
	top:50%;
	margin-top:-150px;
	margin-left:-150px;
	position:absolute;
}

.left-overlay {
	z-index:990;
	background-color: rgba(222,222,222,.6);
	width:50%;
	height:300px;
	top:50%;
	right:0px;
	margin-top:-150px;
	margin-right:-150px;
	position:absolute;
}



.overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -150px;
	z-index: 999;
	width: 300px;
	height: 300px;
    border: solid 2px rgba(222,222,222,.9);
	box-sizing: content-box;
	pointer-events:...

JavaScript

var resizeableImage = function(image_target) {
  // Some variable and settings
  var $container,
  orig_src = new Image(),
  image_target = $(image_target).get(0),
  event_state = {},
  constrain = false,
  min_width = 60, // Change as required
  min_height = 60,
  max_width = 1800, // Change as required
  max_height = 1900,
  init_height=500,
  resize_canvas = document.createElement('canvas');
  imageData=null;

  init = function(){
  
  //load a file with html5 file api
	$('.js-loadfile').change(function(evt) {
		var files = evt.target.files; // FileList object
		var reader = new FileReader();

		reader.onload = function(e) {
		  imageData=reader.result;
		  loadData();
		}
		reader.readAsDataURL(files[0]);
	});
	
	//add the reset evewnthandler
	$('.js-reset').click(function() {
		if(imageData)
			loadData();
	});
	

    // When resizing, we will always use this copy of the original as the base
    orig_src.src=image_target.src;

    // Wrap the image with the container and add resize handles
    $(image_target).height(init_height)
	.wrap('<div class="resize-container"></div>')
    .before('<span class="resize-handle resize-handle-nw"></span>')
    .before('<span class="resize-handle resize-handle-ne"></span>')
    .after('<span class="resize-handle resize-handle-se"></span>')
    .after('<span class="resize-handle resize-handle-sw"></span>');

    // Assign the container to a variable
    $container =  $('.resize-container');
		//$container.style.width= "100px";

    
	$container.prepend('<div class="resize-container-ontop"></div>');
	
    // Add events
    $container.on('mousedown touchstart', '.resize-handle', startResize);
    $container.on('mousedown touchstart', '.resize-container-ontop', startMoving);
    $('.js-crop').on('click', crop);
  };
  
  loadData = function() {
			
	//set the image target
	image_target.src=imageData;
	orig_src.src=image_target.src;
  $container.css("display", "inline-block");
	//set the image tot he init...