Jquery图片裁剪插件
- WBOYOriginal
- 2016-06-07 11:43:051537browse
来自互联网，整理分享有
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br>
<br>
<br>
<meta>
<br>
<link>
<br>
<style> <br />
body{font-family: Arial,sans-serif;}<br />
.demo{background: #eee;border: solid 2px #ddd;border-radius: 4px;padding: 0.6em;height:380px; width:750px;}<br />
div.frame{background: #fff;padding: 0.8em;border: solid 2px #ddd;}<br />
.demo table td{padding-left: 1em;}<br />
.demo table td input{width: 4em;text-align: right}<br />
.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} <br />
</style>
<br>
<br>
<br>
<script></script><br>
<script></script><br>
<script><br />
function preview(img, selection) {<br />
if (!selection.width || !selection.height)<br />
return;<br />
<br />
var scaleX = 100 / selection.width;<br />
var scaleY = 100 / selection.height;<br />
<br />
$('#preview img').css({<br />
width: Math.round(scaleX * 300),<br />
height: Math.round(scaleY * 300),<br />
marginLeft: -Math.round(scaleX * selection.x1),<br />
marginTop: -Math.round(scaleY * selection.y1)<br />
});<br />
<br />
$('#x1').val(selection.x1);<br />
$('#y1').val(selection.y1);<br />
$('#x2').val(selection.x2);<br />
$('#y2').val(selection.y2);<br />
$('#w').val(selection.width);<br />
$('#h').val(selection.height); <br />
}<br />
<br />
$(function () {<br />
$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,<br />
fadeSpeed: 200, onSelectChange: preview });<br />
});<br />
</script><br>
<div>
<br>
<div>
<br>
<p><br>
<b>大图</b> 选取：左击不放拖曳光标 取消：选取区外左击光标<br>
</p>
<br>
<br>
<div>
<br>
<img alt="Jquery图片裁剪插件" ><br>
</div>
<br>
</div>
<br>
<br>
<div>
<br>
<p><br>
预览：<br>
</p>
<br>
<br>
<div>
<br>
<div>
<br>
<img alt="Jquery图片裁剪插件" ><br>
</div>
<br>
</div>
<br>
<br>
<table>
<br>
<thead>
<br>
<tr>
<br>
<th>
<br>
坐标：<br>
</th>
<br>
<th>
<br>
宽高：<br>
</th>
<br>
</tr>
<br>
</thead>
<br>
<tbody>
<br>
<tr>
<br>
<td><b>X<sub>1</sub>:</b></td>
<br>
<td><input></td>
<br>
<td><b>宽:</b></td>
<br>
<td><input></td>
<br>
</tr>
<br>
<tr>
<br>
<td><b>Y<sub>1</sub>:</b></td>
<br>
<td><input></td>
<br>
<td><b>高:</b></td>
<br>
<td><input></td>
<br>
</tr>
<br>
<tr>
<br>
<td><b>X<sub>2</sub>:</b></td>
<br>
<td><input></td>
<br>
<td><input></td>
<br>
</tr>
<br>
<tr>
<br>
<td><b>Y<sub>2</sub>:</b></td>
<br>
<td><input></td>
<br>
<td><input></td>
<br>
</tr>
<br>
</tbody>
<br>
</table>
<br>
</div>
<br>
</div>
<br>
<br>
imgareaselect.rar
( 96.25 KB 下载：234 次 )
AD：真正免费，域名+虚机+企业邮箱=0元