<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
<style>
body{font-family: Arial,sans-serif;}
.demo{background: #eee;border: solid 2px #ddd;border-radius: 4px;padding: 0.6em;height:380px; width:750px;}
div.frame{background: #fff;padding: 0.8em;border: solid 2px #ddd;}
.demo table td{padding-left: 1em;}
.demo table td input{width: 4em;text-align: right}
.coolbg{-moz-border-bottom-colors:none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background: url("allbtbg2.gif") repeat scroll 0 0 #EFF7D0;border-color: -moz-use-text-color #ACACAC #ACACAC -moz-use-text-color;border-image: none;border-style: none solid solid none;border-width: medium 1px 1px medium;cursor: pointer;padding:2px 5px;font-size:12px}
</style>
</head>
<body onload="prettyPrint();">
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(function () {
$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
fadeSpeed: 200, onSelectChange: preview });
});
</script>
<div class="demo">
<div style="float: left; width:50%;">
<p class="instructions" style='font-size:12px'>
<b>大图</b> 选取：左击不放拖曳光标 取消：选取区外左击光标
</p>
<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
<img id="photo" src="flower2.jpg" style="width: 300px; height: 300px;"/>
</div>
</div>
<div style="float: left; width: 50%;">
<p style="font-size: 12px; font-weight: bold; padding-left:0.1em;margin-left:13px">
预览：
</p>
<div class="frame" style="margin: 0 1em; width: 100px; height: 100px;">
<div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
<img src="flower2.jpg" style="width: 100px; height: 100px;" />
</div>
</div>
<table style="margin-top:1em;">
<thead>
<tr>
<th colspan="2" style="font-size:12px; font-weight: bold; text-align: left; padding-left: 0.1em;">
坐标：
</th>
<th colspan="2" style="font-size:12px; font-weight: bold; text-align: left; padding-left: 0.1em;">
宽高：
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;font-size:12px"><b>X<sub>1</sub>:</b></td>
<td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
<td style="width: 20%;font-size:12px"><b>宽:</b></td>
<td><input type="text" value="-" id="w" /></td>
</tr>
<tr>
<td style="font-size:12px"><b>Y<sub>1</sub>:</b></td>
<td><input type="text" id="y1" value="-" /></td>
<td style="font-size:12px"><b>高:</b></td>
<td><input type="text" id="h" value="-" /></td>
</tr>
<tr>
<td style="font-size:12px"><b>X<sub>2</sub>:</b></td>
<td><input type="text" id="x2" value="-" /></td>
<td colspan='2'><input type="button" value='确定裁剪' class="coolbg" style="width:120px;text-align:center"/></td>
</tr>
<tr>
<td style="font-size:12px"><b>Y<sub>2</sub>:</b></td>
<td><input type="text" id="y2" value="-" /></td>
<td colspan='2'><input type="button" value='使用原图' class="coolbg" style="width:120px;text-align:center" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
imgareaselect.rar
( 96.25 KB 下载：268 次 )
