[原创]图片区域截取缩放插件 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
});

演示

下载