<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/Devlose/pen/wBMxqg" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto);
.layout {
height: 100%;
}
.layout * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.paragraphe{
color:#fff;
font-family: "roboto";
font-size:12px;
}
.layout body {
width: 100%;
height: 100%;
padding: 20px;
color: #111;
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #7abcff 0%, #4096ee 100%);
background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%, #4096ee 100%);
}
.layout h1 {
font-family: Roboto, Arial, sans-serif;
text-align: center;
}
.layout .btn {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 999;
padding: 6px 10px;
font-family: "roboto";
font-size: 16px;
color: #fff;
background-image: -webkit-linear-gradient(top, #c92437 0%, #9e1c2b 100%);
background-image: linear-gradient(to bottom, #c92437 0%, #9e1c2b 100%);
border: 0;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.ic-container {
position: relative;
}
.ic-overlay-n,
.ic-overlay-e,
.ic-overlay-s,
.ic-overlay-w {
position: absolute;
background-color: #000;
opacity: 0.7;
}
.ic-overlay-n {
top: 0;
}
.ic-overlay-e {
top: 0;
right: 0;
bottom: 0;
}
.ic-overlay-s {
bottom: 0;
}
.ic-overlay-w {
top: 0;
bottom: 0;
left: 0;
}
.ic-resize-handle-ne,
.ic-resize-handle-se,
.ic-resize-handle-nw,
.ic-resize-handle-sw {
position: absolute;
width: 10px;
height: 10px;
background: #aed081;
z-index: 999;
}
.ic-resize-handle-nw {
top: -5px;
left: -5px;
cursor: nw-resize;
}
.ic-resize-handle-sw {
bottom: -5px;
left: -5px;
cursor: sw-resize;
}
.ic-resize-handle-ne {
top: -5px;
right: -5px;
cursor: ne-resize;
}
.ic-resize-handle-se {
bottom: -5px;
right: -5px;
cursor: se-resize;
}
.ic-crop-marker {
position: absolute;
z-index: 999;
border: solid 2px rgba(174, 208, 129, 0.5);
cursor: move;
}
.ic-move-handle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ic-container img {
display: block;
max-width: 100%;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
padding: 20px;
padding-bottom:50px;
text-align: center;
color: #111;
background:#aed081;
}
img {
max-width: 100%;
}
section {
height: 100%;
}
.hidden {
display: none;
}
.drop {
position: relative;
width: 100%;
height: 100%;
font-family: roboto, Arial, serif;
font-size: 30px;
color: #fff;
border: 5px dashed rgba(255, 255, 255, 0.4);
cursor: pointer;
transition-properties: border;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.drop.dragging,
.drop:hover {
border-color: rgba(255, 255, 255, 0.8);
}
.drop p {
position: absolute;
top: 50%;
width: 100%;
margin-top: -19px;
margin-bottom: 0;
text-align: center;
}
.image-resize {
max-width: 800px;
margin: auto;
}
.btn {
margin-top: 20px;
padding: 8px 25px;
font-family: "Roboto";
font-size: 16px;
color: #fff;
background-color: #181818;
border: 0;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.btn .fa:first-child {
margin-right: 5px;
}
.thumbnail {
display: inline-block;
margin: auto;
padding: 5px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;
}
.thumbnail img {
display: block;
border-radius: 5px;
}
input {
margin-top: 20px;
padding: 8px 25px;
font-family: "Roboto";
font-size: 16px;
color: #fff;
background-color: #181818;
border: 0;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
.footer{
font-family:"roboto";
color:#fff;
font-size:10px;
margin-top:20px;
margin-rigth:200px;
}
a{
text-decoration: none;
color: inherit;
}
a:hover{
color:#aed081;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}</style></head><body>
<!-- Upload image -->
<section id="sectionDragAndDrop">
<div class="drop" id="drop">
<p>Glisse ou clique,<br>pour sélectionner ton image</p>
</div>
<input class="file-upload hidden" id="fileUpload" type="file">
</section>
<!-- Resize image -->
<section class="hidden" id="sectionResize">
<div class="image-resize" id="imageResize"></div>
<button class="btn" id="crop"><span class='fa fa-crop'></span> Rogner</button>
</section>
<!-- Insert thumbnail -->
<section class="hidden" id="sectionThumbnail">
<div class="thumbnail" id="thumbnail"></div>
<p class="paragraphe">Voila ton image "150 x 200 "</br>Récupère la à l'aide d'un clique droit et choisis "Enregistrer l'image sous…"<br>
<input type="button" value="Recommencer" Onclick="javascript:window.history.go(0)">
</section>
<div class="footer">Générateur d'avatars - <a href="http://devlose.fr" target="bank">Devlose</a></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$('#drop').on('click', function() {
$('#fileUpload').trigger('click');
});
$('#fileUpload').on('change', function(e) {
addImage(e.target);
});
$("#drop").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('dragging');
});
$("#drop").on("dragleave", function(e) {
$(this).removeClass('dragging');
});
$("#drop").on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
var data = e.dataTransfer || e.originalEvent.dataTransfer;
addImage(data);
});
function addImage(data) {
var file = data.files[0];
if (file.type.indexOf('image') === -1) {
alert('Sorry, the file you uploaded doesn\'t appear to be an image.');
return false;
}
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
if (img.width < 90 || img.height < 90) {
alert('Sorry, the image you uploaded doesn\'t appear to be large enough.');
return false;
}
cropImage(img);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}
function cropImage(originalImage) {
function callback(img) {
}
$(originalImage).attr('id', 'fullImage');
$('#imageResize').html(originalImage);
$('#sectionDragAndDrop').addClass('hidden');
$('#sectionResize').removeClass('hidden');
var newImage = new imageCrop('#fullImage', 90, 90);
$('#crop').on('click', function() {
var results = newImage.crop();
$('#thumbnail').html(results.img);
$('#sectionResize').addClass('hidden');
$('#sectionThumbnail').removeClass('hidden');
});
}
// Requires jQuery
var imageCrop = function(imageTarget, requiredWidth, requiredHeight) {
// Variables
var $doc = $(document),
$cropMarker,
$originalImage,
origSrc = new Image(),
imageTarget = $(imageTarget).get(0),
imageScale,
imageRatio,
cropRatio,
adjustedRequiredWidth,
adjustedRequiredHeight,
eventState = {},
allowResize = true,
keyboardMove = false,
imageLoaded = new $.Deferred();
origSrc.crossOrigin = "Anonymous";
function init() {
origSrc.onload = function() {
// Check to make sure the target image is large enough
if (origSrc.width < requiredWidth || origSrc.height < requiredHeight) {
console.log('Image Crop error: The required dimensions are larger than the target image.');
return false;
}
// And neccessary html
$(imageTarget).wrap('<div class="ic-container"></div>').before('\
<div class="ic-overlay-n" id="icOverlayN"></div>\
<div class="ic-overlay-e" id="icOverlayE"></div>\
<div class="ic-overlay-s" id="icOverlayS"></div>\
<div class="ic-overlay-w" id="icOverlayW"></div>\
<div class="ic-crop-marker" id="icCropMarker">\
<div class="ic-resize-handle-nw" id="icResizeHandleNW"></div>\
<div class="ic-resize-handle-ne" id="icResizeHandleNE"></div>\
<div class="ic-resize-handle-sw" id="icResizeHandleSW"></div>\
<div class="ic-resize-handle-se" id="icResizeHandleSE"></div>\
<div class="ic-move-handle" id="icMoveHandle"></div>\
</div>\
');
$cropMarker = $('#icCropMarker');
$originalImage = $(imageTarget);
imageScale = origSrc.width / $originalImage.width();
imageRatio = origSrc.width / origSrc.height;
cropRatio = requiredWidth / requiredHeight;
adjustedRequiredWidth = requiredWidth / imageScale;
adjustedRequiredHeight = requiredHeight / imageScale;
centerCropMarker();
repositionOverlay();
$cropMarker.on('mousedown touchstart', startResize);
$cropMarker.on('mousedown touchstart', '#icMoveHandle', startMoving);
imageLoaded.resolve();
};
origSrc.src = imageTarget.src;
};
function startResize(e) {
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$doc.on('mousemove touchmove', resizing);
$doc.on('mouseup touchend', endResize);
};
function endResize(e) {
e.preventDefault();
$doc.off('mouseup touchend', endResize);
$doc.off('mousemove touchmove', resizing);
};
function resizing(e) {
var mouse = {},
width,
height,
left,
top,
originalWidth = $cropMarker.outerWidth(),
originalHeight = $cropMarker.outerHeight(),
originalOffset = $cropMarker.position();
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();
var SE = false,
SW = false,
NW = false,
NE = false;
if ($(eventState.evnt.target).is('#icResizeHandleSE')) {
SE = true;
} else if ($(eventState.evnt.target).is('#icResizeHandleSW')) {
SW = true;
} else if ($(eventState.evnt.target).is('#icResizeHandleNW')) {
NW = true;
} else if ($(eventState.evnt.target).is('#icResizeHandleNE')) {
NE = true;
}
if (SE) {
width = mouse.x - eventState.containerLeft - $originalImage.offset().left;
height = width / requiredWidth * requiredHeight;
left = eventState.containerLeft;
top = eventState.containerTop;
} else if (SW) {
width = eventState.containerWidth - (mouse.x - eventState.containerLeft - $originalImage.offset().left);
height = width / requiredWidth * requiredHeight;
left = mouse.x - $originalImage.offset().left;
top = eventState.containerTop;
} else if (NW) {
width = eventState.containerWidth - (mouse.x - eventState.containerLeft - $originalImage.offset().left);
height = width / requiredWidth * requiredHeight;
left = mouse.x - $originalImage.offset().left;
top = originalOffset.top + originalHeight - height;
} else if (NE) {
width = mouse.x - eventState.containerLeft - $originalImage.offset().left;
height = width / requiredWidth * requiredHeight;
left = eventState.containerLeft;
top = originalOffset.top + originalHeight - height;
}
if (
top >= 0 &&
left >= 0 &&
Math.round(top + height) <= Math.round($originalImage.height()) &&
Math.round(left + width) <= Math.round($originalImage.width())
) {
allowResize = true;
}
if (allowResize) {
// Over top boundary
if (top < 0) {
height = originalHeight + originalOffset.top;
width = height / requiredHeight * requiredWidth;
top = 0;
if (NW) {
left = originalOffset.left - (width - originalWidth);
}
allowResize = false;
}
// Over left boundary
else if (left < 0) {
width = originalWidth + originalOffset.left;
height = width / requiredWidth * requiredHeight;
left = 0;
if (SE) {
top = originalOffset.top - (height - originalHeight);
}
allowResize = false;
}
// Over bottom boundary
else if (Math.round(top + height) > Math.round($originalImage.height())) {
height = $originalImage.height() - top;
width = height / requiredHeight * requiredWidth;
if (SW) {
left = originalOffset.left - (width - originalWidth);
}
allowResize = false;
}
// Over right boundary
else if (Math.round(left + width) > Math.round($originalImage.width())) {
width = $originalImage.width() - left;
height = width / requiredWidth * requiredHeight;
if (NE) {
top = originalOffset.top - (height - originalHeight);
}
allowResize = false;
}
// Check for min width / height
if (width > adjustedRequiredWidth && height > adjustedRequiredHeight) {
$cropMarker.outerWidth(width).outerHeight(height);
$cropMarker.css({
'left': left,
'top': top
});
} else {
if (SW || NW) {
left = left - (adjustedRequiredWidth - width);
}
if (NW || NE) {
top = top - (adjustedRequiredHeight - height);
}
$cropMarker.outerWidth(adjustedRequiredWidth).outerHeight(adjustedRequiredHeight);
$cropMarker.css({
'left': left,
'top': top
});
}
}
repositionOverlay();
}
function startMoving(e) {
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$doc.on('mousemove touchmove', moving);
$doc.on('mouseup touchend', endMoving);
};
function endMoving(e) {
e.preventDefault();
$doc.off('mouseup touchend', endMoving);
$doc.off('mousemove touchmove', moving);
};
function moving(e) {
var top,
left,
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();
top = mouse.y - (eventState.mouseY - eventState.containerTop);
left = mouse.x - (eventState.mouseX - eventState.containerLeft);
if (top < 0) {
top = 0;
}
if (top + $cropMarker.outerHeight() > $originalImage.height()) {
top = $originalImage.height() - $cropMarker[0].getBoundingClientRect().height;
}
if (left < 0) {
left = 0;
}
if (left + $cropMarker.outerWidth() > $originalImage.width()) {
left = $originalImage.width() - $cropMarker[0].getBoundingClientRect().width;
}
$cropMarker.css({
'top': top,
'left': left
});
repositionOverlay();
};
document.addEventListener('keydown', function(e) {
var top,
left,
shiftAmount,
top = $cropMarker.position().top,
left = $cropMarker.position().left;
if (e.shiftKey) {
shiftAmount = 10;
} else {
shiftAmount = 1;
}
if (e.keyCode === 37) {
left = left - shiftAmount;
} else if (e.keyCode === 38) {
top = top - shiftAmount;
} else if (e.keyCode === 39) {
left = left + shiftAmount;
} else if (e.keyCode === 40) {
top = top + shiftAmount;
}
if (top < 0) {
top = 0;
}
if (top + $cropMarker.outerHeight() > $originalImage.height()) {
top = $originalImage.height() - $cropMarker[0].getBoundingClientRect().width;
}
if (left < 0) {
left = 0;
}
if (left + $cropMarker.outerWidth() > $originalImage.width()) {
left = $originalImage.width() - $cropMarker[0].getBoundingClientRect().width;
}
if (keyboardMove) {
$cropMarker.css({
'top': top,
'left': left
});
repositionOverlay();
}
});
$doc.click(function(e) {
if ($(e.target).closest('.ic-container').length) {
keyboardMove = true;
} else {
keyboardMove = false;
}
})
var saveEventState = function(e) {
eventState.containerWidth = $cropMarker.outerWidth();
eventState.containerHeight = $cropMarker.outerHeight();
eventState.containerLeft = $cropMarker.position().left;
eventState.containerTop = $cropMarker.position().top;
eventState.mouseX = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
eventState.mouseY = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
eventState.evnt = e;
};
var centerCropMarker = function() {
if (cropRatio > imageRatio) {
$cropMarker.outerWidth($originalImage.width());
$cropMarker.outerHeight($cropMarker.outerWidth() / requiredWidth * requiredHeight);
$cropMarker.css({
top: ($originalImage.height() - $cropMarker.height()) / 2 + 'px',
left: 0
});
} else {
$cropMarker.outerHeight($originalImage.height());
$cropMarker.outerWidth($cropMarker.outerHeight() / requiredHeight * requiredWidth);
$cropMarker.css({
left: ($originalImage.width() - $cropMarker.width()) / 2 + 'px',
top: 0
});
}
}
function repositionOverlay() {
var imgWidth = $originalImage[0].getBoundingClientRect().width,
imgHeight = $originalImage[0].getBoundingClientRect().height,
cropTop = $cropMarker.position().top,
cropLeft = $cropMarker.position().left,
cropWidth = $cropMarker[0].getBoundingClientRect().width,
cropHeight = $cropMarker[0].getBoundingClientRect().height,
cropBorder = parseFloat($cropMarker.css('border-top-width'));
$('#icOverlayN').css({
right: imgWidth - cropLeft - cropWidth,
height: cropTop,
left: cropLeft
});
$('#icOverlayE').css({
left: cropLeft + cropWidth
});
$('#icOverlayS').css({
right: imgWidth - cropLeft - cropWidth,
top: cropTop + cropHeight,
left: cropLeft
});
$('#icOverlayW').css({
width: cropLeft
});
};
// Crop to required size
this.crop = function() {
var cropCanvas,
img = new Image(),
scale = origSrc.width / $originalImage.width(),
left = Math.round($cropMarker.position().left * scale),
top = Math.round($cropMarker.position().top * scale),
width = Math.round($cropMarker.outerWidth() * scale),
height = Math.round($cropMarker.outerHeight() * scale);
results;
cropCanvas = document.createElement('canvas');
cropCanvas.width = requiredWidth;
cropCanvas.height = requiredHeight;
cropCanvas.getContext('2d').drawImage(origSrc, left, top, width, height, 0, 0, requiredWidth, requiredHeight);
img.src = cropCanvas.toDataURL();
var results = {
img: img,
left: left,
top: top,
width: width,
height: height,
requiredWidth: requiredWidth,
requiredHeight: requiredHeight
};
return results;
}
this.position = function(left, top, width, height) {
$.when(imageLoaded).done(function() {
var scale = origSrc.width / $originalImage.width();
left = Math.round(left / scale),
top = Math.round(top / scale),
width = Math.round(width / scale),
height = Math.round(height / scale);
$cropMarker.outerWidth(width).outerHeight(height);
$cropMarker.css({
'left': left,
'top': top
});
repositionOverlay();
});
}
this.cropReset = function() {
centerCropMarker();
repositionOverlay();
}
// Viewport resize
$(window).resize(function() {
imageScale = origSrc.width / $originalImage.width();
adjustedRequiredWidth = requiredWidth / imageScale;
adjustedRequiredHeight = requiredHeight / imageScale;
centerCropMarker();
repositionOverlay();
});
init();
};
// Initiate Image Crop
if ($('#exampleImage').length) {
var exampleCrop = new imageCrop('#exampleImage', 200, 200);
}
// Crop event
$('#exampleCrop').on('click', function() {
var results = exampleCrop.crop();
$('body').html(results.img);
});
//# sourceURL=pen.js
</script>
</body></html>
