[原创]图片区域截取缩放插件 jQuery imgCut

结合这两篇文章而写的
利用jQuery UI 实现图片部份截取
利用jQuery UI 实现图片局部放大

调用需求

<link type="text/css" href="redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.imgcut.js"></script>
调用

$(selector).imgCut(options);
选项
top:0, //框框初始位置
left:0,//框框初始位置
width:100, //框框大小
height:100,//框框大小
imageWidth:400,//图片宽度
imageHeight:400,//图片高度
minHeight:30,//框框最小
minWidth:30,//框框最小
zoom:1,//缩放倍数
border:{border:'solid 2px blue'},//框框CSS
dragopts:{}, //拖动选项，请参考jquery官方UI
resizeopts:{}, //大小选项，请参考jquery官方UI
idprox:'imgcut' //id前缀（当一个页面调用多次此UI时使用)
src:"abc.jpg" //图片
obj:"#obj" //截取后的图片存放处（为jquery的selector)

HTML

<div id='c'></div>
<div id='o' style='top:500px'></div>
范例

$("#c").imgCut({
src:"1.jpg",
imageWidth:732,//图片大小
imageHeight:458,//图片大小
zoom:2,//放大两倍
obj:"#o" //缩放后的selector
});
演示

下载