裁剪图片

html实现图⽚裁剪,【前端】图⽚裁剪（⼆）Jcrop实现裁剪

学着做⾃⼰，并优雅的放⼿不属于⾃⼰的。

前⼀篇⽂章已经跟⼤家讲述了如何利⽤JavaScript实现Web端图⽚裁剪功能。可能对⼤多数⼈来说，利⽤JavaScript去实现裁剪功能⽐较

费事，那这⼀篇⽂章将给⼤家讲述如何通过Jcrop插件实现图⽚裁剪功能。

⾸先看⼀下裁剪的效果图：

Jcrop裁剪效果图

Jcrop简介

Jcrop是⼀个jQuery插件，它能为你的WEB应⽤程序快速简单地提供图⽚裁剪的功能。Jcrop官⽹，以下是Jcrop的⼀些特性：

对所有图⽚均unobtrusively(⽆侵⼊的，保持DOM简洁)

⽀持宽⾼⽐例锁定

⽀持minSize/maxSize设置

⽀持改变选区或移动选区时的回调(Callback)

⽀持⽤键盘微调选区

通过API创建互动，⽐如动画效果

⽀持CSS样式

Jcrop使⽤

Jcrop的使⽤⾮常简单，只需要简单的四步就可以完成。

第⼀步：引⼊插件

Jcrop是依赖于jQuery，所以在引⼊之前要先引⼊。

第⼆步：引⼊Jcrop的CSS样式

第三步：给IMG标签加上ID

这⼀步是要给⽬标图⽚(待裁剪图⽚)添加ID。

![]()

第四步：调⽤Jcrop

Jcrop的调⽤主要有两种⽅式：

jQuery('#cropbox').Jcrop({

onChange:showCoords,

onSelect:showCoords

});

varapi=$.Jcrop('#cropbox',{

onChange:showPreview,

onSelect:showPreview,

aspectRatio消防安全基础知识 :1

});

这⾥推荐⼤家使⽤第⼆种⽅式，将Jcrop⽣成的对象赋给⼀个全局变量，这样操作起来更灵活，如调⽤y();⽅法可以销毁Jcorp，

这样我们在实际使⽤中会更灵活⼀些，因为直接改变要裁剪图⽚的路径会导致Jcorp的出错，如果想要变更编辑的图⽚我们需要销毁

Jcorp，变更图⽚的属性后再次为图⽚附加Jcorp。

当然也可以完全不进⾏任何options参数设置，直接采⽤默认调⽤⽅法。

$("#element_id").Jcrop();

options参数说明

options参数⾮常多，这⾥提供⼀张表图来进⾏说明。

options参数表

API接⼝

Jcrop提供的API也⾮常多，这⾥给出⼀些常⽤的接⼝。

tImage(string)设定(或改变)图像。例：jcrop_ge(“”)

tOptions(object)设定(或改变)参数，格冰柜十大名牌排名榜 式与初始化设置参数⼀样

tSelect(array)创建选框，参数格式为：[x,y,x2,y2]

animateTo(array)⽤动画效果创建选框，参数格式为：[x,y,x2,y2]

relea()取消选框

disable()禁⽤Jcrop。说明：已有选框不会被清除。

enable()启⽤Jcrop

destroy()移除Jcrop

tellSelect()获取选框的值(实际尺⼨)。例⼦：(jcrop_lect())

tellScaled()获取选框的值(界⾯尺⼨)。例⼦：(jcrop_aled())

getBounds()获取图⽚实际尺⼨，格式为：[w,h]

getWidgetSize()获取图⽚显⽰尺⼨，格式为：[w,h]

getScaleFactor()获取图⽚缩放的⽐例，格式为：[w,h]

实例

既然Jcrop已经介绍完了，到底该如何实现上图的裁剪效果呢？

⼀、布局

布局图

要完成这样的⼀个布局，主要分成两个部分。⼀部分是⽤来显⽰裁剪，⽽另外⼀部分是⽤来进⾏图⽚选择。

编辑图⽚




上传图⽚

CSS样式，这⾥只给出部分关键性样式。

#crop_image{

float:left;

width:55%;

background-color:#333;

ur-lect:none;

margin:5%20%;

border:1pxsolid#DEDEDE;

-webkit-border-radius:6px;

-moz-border-radius:6px;

border-radius:6px;

-webkit-box-shadow:1px1px5px2pxrgba(0,0,0,0.2);

-moz-box-shadow:1px1px5px2pxrgba(0,0,0,0.2);

box-shadow:1px1px5px2pxrgba(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_bottominput{

height:30px;

padding:5px15px;

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_toph4{

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;

}

#ge{

display:inline-block;

position:relative;

min-width:80px;

height:40px;

overflow:hidden;

padding:030px;

margin:81pxauto;

border:none;

background-color:#F3F3F3;

color:#555;

font:14px/40px'MicroSoftYahei','Simhei';

cursor:pointer;

text-align:center;

text-decoration:none;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

}

#ge: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;

/*oldersafari/Chromebrow卡介苗是预防什么的 rs*/

-webkit-opacity:0;

/*NetscapeandOlderthanFirefox0.9*/

-moz-opacity:0;

/*Safari1.x(preWebKit!)⽼式khtml内核的Safari浏览器*/

-khtml-opacity:0;

/*dernbrowrs*/

opacity:0;

/*IE4-9*/

filter:alpha(opacity=0);

/*ThisworksinIE8&9too*/

-ms-filter:"progid:(Opacity=0)";

/*IE4-IE9*/

filter:progid:(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;

/*oldersafari/Chromebrowrs*/

-webkit-opacity:0;

/*NetscapeandOlderthanFirefox0.9*/

-moz-opacity:0;

/*Safari1.x(preWebKit!)⽼式khtml内核的Safari浏览器*/

-khtml-opacity:0;

/*dernbrowrs*/

opacity:0;

/*IE4-9*/

filter:alpha(opacity=0);

/*ThisworksinIE8&9too*/

-ms-filter:"progid:(Opacity=0)";

/*IE4-IE9*/

filter:progid:(Opacity=0);

}

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

/*Applythestylesonlywhen#preview-panehas

beenplacedwithintheJcropwidget*/

.jcrop-holder#preview-pane{

display:block;

position:absolute;

z-index:2000;

top:10px;

right:-280px;

pad世界杯四强 ding:6px;

border:1pxrgba(0,0,0,.4)solid;

background-color:white;

-webkit-border-radius:6px;

-moz-border-radius:6px;

border-radius:6px;

-webkit-box-shadow:1px1px5px2pxrgba(0,0,0,0.2);

-moz-box-shadow:1px1px5px2pxrgba(0,0,0,0.2);

box-shadow:1px1px5px2pxrgba(0,0,0,0.2);

}

/*TheJavascriptcodewillttheaspectratioofthecrop

areabadonthesizeofthethumbnailpreview,

specifiedhere*/

#w-container{

width:250px;

height:170px;

overflow:hidden;

}

⼆、实现

这⾥主要实现三个⼩功能：第⼀个是选择图⽚，第⼆个是裁剪预览，第三个是保存裁剪图⽚。在实现功能之前，⾸先引⼊相关js⽂件：

1、选择图⽚

当点击上传图⽚时，弹出图⽚选择框，选择图⽚之后会替换掉裁剪框内柠檬鸭 容。这⾥利⽤change⽅法，监听imgFile改变事件。实现图⽚预览⽅

式有很多，这⾥只给出⼀种。

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

//根据这个获取⽂件的HTML5js对象

varfiles=,file;

if(files&&>0){

//获取⽬前上传的⽂件

file=files[0];

//获取window的URL⼯具

varURL=||URL;

//通过file⽣成⽬标url

varimgURL=ObjectURL(file);

//⽤这个URL产⽣⼀个将其显⽰出来

if(jcrop_api){

jcrop_ge(imgURL);

}

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

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

}

});

2、裁剪预览

要想实现预览效果需要实现Jcrop的onChange⽅法，实现⽅式如下。但是要注意⼀点，在进⾏预览的同时需要同时计算出裁剪框到图⽚左

侧距离x，裁剪框到图⽚上侧距离y，以及裁剪框的宽度和⾼度。因为真正执⾏裁剪功能是后台，后台会根据这些参数对原图进⾏处理。

varwidth;//裁剪框的宽度

varheight;//裁剪框的⾼度

varx;//相对于裁剪图⽚x左边

vary;//相对于裁剪图⽚y左边

varjcrop_api;

//实现裁剪

jQuery(function($){

//创建变量(在这个⽣命周期)的API和图像⼤⼩

varjcrop_api=null,boundx,boundy,

//获取预览窗格相关信息

$preview=$('#preview-pane'),

$pcnt=$('#w-container'),

$pimg=$('#w-containerimg'),

xsize=$(),ysize=$();

$('#target').Jcrop({

tSelect:[20,20,150,150],

//allowResize:fal,

onChange:updatePreview,

onSelect:updatePreview,

aspectRatio:xsize/ysize

},function(){

//使⽤API来获得真实的图像⼤⼩

varbounds=nds();

boundx=bounds[0];

boundy=bounds[1];

//jcrop_api变量中存储API

jcrop_api=this;

//预览进⼊jcrop容器css定位

$To(jcrop_);

});

functionupdatePreview(c){

//设置预览

if(parInt(c.w)>0){

varrx=xsize/c.w;

varry=ysize/c.h;

$({

width:(rx*bo皮纳瑞罗 undx)+'px',

height:(ry*boundy)+'px',

marginLeft:'-'+(rx*c.x)+'px',

marginTop:'-'+(ry*c.y)+'px'

});

}

//赋值

x=c.x;

y=c.y;

width=c.w;

height=c.h;

};

});

3、保存裁剪图⽚

保存裁剪图⽚需要提交第⼆步所计算的四个参数，同时要将原图进⾏提交到后台。因为我们是通过⼀个form表单进⾏图⽚上传，所以可以

利⽤Ajax提交相关数据或者直接提交表单即可。

functionsaveCropImage(){

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

alert(width);

alert(height);

alert(x);

alert(y);

//Ajax提交

//form表单提交

};

微信公众号：ibooker爱书客