学着做自己，并优雅的放手不属于自己的。
前一篇文章已经跟大家讲述了如何利用JavaScript实现Web端图片裁剪功能。可能对大多数人来说，利用JavaScript去实现裁剪功能比较费事，那这一篇文章将给大家讲述如何通过Jcrop插件实现图片裁剪功能。
首先看一下裁剪的效果图：
Jcrop裁剪效果图
Jcrop简介
Jcrop是一个jQuery插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。Jcrop官网，以下是Jcrop的一些特性：
- 对所有图片均unobtrusively（无侵入的，保持DOM简洁）
- 支持宽高比例锁定
- 支持 minSize / maxSize设置
- 支持改变选区或移 动选区时的回调（Callback）
- 支持用键盘微调选 区
- 通过API创建互 动，比如动画效果
- 支持CSS样式
Jcrop使用
Jcrop的使用非常简单，只需要简单的四步就可以完成。
第一步：引入插件
Jcrop是依赖于jQuery，所以在引入 jquery.Jcrop.js之前要先引入jQuery.js。
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>
第二步：引入Jcrop的CSS样式
<link rel="stylesheet" href="css/jquery.Jcrop.css">
第三步：给IMG标签加上ID
这一步是要给目标图片（待裁剪图片）添加ID。
第四步：调用Jcrop
Jcrop的调用主要有两种方式：
jQuery('#cropbox').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
var api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
这里推荐大家使用第二种方式，将Jcrop生成的对象赋给一个全局变量，这样操作起来更灵活，如调用api.destroy();方法可以销毁 Jcorp，这样我们在实际使用中会更灵活一些，因为直接改变要裁剪图片的路径会导致Jcorp的出错，如果想要变更编辑的图片我们需要销毁Jcorp， 变更图片的属性后再次为图片附加Jcorp。
当然也可以完全不进行任何options参数设置，直接采用默认调用方法。
$("#element_id").Jcrop();
options参数说明
options参数非常多，这里提供一张表图来进行说明。
options参数表
API 接口
Jcrop提供的API也非常多，这里给出一些常用的接口。
- setImage(string) 设定（或改变）图像。例：jcrop_api.setImage(“newpic.jpg”)
- setOptions(object) 设定（或改变）参数，格式与初始化设置参数一样
- setSelect(array) 创建选框，参数格式为：[x,y,x2,y2]
- animateTo(array) 用动画效果创建选框，参数格式为：[x,y,x2,y2]
- release() 取消选框
- disable() 禁用 Jcrop。说明：已有选框不会被清除。
- enable() 启用 Jcrop
- destroy() 移除 Jcrop
- tellSelect() 获取选框的值（实际尺寸）。例子：console.log(jcrop_api.tellSelect())
- tellScaled() 获取选框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled())
- getBounds() 获取图片实际尺寸，格式为：[w,h]
- getWidgetSize() 获取图片显示尺寸，格式为：[w,h]
- getScaleFactor() 获取图片缩放的比例，格式为：[w,h]
实例
既然Jcrop已经介绍完了，到底该如何实现上图的裁剪效果呢？
一、布局
布局图
要完成这样的一个布局，主要分成两个部分。一部分是用来显示裁剪，而另外一部分是用来进行图片选择。
<body>
<%-- 裁剪图片布局 --%>
<div id="crop_image">
<div id="crop_image_top">
<h4>编辑图片</h4>
</div>
<div id="crop_image_content">
<!-- 预览 -->
<div id="preview-pane">
<div class="preview-container">
</div>
</div>
</div>
<div id="crop_image_bottom">
<input class="btn" type="button" value="取消">
<input id="submitBtn" class="btn" type="button" value="确定" onclick="saveCropImage()">
</div>
</div>
<!-- 上传图片表单 -->
<form id="uploadForm" action="">
<div id="uploadImage">
<a href="javascript:;" class="addImage">
<span>上传图片</span>
<input id="imgFile" type="file" name="imgFile">
</a>
</div>
</form>
</body>
CSS样式，这里只给出部分关键性样式。
<style type="text/css">
#crop_image {
float: left;
width: 55%;
background-color: #333;
user-select: none;
margin: 5% 20%;
border: 1px solid #DEDEDE;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#crop_image_top,#crop_image_bottom {
float: left;
width: 96%;
padding: 2%;
background-color: white;
}
/* 底部 */
#crop_image_bottom {
text-align: right;
}
#crop_image_bottom input {
height: 30px;
padding: 5px 15px;
border-radius: 3px;
border: none;
margin-left: 20px;
outline: none;
}
#submitBtn {
background-color: #40aff2;
color: white;
cursor: pointer;
}
#submitBtn:HOVER {
background-color: #409ff2;
}
/* 顶部 */
#crop_image_top h4 {
margin: 0;
padding: 0;
font-weight: normal;
}
/* 裁剪部分 */
#crop_image_content {
float: left;
position: relative;
text-align: center;
width: 92%;
margin: 4%;
}
/* 上传图片区域 */
#uploadForm {
float: left;
margin: -2% 20% 5% 20%;
}
#uploadImage {
position: relative;
width: 372px;
height: 202px;
background-color: #40aff2;
text-align: center;
}
#uploadImage #cropimg {
position: absolute;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
#uploadImage .addImage {
display: inline-block;
position: relative;
min-width: 80px;
height: 40px;
overflow: hidden;
padding: 0 30px;
margin: 81px auto;
border: none;
background-color: #F3F3F3;
color: #555;
font: 14px/40px 'MicroSoft Yahei', 'Simhei';
cursor: pointer;
text-align: center;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#uploadImage .addImage:HOVER {
background-color: #DEDEDE;
}
#uploadImage #imgFile
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 40px;
cursor: pointer;
cursor: hand;
border: none;
font-size: 0;
padding: 0;
/* older safari/Chrome browsers */
-webkit-opacity: 0;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0;
/* IE9 + etc...modern browsers */
opacity: 0;
/* IE 4-9 */
filter:alpha(opacity=0);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
#uploadImage #imgFile::-webkit-file-upload-button {
display: block;
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 40px;
cursor: pointer;
cursor: hand;
border: none;
font-size: 0;
padding: 0;
/* older safari/Chrome browsers */
-webkit-opacity: 0;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0;
/* IE9 + etc...modern browsers */
opacity: 0;
/* IE 4-9 */
filter:alpha(opacity=0);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
</style>
对于裁剪框样式，除了引入官方所提供的样式文件之后，还要添加如下样式，才能实现图中效果。
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
padding: 6px;
border: 1px rgba(0, 0, 0, .4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 250px;
height: 170px;
overflow: hidden;
}
</style>
二、实现
这里主要实现三个小功能：第一个是选择图片，第二个是裁剪预览，第三个是保存裁剪图片。在实现功能之前，首先引入相关js文件：
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
1、选择图片
当点击上传图片时，弹出图片选择框，选择图片之后会替换掉裁剪框内容。这里利用change方法，监听imgFile改变事件。实现图片预览方式有很多，这里只给出一种。
<%--上传图片并预览--%>
$('#imgFile').change(function(event) {
// 根据这个 <input> 获取文件的 HTML5 js对象
var files = event.target.files, file;
if (files && files.length > 0) {
// 获取目前上传的文件
file = files[0];
// 获取window的 URL工具
var URL = window.URL || window.webkitURL;
// 通过 file生成目标 url
var imgURL = URL.createObjectURL(file);
// 用这个URL产生一个 <img> 将其显示出来
if (jcrop_api) {
jcrop_api.setImage(imgURL);
}
$('#cropimg').attr('src', imgURL);
$('.jcrop-preview').attr('src', imgURL);
}
});
2、裁剪预览
要想实现预览效果需要实现Jcrop的onChange方法，实现方式如下。但是要注意一点，在进行预览的同时需要同时计算出裁剪框到图片左侧距离x，裁剪框到图片上侧距离y，以及裁剪框的宽度和高度。因为真正执行裁剪功能是后台，后台会根据这些参数对原图进行处理。
<script type="text/javascript">
var width;// 裁剪框的宽度
var height;// 裁剪框的高度
var x;// 相对于裁剪图片x左边
var y;// 相对于裁剪图片y左边
var jcrop_api;
// 实现裁剪
jQuery(function($) {
// 创建变量(在这个生命周期)的API和图像大小
var jcrop_api = null, boundx, boundy,
// 获取预览窗格相关信息
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(), ysize = $pcnt.height();
$('#target').Jcrop({
setSelect: [ 20, 20, 150, 150 ],
// allowResize:false,
onChange : updatePreview,
onSelect : updatePreview,
aspectRatio : xsize / ysize
}, function() {
// 使用API来获得真实的图像大小
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// jcrop_api变量中存储API
jcrop_api = this;
// 预览进入jcrop容器css定位
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
// 设置预览
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width : Math.round(rx * boundx) + 'px',
height : Math.round(ry * boundy) + 'px',
marginLeft : '-' + Math.round(rx * c.x) + 'px',
marginTop : '-' + Math.round(ry * c.y) + 'px'
});
}
// 赋值
x = c.x;
y = c.y;
width = c.w;
height = c.h;
};
});
</script>
3、保存裁剪图片
保存裁剪图片需要提交第二步所计算的四个参数，同时要将原图进行提交到后台。因为我们是通过一个form表单进行图片上传，所以可以利用Ajax提交相关数据或者直接提交表单即可。
<%--保存裁剪之后的图片--%>
function saveCropImage() {
// 需要获取裁剪之后，裁剪框的宽度和高度，以及裁剪框相对于裁剪图片的坐标位置
alert(width);
alert(height);
alert(x);
alert(y);
// Ajax提交
// form表单提交
};
微信公众号：ibooker爱书客
