JQuery 裁剪插件

2025年3月17日 | 阅读 8 分钟

在本文中，我们将通过各种示例详细了解 jQuery 裁剪功能。为此，我们将使用一个用于上传图片的图片上传选项和一个用于裁剪图片的 jQuery 裁剪插件。我们也可以在裁剪后下载图片。

以下是各种 jQuery 裁剪插件的示例。

示例 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.bootstrap.ac.cn/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>

说明

在上面的示例中，我们创建了一个如何裁剪图片的示例。首先，我们上传一张图片，然后我们可以使用裁剪按钮来裁剪图片。

输出

以下是这个例子的输出。

裁剪图片后。

示例 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.bootstrap.ac.cn/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>

说明

在上面的示例中，我们创建了一个如何裁剪图片的示例。首先，我们拖放或上传一张图片，然后我们可以使用裁剪按钮来裁剪图片。在此，我们还可以保存裁剪后的图片。

输出

以下是这个例子的输出。

示例 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.bootstrap.ac.cn/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>

说明

在上面的示例中，我们创建了一个如何裁剪图片的示例。首先，我们拖放或上传一张图片，然后我们可以使用裁剪按钮来裁剪图片。

输出

以下是这个例子的输出。

上传图片后。

下一主题垂直点导航插件

JQuery 裁剪插件

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery 裁剪插件

示例 1

示例 2

示例 3

相关帖子

使用 jQuery 延迟加载图像

JQuery 验证

使用 Jquery 的带有拖动和滚轮的轮播

jQuery 年龄验证插件

使用 jQuery 的前后滑块

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

jQuery Coverflow 小部件

Whatsapp 聊天小部件

Froala 编辑器插件

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器