Jcrop是一个功能强大的图像裁剪引擎

最新推荐文章于 2025-06-09 09:21:47 发布

iteye_4639

最新推荐文章于 2025-06-09 09:21:47 发布

阅读量100

点赞数

文章标签： java javascript ui ViewUI

Jcrop是一个用于图像裁剪的强大工具，通过集成到Web应用中，开发者可以轻松实现高级图像裁剪功能，无需牺牲性能和灵活性。本文提供了一个简单的入门教程，并展示了如何使用Jcrop进行图像裁剪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jcrop是一个功能强大的图像裁剪引擎jQuery的。

它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性（或编码，测试和调试的星期）。Jcrop还设有干净，组织良好的代码，在大多数现代的web浏览器效果很好。

在<HEAD>你需要加载必要文件的页面这包括：
jQuery库
Jcrop的Javascript
Jcrop CSS样式表
它应该是这个样子：

[html] view plain copy print ?

<scriptsrc="js/jquery.min.js"></SCRIPT>
<scriptsrc="js/jquery.Jcrop.min.js"></SCRIPT>
<linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>

入门第一个简单点的Demo:

[java] view plain copy print ?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
<title>Inserttitlehere</title>
<scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<scriptsrc="js/jquery.Jcrop.min.js"></script>
<linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>
<script>
jQuery(function(){
jQuery('#user_preview_img').Jcrop({
trackDocument:true
});
});
</script>
</head>
<body>
<imgalt=""src="images/area1/1.jpg"id="user_preview_img">
</body>
</html>

效果图：

jcrop简单的事件处理Demo:

[java] view plain copy print ?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
<title>Inserttitlehere</title>
<scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<scriptsrc="js/jquery.Jcrop.min.js"></script>
<linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>
<script>
jQuery(document).ready(function(){
jQuery('#user_preview_img').Jcrop({
onChange:showCoords,
onSelect:showCoords
});
});
//Simpleeventhandler,calledfromonChangeandonSelect
//eventhandlers,aspertheJcropinvocationabove
functionshowCoords(c)
{
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
</script>
</head>
<body>
<div><imgalt=""src="images/area1/1.jpg"id="user_preview_img"></div>
<formonsubmit="returnfalse;"class="coords">
<label>X1<inputtype="text"size="4"id="x1"name="x1"/></label>
<label>Y1<inputtype="text"size="4"id="y1"name="y1"/></label>
<label>X2<inputtype="text"size="4"id="x2"name="x2"/></label>
<label>Y2<inputtype="text"size="4"id="y2"name="y2"/></label>
<label>W<inputtype="text"size="4"id="w"name="w"/></label>
<label>H<inputtype="text"size="4"id="h"name="h"/></label>
</form>
</body>
</html>

效果图：

jcrop实例演示Demo3：

[java] view plain copy print ?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
<title>Inserttitlehere</title>
<scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<scriptsrc="js/jquery.Jcrop.min.js"></script>
<linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>
<script>
jQuery(document).ready(function(){
jQuery('#user_preview_img').Jcrop({
onChange:showCoords,
onSelect:showCoords,
bgColor:'red',
bgOpacity:.4,
setSelect:[100,100,50,50],
aspectRatio:16/9
});
});
//Simpleeventhandler,calledfromonChangeandonSelect
//eventhandlers,aspertheJcropinvocationabove
functionshowCoords(c)
{
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
</script>
</head>
<body>
<div><imgalt=""src="images/area1/1.jpg"id="user_preview_img"></div>
<formonsubmit="returnfalse;"class="coords">
<label>X1<inputtype="text"size="4"id="x1"name="x1"/></label>
<label>Y1<inputtype="text"size="4"id="y1"name="y1"/></label>
<label>X2<inputtype="text"size="4"id="x2"name="x2"/></label>
<label>Y2<inputtype="text"size="4"id="y2"name="y2"/></label>
<label>W<inputtype="text"size="4"id="w"name="w"/></label>
<label>H<inputtype="text"size="4"id="h"name="h"/></label>
</form>
</body>
</html>

效果图：

Jcrop实例Demo4:

[java] view plain copy print ?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
<title>Inserttitlehere</title>
<scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<scriptsrc="js/jquery.Jcrop.min.js"></script>
<linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>
<scripttype="text/javascript">
jQuery(function($){
//Createvariables(inthisscope)toholdtheAPIandimagesize
varjcrop_api,
boundx,
boundy,
//Grabsomeinformationaboutthepreviewpane
$preview=$('#preview-pane'),
$pcnt=$('#preview-pane.preview-container'),
$pimg=$('#preview-pane.preview-containerimg'),
xsize=$pcnt.width(),
ysize=$pcnt.height();
console.log('init',[xsize,ysize]);
$('#user_preview_img').Jcrop({
onChange:updatePreview,
onSelect:updatePreview,
aspectRatio:xsize/ysize
},function(){
//UsetheAPItogettherealimagesize
varbounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
//StoretheAPIinthejcrop_apivariable
jcrop_api=this;
//Movethepreviewintothejcropcontainerforcsspositioning
$preview.appendTo(jcrop_api.ui.holder);
});
functionupdatePreview(c)
{
if(parseInt(c.w)>0)
{
varrx=xsize/c.w;
varry=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'
});
}
};
});
</script>
<styletype="text/css">
/*Applythesestylesonlywhen#preview-panehas
beenplacedwithintheJcropwidget*/
.jcrop-holder#preview-pane{
display:block;
position:absolute;
z-index:2000;
top:10px;
right:-280px;
padding: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);
}
/*TheJavascriptcodewillsettheaspectratioofthecrop
areabasedonthesizeofthethumbnailpreview,
specifiedhere*/
#preview-pane.preview-container{
width:250px;
height:170px;
overflow:hidden;
}
</style>
</head>
<body>
<div><imgalt=""src="images/area1/1.jpg"id="user_preview_img"></div>
<divid="preview-pane">
<divclass="preview-container">
<imgsrc="images/area1/1.jpg"class="jcrop-preview"alt="Preview"/>
</div>
</div>
</body>
</html>

效果图:

注意：有关这些选项的对象的格式的几件事情：
文本值必须加引号（如'红'，'＃CCC“，”RGB（10,10,10）'）
数值，包括小数点，不应该被引用。
setSelect带有一个数组，这里表示为一个数组文本
aspectRatio可能是最简单的除以宽度/高度设置
后面没有逗号的最后一个选项

jQuery(function(){
});
全写为
jQuery(document).ready(function(){
});

3.常用选项设置 aspectRatio:选中区域按宽/高比，为1表示正方形。 minSize:最小的宽，高值。 maxSize:最大的宽，高值。 setSelect:设置初始选中区域。 bgColor:背景颜色 bgOpacity:背景透明度。 allowResize:是否允许改变选中区域大小。 allowMove:是否允许移动选中区域。

[java] view plain copy print ?

$(function(){
$("#demoImage").Jcrop({
aspectRatio:1,//选中区域宽高比为1，即选中区域为正方形
bgColor:"#ccc",//裁剪时背景颜色设为灰色
bgOpacity:0.1,//透明度设为0.1
allowResize:false,//不允许改变选中区域的大小
setSelect:[0,0,100,100]//初始化选中区域
}
);
}
);

4.api用法

varapi=$.Jcrop("#demoImage");
api.disable();//设置为禁用裁剪效果
api.enable();//设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]);//设置选中区域

[java] view plain copy print ?