<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/janhommes/pen/eaKsA?depth=everything&order=popularity&page=11&q=tools&show_forks=false" />
<style class="cp-pen-styles">.crop-wrapper {
background-color:rgba(255,255,255,1);
position:relative;
width:100%;
height:90vh;
overflow:hidden;
}
.resize-container {
position: relative;
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: none;
}
.overlay:before {
top: 0;
margin-left: -2px;
margin-top: -40px;
}
.overlay:after {
bottom: 0;
margin-left: -2px;
margin-bottom: -40px;
}
.overlay-inner:before {
left: 0;
margin-left: -40px;
margin-top: -2px;
}
.overlay-inner:after{
right: 0;
margin-right: -40px;
margin-top: -2px;
}
.btn {
padding: 6px 10px;
background-color: rgb(222,60,80);
border: none;
border-radius: 5px;
color: #FFF;
margin:10px 5px;
line-height:30px;
}
.btn-crop img {
vertical-align: middle;
margin-left: 8px;
}</style></head><body>
<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" src="img/image.jpg" alt="image for resizing">
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >
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.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;
//set the image tot he init height
$(image_target).css({
width:'auto',
height:init_height
});
//resize the canvas
$(orig_src).bind('load',function() {
resizeImageCanvas($(image_target).width(),$(image_target).height());
});
};
startResize = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove', resizing);
$(document).on('mouseup touchend', endResize);
};
endResize = function(e){
resizeImageCanvas($(image_target).width(), $(image_target).height())
e.preventDefault();
$(document).off('mouseup touchend', endResize);
$(document).off('mousemove touchmove', resizing);
};
saveEventState = function(e){
// Save the initial event details and container state
event_state.container_width = $container.width();
event_state.container_height = $container.height();
event_state.container_left = $container.offset().left;
event_state.container_top = $container.offset().top;
event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// This is a fix for mobile safari
// For some reason it does not allow a direct copy of the touches property
if(typeof e.originalEvent.touches !== 'undefined'){
event_state.touches = [];
$.each(e.originalEvent.touches, function(i, ob){
event_state.touches[i] = {};
event_state.touches[i].clientX = 0+ob.clientX;
event_state.touches[i].clientY = 0+ob.clientY;
});
}
event_state.evnt = e;
};
resizing = function(e){
var mouse={},width,height,left,top,offset=$container.offset();
mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// Position image differently depending on the corner dragged and constraints
if( $(event_state.evnt.target).hasClass('resize-handle-se') ){
width = mouse.x - event_state.container_left;
height = mouse.y - event_state.container_top;
left = event_state.container_left;
top = event_state.container_top;
} else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = mouse.y - event_state.container_top;
left = mouse.x;
top = event_state.container_top;
} else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = event_state.container_height - (mouse.y - event_state.container_top);
left = mouse.x;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
} else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){
width = mouse.x - event_state.container_left;
height = event_state.container_height - (mouse.y - event_state.container_top);
left = event_state.container_left;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
}
// Optionally maintain aspect ratio
if(constrain || e.shiftKey){
height = width / orig_src.width * orig_src.height;
}
if(width > min_width && height > min_height && width < max_width && height < max_height){
// To improve performance you might limit how often resizeImage() is called
resizeImage(width, height);
// Without this Firefox will not re-calculate the the image dimensions until drag end
$container.offset({'left': left, 'top': top});
}
}
resizeImage = function(width, height){
$(image_target).width(width).height(height);
};
resizeImageCanvas = function(width, height){
resize_canvas.width = width;
resize_canvas.height = height;
resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
$(image_target).attr('src', resize_canvas.toDataURL("image/png"));
//$(image_target).width(width).height(height);
};
startMoving = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove', moving);
$(document).on('mouseup touchend', endMoving);
};
endMoving = function(e){
e.preventDefault();
$(document).off('mouseup touchend', endMoving);
$(document).off('mousemove touchmove', moving);
};
moving = function(e){
var mouse={}, touches;
e.preventDefault();
e.stopPropagation();
touches = e.originalEvent.touches;
mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
$container.offset({
'left': mouse.x - ( event_state.mouse_x - event_state.container_left ),
'top': mouse.y - ( event_state.mouse_y - event_state.container_top )
});
// Watch for pinch zoom gesture while moving
if(event_state.touches && event_state.touches.length > 1 && touches.length > 1){
var width = event_state.container_width, height = event_state.container_height;
var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
a = a * a;
var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
b = b * b;
var dist1 = Math.sqrt( a + b );
a = e.originalEvent.touches[0].clientX - touches[1].clientX;
a = a * a;
b = e.originalEvent.touches[0].clientY - touches[1].clientY;
b = b * b;
var dist2 = Math.sqrt( a + b );
var ratio = dist2 /dist1;
width = width * ratio;
height = height * ratio;
// To improve performance you might limit how often resizeImage() is called
resizeImage(width, height);
}
};
crop = function(){
//Find the part of the image that is inside the crop box
var crop_canvas,
left = $('.overlay').offset().left- $container.offset().left,
top = $('.overlay').offset().top - $container.offset().top,
width = $('.overlay').width(),
height = $('.overlay').height();
crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
var dataURL=crop_canvas.toDataURL("image/png");
image_target.src=dataURL;
orig_src.src=image_target.src;
$(image_target).bind("load",function() {
$(this).css({
width:width,
height:height
}).unbind('load').parent().css({
top:$('.overlay').offset().top- $('.crop-wrapper').offset().top,
left:$('.overlay').offset().left- $('.crop-wrapper').offset().left
})
});
//window.open(crop_canvas.toDataURL("image/png"));
}
init();
};
// Kick everything off with the target image
resizeableImage($('.resize-image'));
//# sourceURL=pen.js
</script>
</body></html>
