利用jQuery UI 实现图片部份截取

图示



使用到的jquery UI有draggable,resizable

HTML
id="quen" 为截取框
id="c" 为整个图片框
id="e" 为截取后的框

< div  style ='width:732px;height:458px'  id ='c' >
     < div  id ='quen'  style ='position:absolute;top:0px;left:0px;border:solid  2px blue;width:200px;height:200px' >
         < div  id ='quen2'  style ='background:red;width:100%;height:100%' ></ div >
     </ div >
     < img  src ='1.jpg'  />
</ div >
< br />< br />< br />
< div  style ='position:absolute;overflow:hidden;width:200px;height:200px' >
     < div  id ='e'  style ='position:relative;' >
         < img  src ='1.jpg'  />
     </ div >
</ div >

JS

$(function() {
    $( " #quen2 " ).css({opacity: 0 });  // 初始化移动框为透明
    $( " #quen " ).css({top:$( " #c img " ).offset().top,left:$( " #c img " ).offset().left})  // 移动框的初始位置放在图片顶部
    .draggable({
        containment: " parent " ,  // 只能在父元素中拖动
        drag:function(e,ui){
             // 动态改变取图框的位置
            $( " #e " ).css({left: " - " + ui.position.left + " px " ,top: " - " + ui.position.top + " px " });
        }
    })
    .resizable({
        handles: " n,e,s,w,se,sw,ne,nw " ,
        minHeight: 30 ,
        minWidth: 30 ,
        maxHeight: 458 ,
        maxWidth: 732 ,
        resize:function(e,ui){
             // 动态改变图框的大小
            $( " #e " ).parent().css({width:ui.size.width,height:ui.size.height});
        }
    });
});

结果演示
下载范例