JQuery Crop Plugin

In this article, we learn about the jQuery crop functionality in detail with the help of various examples. For this, we are using an image upload for uploading an image option and a jQuery cropping plugin for cropping an image. We can also download an image after cropping.

Following are the various examples of jQuery crop plugins.

Example 1:

<! DOCTYPE html>
<html>
<head>
	<title>
	 jQuery crop plugin Example 
</title>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<link href = "https://foliotek.github.io/Croppie/croppie.css" rel = "stylesheet"> 
<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://foliotek.github.io/Croppie/croppie.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> </script> 
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
label.cabinet {
	display: block;
	cursor: pointer;
}
label.cabinet input.file {
	position: relative;
	height: 100%;
	width: auto;
	opacity: 0;
	-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  margin-top: -30px;
}
#upload-demo {
	width: 250px;
	height: 250px;
  padding-bottom: 25px;
}
figure figcaption {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding-left: 9px;
    padding-bottom: 5px;
    text-shadow: 0 0 10px #000;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
</head>
<body>
	<h1>
	Example 
</h1>
<h2> 
	jquery crop plugin
</h2>
	<div class = "container">
	<div class = "row">
	<div class = "col-xs-12">
		<label class = "cabinet center-block">
		<figure>
	<img src = " " class = "gambar img-responsive img-thumbnail" id = "item-img-output" />				<figcaption> <i class = "fa fa-camera"> </i> </figcaption>
	</figure>
	<input type = "file" class = "item-img file center-block" name = "file_photo"/>
		</label>
		</div>
		</div>
</div>
<div class = "modal fade" id = "cropImagePop" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
		 <div class = "modal-dialog">
               <div class = "modal-content">
		<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"> <span aria-hidden = "true">� </span> </button>
				<h4 class = "modal-title" id = "myModalLabel">
<?=multiLanguage( "Edit Foto" , "Edit Photo" )?> </h4>
					</div>
					<div class = "modal-body">
<div id = "upload-demo" class = "center-block"> </div>
				      </div>
		 <div class = "modal-footer">
        <button type = "button" class = "btn btn-default" data-dismiss = "modal"> Close </button>
        <button type = "button" id = "cropImageBtn" class = "btn btn-primary"> Crop </button>
      </div>
						    </div>
						  </div>
						</div>
	 <script type = "text/javascript">
        $(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");
						var $uploadCrop,
						tempFilename,
						rawImg,
						imageId;
						function readFile(input) {
				 if (input.files && input.files[0]) {
				              var reader = new FileReader();
					 reader.onload = function (e) {
		$('.upload-demo').addClass('ready');				        $('#cropImagePop').modal('show');
		 rawImg = e.target.result;
					          }					        reader.readAsDataURL(input.files[0]);
					        }
					        else {
			   swal("Sorry - you're browser doesn't support the FileReader API");
						    }
						}
		$uploadCrop = $('#upload-demo').croppie({
							viewport: {
								width: 150,
								height: 200,
							},
							enforceBoundary: false,
							enableExif: true
						});
						$('#cropImagePop').on('shown.bs.modal', function(){			
				$uploadCrop.croppie('bind', {
				        		url: rawImg
				        	}).then(function(){
				   console.log('jQuery bind complete');
				        	});
						});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();																								 $('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {			$uploadCrop.croppie('result', {
						type: 'base64',
						format: 'jpeg',
						size: {width: 150, height: 200}
					}).then(function (resp) {
				$('#item-img-output').attr('src', resp);						$('#cropImagePop').modal('hide');
							});
						});
				    </script>
</body>
</html>

Explanation:

In the above example, we created an example of how to crop an image. Firstly we upload an image then we can crop the image with the help of the crop button.

Output:

Following is the output of this example.

After cropping an image.

Example 2:

<! DOCTYPE html>
<html>
<head>
	<title>
	 jQuery crop plugin Example 
</title>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<link href = "https://foliotek.github.io/Croppie/croppie.css" rel = "stylesheet"> 
<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://foliotek.github.io/Croppie/croppie.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> </script> 
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
.page {
	margin: 1em auto;
	max-width: 768px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	height: 100%;
}
.box {
	padding: 0.5em;
	width: 100%;
	margin: 0.5em;
}
.box-2 {
	padding: 0.5em;
	width: calc(100%/2 - 1em);
}
.options label {
	width: 4em;
	padding: 0.5em 1em;
}
.options input {
	width: 4em;
	padding: 0.5em 1em;
}
.btn {
	background: white;
	color: black;
	border: 1px solid black;
	padding: 0.5em 1em;
	text-decoration: none;
	margin: 0.8em 0.3em;
	display: inline-block;
	cursor: pointer;
}
.hide {
	display: none;
}
img {
	max-width: 100%;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
</head>
<body>
	<h1>
	Example 
</h1>
<h2> 
	jQuery crop plugin
</h2>
	<main class = "page">
	<h2> Upload ,Crop and save. </h2>
	<div class = "box">
		<input type = "file" id = "file-input">
	</div>
	<div class = "box-2">
		<div class = "result"> </div>
	</div>
	<div class = "box-2 img-result hide">
		<img class = "cropped" src = " " alt = " ">
	</div>
	<div class = "box">
		<div class = "options hide">
			<label> Width </label>
			<input type = "number" class = "img-w" value = "300" min = "100" max = "1200" />
		</div>
		<button class = "btn save hide"> Save </button>
	
		<a href = "" class = "btn download hide"> Download </a>
	</div>
</main>
	 <script type = "text/javascript">
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';

upload.addEventListener('change', (e) => {
  if (e.target.files.length) {
    const reader = new FileReader();
    reader.onload = (e)=> {
      if(e.target.result){
				let img = document.createElement('img');
				img.id = 'image';
				img.src = e.target.result
				result.innerHTML = '';
                           result.appendChild(img);
					save.classList.remove('hide');
				options.classList.remove('hide');
				cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});
save.addEventListener('click',(e)=>{
  e.preventDefault();
  let imgSrc = cropper.getCroppedCanvas({
		width: img_w.value	
}).toDataURL();
  cropped.classList.remove('hide');
	img_result.classList.remove('hide');
  cropped.src = imgSrc;
  dwn.classList.remove('hide');
  dwn.download = 'imagename.png';
  dwn.setAttribute('href',imgSrc);
});
    </script>
</body>
</html>

Explanation:

In the above example, we created an example of how to crop an image. Firstly we drag or upload an image then we can crop the image with the help of the crop button. In this, we can also save the cropped image.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>
<html>
<head>
	<title>
	 jQuery crop plugin Example 
</title>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<link href = "https://foliotek.github.io/Croppie/croppie.css" rel = "stylesheet"> 
<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "https://foliotek.github.io/Croppie/croppie.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> </script> 

<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
body {
    padding: 20px;
    text-align: center;
    color: #111;
    background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
img {
    max-width: 100%;
}
section {
    height: 100%;
}
.hidden {
    display: none;
}
.drop {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: Lobster, Arial, serif;
    font-size: 30px;
    color: #333;
    background-color: rgba(255,255,255,.2);
    border: 5px dashed rgba(51,51,51,.4);
    cursor: pointer;
    transition-properties: border;
    transition-duration: 0.2s;
    &.dragging,
    &:hover {
        border-color: rgba(51,51,51,.8);
    }
    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: "Ubuntu";
    font-size: 16px;
    color: #fff;
    background-image: linear-gradient(to bottom, #c92437 0%, darken(#c92437, 10%) 100%);
    border: 0;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.3);
  
    .fa:first-child {
        margin-right: 5px; 
    }
}
.thumbnail {
    display: inline-block;
    margin: auto;
    padding: 5px;
    background-color: rgba(255,255,255,.4);
    border-radius: 5px;
  
    img {
        display: block;
        border-radius: 5px;
    }
}
@import url('https://fonts.googleapis.com/css?family=Catamaran');

h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
</head>
<body>
	<h1>
	Example 
</h1>
<h2> 
	jquery crop plugin
</h2>
<section id = "sectionDragAndDrop">
    <div class = "drop" id = "drop">
        <p> Drag & drop or click here to upload an image. </p>
    </div>
    <input class = "file-upload hidden" id = "fileUpload" type = "file">
</section>
<section class = "hidden" id = "sectionResize">
    <div class = "image-resize" id = "imageResize"> </div>
  <button class = "btn" id = "crop"> <span class = 'fa fa-crop'> </span> Crop </button>
</section>
<section class = "hidden" id = "sectionThumbnail">
    <div class = "thumbnail" id = "thumbnail"> </div>
</section>
	 <script type = "text/javascript">
      $('#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 < 200 || img.height < 200) {
                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) {
    $(originalImage).attr('id', 'fullImage');
    $('#imageResize').html(originalImage);
    $('#sectionDragAndDrop').addClass('hidden');
    $('#sectionResize').removeClass('hidden');
    var newImage = new imageCrop('#fullImage', 200, 200);
    $('#crop').on('click', function() {
        var results = newImage.crop();
        $('#thumbnail').html(results.img);
        $('#sectionResize').addClass('hidden');
        $('#sectionThumbnail').removeClass('hidden');
    });
}
    </script>
</body>
</html>

Explanation:

In the above example, we created an example of how to crop an image. Firstly we drag or upload an image then we can crop the image with the help of the crop button.

Output:

Following is the output of this example.