jQuery ShearPhoto 图像截取

ShearPhoto有以下特点
1:ShearPhoto 完美支持Linux Windows 服务器，国外空间等完美通过。
2:兼容IE6及所有浏览器！
3:ShearPhoto拖动拉伸超准，超流畅。
4：能自由设置截框比例，设置方法里面也有注释！打开handle.js文件找到 ”proportional“设置行，第一个参数进行设置 设置0表示不需要按比例，如设置3/4表示截框3/4的比例， 设置完成后，也需要对shearphoto.config.php这个后端文件相应设置，同样是找到"proportional"设置截框的比例，和JS端保持一致！

在线实例

实例演示

参数详解

Shear.config({ 
    /*---------------用户设置部份开始-----------------------------------------------------------------------*/ 
    url: "php/shearphoto.php", 
    //后端处理地址 
    scopeWidth: 500, 
    //可拖动范围宽  也就是"main"对象的初始大小   
    scopeHeight: 500, 
    //可拖动范围高  也就是"main"对象的初始大小   
    relat: publicRelat, 
    //请查看 id:"relat"对象  
    proportional: [1, //截框的宽高比例（宽除以高的比例值，这个设置其实就是3/4,不设比例请设为0，注意更改比例后，后端也要进行相应设置，否则系统会给你抱出错误） 
    100, //启动后的截框初始宽度 
    133.33333 //比例设置后，这个高度无效，由宽和比例来决定 
    ], 
    Min: 50, 
    //截框拉伸或拖拽不能少于多少PX 
    Max: 500, 
    //一开始启动时，图片的宽和高，有时候图片会很大的，必须要设置一下 
    Border: 1, 
    //截框的边框大小 
    BorderStyle: "solid", 
    //截框的边框类型，其实是引入CSS的border属性，和入CSS的border属性是一样的 
    BorderColor: "#04B7FB", 
    //截框的边框色彩 
    /*---------------用户设置部份结束-----------------------------------------------------------------------*/ 
    scope: document.getElementById("main"), 
    //范围对象  
    ImgDom: publicRelatImg[0], 
    //截图图片对象（小）   
    ImgMain: publicRelatImg[1], 
    //截图图片对象（大） 
    black: document.getElementById("black"), 
    //黑色遮层对象 
    form: document.getElementById("smallbox"), 
    //截框对象 
    ZoomDist: document.getElementById("ZoomDist"), 
    //放大工具条,可从HTML查看此对象，不作详细解释了 
    ZoomBar: document.getElementById("ZoomBar"), 
    //放大工具条，可从HTML查看此对象 
    to: { 
        BottomRight: document.getElementById("BottomRight"), 
        //拉伸点中右 
        TopRight: document.getElementById("TopRight"), 
        //拉伸点上右，下面如此类推，一共8点进行拉伸,下面不再作解释 
        Bottomleft: document.getElementById("Bottomleft"), 
        Topleft: document.getElementById("Topleft"), 
        Topmiddle: document.getElementById("Topmiddle"), 
        leftmiddle: document.getElementById("leftmiddle"), 
        Rightmiddle: document.getElementById("Rightmiddle"), 
        Bottommiddle: document.getElementById("Bottommiddle") 
    }, 
    SelectBox: document.getElementById("SelectBox"), 
    //选择图片方式的对象 
    Shearbar: document.getElementById("Shearbar"), 
    //截图工具条对象 
    UpFun: function() { //鼠标健松开时执行函数 
        Shear.MoveDiv.DivWHFun(); //把截框现时的宽高告诉JS     
    } 
});

云盘内容

注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。