Jcropæ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ

Jcropæ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æjQueryçã

å¨<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æ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ

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æ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ

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æ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ

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>

ææå¾:

Jcropæ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ

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 ?

$(function(){
//äºä»¶å¤ç
$("#demoImage").Jcrop(
{
onSelect:showCoords//å½éä¸åºåçæ¶åï¼æ§è¡å¯¹åºçåè°å½æ°
}
);
}
);
functionshowCoords(c){
$("#txtX1").val(c.x);//å¾å°éä¸åºåå·¦ä¸è§æ¨ªåæ
$("#txtY1").val(c.y);//å¾å°éä¸åºåå·¦ä¸è§çºµåæ
$("#txtX2").val(c.x2);//å¾å°éä¸åºåå³ä¸è§æ¨ªåæ
$("#txtY2").val(c.y2);//å¾å°éä¸åºåå³ä¸è§çºµåæ
$("#txtWidth").val(c.w);//å¾å°éä¸åºåçå®½åº¦
$("#txtHeight").val(c.h);//å¾å°éä¸åºåçé«åº¦
}

Jcropæ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ

相关推荐

Jcropæ¯ä¸ä¸ªåè½å¼ºå¤§çå¾åè£åªå¼æ