学着做自己，并优雅的放手不属于自己的。

前一篇文章已经跟大家讲述了如何利用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。

第二步：引入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已经介绍完了，到底该如何实现上图的裁剪效果呢？

一、布局

布局图

要完成这样的一个布局，主要分成两个部分。一部分是用来显示裁剪，而另外一部分是用来进行图片选择。

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);

}

对于裁剪框样式，除了引入官方所提供的样式文件之后，还要添加如下样式，才能实现图中效果。

/* 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;

}

二、实现

这里主要实现三个小功能：第一个是选择图片，第二个是裁剪预览，第三个是保存裁剪图片。在实现功能之前，首先引入相关js文件：

1、选择图片

当点击上传图片时，弹出图片选择框，选择图片之后会替换掉裁剪框内容。这里利用change方法，监听imgFile改变事件。实现图片预览方式有很多，这里只给出一种。

$('#imgFile').change(function(event) {

// 根据这个 获取文件的 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产生一个 将其显示出来

if (jcrop_api) {

jcrop_api.setImage(imgURL);

}

$('#cropimg').attr('src', imgURL);

$('.jcrop-preview').attr('src', imgURL);

}

});

2、裁剪预览

要想实现预览效果需要实现Jcrop的onChange方法，实现方式如下。但是要注意一点，在进行预览的同时需要同时计算出裁剪框到图片左侧距离x，裁剪框到图片上侧距离y，以及裁剪框的宽度和高度。因为真正执行裁剪功能是后台，后台会根据这些参数对原图进行处理。

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;

};

});

3、保存裁剪图片

保存裁剪图片需要提交第二步所计算的四个参数，同时要将原图进行提交到后台。因为我们是通过一个form表单进行图片上传，所以可以利用Ajax提交相关数据或者直接提交表单即可。

function saveCropImage() {

// 需要获取裁剪之后，裁剪框的宽度和高度，以及裁剪框相对于裁剪图片的坐标位置

alert(width);

alert(height);

alert(x);

alert(y);

// Ajax提交

// form表单提交

};

微信公众号：ibooker爱书客