<!DOCTYPE html>
<html lang="en">
<head>
<title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
$('#coords').on('keyup','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});
function updatePreview(c)
{
$('#x1').val(parseInt(c.x));
$('#y1').val(parseInt(c.y));
$('#x2').val(parseInt(c.x2));
$('#y2').val(parseInt(c.y2));
$('#w').val(parseInt(c.w));
$('#h').val(parseInt(c.h));
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'
});
}
};
});
</script>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<ul class="breadcrumb first">
<li><a href="index.html">Jcrop</a> <span class="divider">/</span></li>
<li><a href="index.html">Demos</a> <span class="divider">/</span></li>
<li class="active">Aspect Ratio with Preview Pane</li>
</ul>
<h1>Aspect Ratio with Preview Pane</h1>
</div>
<img src="images/sago.jpg" id="target" alt="[Jcrop Example]" />
<div id="preview-pane">
<div class="preview-container">
<img src="images/sago.jpg" class="jcrop-preview" alt="Preview" />
</div>
</div>
<form id="coords"
class="coords"
action="cut.jsp">
<div class="inline-labels">
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
<label>W <input type="text" size="4" id="w" name="w" /></label>
<label>H <input type="text" size="4" id="h" name="h" /></label>
</div>
<input type = "submit" value = "提交" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
PhotoEditor.zip （31个子文件） 
PhotoEditor 
.project 1KB .mymetadata 306B src WebRoot WEB-INF classes lib 
commons-io.jar 82KB commons-fileupload.jar 52KB web.xml 375B photocut.jsp 3KB cut.jsp 2KB
index.html 2KB upload.jsp 2KB index.jsp 347B images 
sagomod.png 77KB
pool.jpg 27KB sago.jpg 18KB sagomod.jpg 16KB tutorial2.html 4KB js jquery.Jcrop.js 41KB jquery.imgareaselect.min.js 11KB jquery.color.js 16KB jquery.min.js 91KB jquery-pack.js 30KB jquery.Jcrop.min.js 16KB META-INF MANIFEST.MF 39B cutpreview.jsp 459B css jquery.Jcrop.css 3KB demos.css 3KB main.css 120KB jcopselect.jsp 4KB uploadfiles cut-20100126235026.jpg 5KB sago.jpg 18KB 20100126235026.jpg 32KB .myeclipse .classpath 494B资源评论
scuxtt2014-11-18很不错，已经应用到工程中了
