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

演示

下载

转载于:https://www.cnblogs.com/fdszlzl/archive/2009/07/24/1529810.html