截取图片组件

css:

body{background: #333;margin:0;padding:0;}
            .clipImgBox{position: absolute;top:0;left:0;width:460px;height:360px;}
            .clipImgBox .clipImgBoxmain{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index: 2;cursor: move}
            .clipImgBox .minDiv{width:8px;height:8px;background: #fff;font-size: 0;position: absolute;}
            .clipImgBox .minDiv.left-up{top:-4px;left: -4px;cursor:nw-resize;}
            .clipImgBox .minDiv.left{top:50%;margin-top:-4px;left: -4px;cursor:e-resize;}
            .clipImgBox .minDiv.left-down{bottom:-4px;left: -4px;cursor:sw-resize;}
            .clipImgBox .minDiv.top{top:-4px;left: 50%;margin-left:-4px;cursor:n-resize;}
            .clipImgBox .minDiv.right-up{top:-4px;right: -4px;cursor:ne-resize;}
            .clipImgBox .minDiv.right{top:50%;margin-top:-4px;right: -4px;cursor:e-resize;}
            .clipImgBox .minDiv.right-down{bottom:-4px;right: -4px;cursor:se-resize;}
            .clipImgBox .minDiv.bottom{bottom:-4px;left: 50%;margin-left:-4px;cursor:s-resize;}
            
            .clipImgBox-preview img,.clipImgBox img{position: absolute;z-index: 1}
            .clipImgBox .img1{opacity: 0.5}
            .clipImgBox .img2{clip:rect(0px,20px,100px,100px);}

            .clipImgBox-preview{position: absolute;top:100px;top:0;left:0;height:360px;}
            .clipImgBox-preview #img3{position: absolute;top:0;left:0;}

js:

/**
*  参数:
    imgPath  图片路径
    getPosObj:  数组  两个参数  触发对象String  触发函数function
    boxPosition: 容器的定位方式，相当于css的position
    返回截取位置对象，左上角坐标和宽高
**/

;(function(factory){
    'use strict';
    if(typeof define == 'function' && (define.amd||define.cmd)){
        define(["jquery","jqeryUI"],factory);
    }else if(typeof exports == "object"){
        module.exports=factory();
    }else{
        factory()
    }
})(function(){
    //禁止选中
    document.onselectstart=new Function('event.returnValue=false;');

    function init($this,option){
        //初始化位置
    var imgW=$this.find(".img1").width(),
        imgH=$this.find(".img1").height();
    $this.find(".clipImgBox").width(imgW);
    $this.find(".clipImgBox").height(imgH);
    $this.find("#clipImgBox-preview").css({left:$this.find(".clipImgBox").offset().left+imgW+10});

    var boxPosition=option.boxPosition||"relative";
    $this.css({"height":imgH,"position":boxPosition});

    //截取位置
    var jPos={};

    var boxDiv = $this.find(".clipImgBox")[0];//外层容器
    var mainDiv = $this.find('.clipImgBoxmain')[0];//选择层
    var leftUpDiv = $this.find('#left-up')[0];//坐上角触点
    var leftDiv = $this.find('#left')[0];//左中间触点
    var leftDownDiv = $this.find('#left-down')[0];//左下角触点
    var upDiv = $this.find('#up')[0];//上中间触点
    var downDiv = $this.find('#down')[0];//下中间触点
    var rightUpDiv = $this.find('#right-up')[0];//右上角触点
    var rightDiv = $this.find('#right')[0];//右中间触点
    var rightDownDiv = $this.find('#right-down')[0];//右下角触点


    var ifBool = false;//判断鼠标是否按下
    var contact = "";//当前拖动的触点

/*
        事件区
*/
    $this.find(".clipImgBoxmain").draggable({ containment: 'parent' ,drag: setChoice});
    //鼠标按下-左上角
    $(leftUpDiv).on("mousedown",function(e){
        ifBool = true;
        contact = "leftUp";
        wMoveAndUp();
        return false;
    });
    //鼠标按下-左中间
    $(leftDiv).on("mousedown",function(e){
        
        ifBool = true;
        contact = "left";
        wMoveAndUp();
        return false;
    });
    //鼠标按下-左下角
    $(leftDownDiv).on("mousedown",function(e){
        
        ifBool = true;
        contact = "leftDown";
        wMoveAndUp();
        return false;
    });
    //鼠标按下-上边
    $(upDiv).on("mousedown" ,function(e){
        
        ifBool = true;
        contact = "up";
        wMoveAndUp();
        return false;
    });
    //鼠标按下-下边
    $(downDiv).on("mousedown" ,function(e){
        
        ifBool = true;
        contact = "down";
        wMoveAndUp();
        return false;
    });
    //鼠标按下-右上角
    $(rightUpDiv).on("mousedown" ,function(e){
        
        ifBool = true;
        contact = "rightUp";
        wMoveAndUp();
        return false;
    });
    //鼠标按下-右中间
    $(rightDiv).on("mousedown",function(e){
        
        ifBool = true;
        contact = "right";
        wMoveAndUp()
        return false;
    });
    //鼠标按下-右下角
    $(rightDownDiv).on("mousedown",function(e){
        ifBool = true;
        contact = "rightDown";
        wMoveAndUp();
        return false;
    });
    function wMoveAndUp(){
        //拖动
        $(dcument).on("mousemove.win",function(e){
            
            if(ifBool){
                switch(contact){
                    case "leftUp":leftMove(e);upMove(e);break;
                    case "left":leftMove(e);break;
                    case "leftDown":leftMove(e);downMove(e);break;
                    case "up":upMove(e);break;
                    case "down":downMove(e);break;
                    case "rightUp":rightMove(e);upMove(e);break;
                    case "right":rightMove(e);break;
                    case "rightDown":rightMove(e);downMove(e);break;
                    default:alert("操作错误！");
                }
            var width = mainDiv.offsetWidth;
            var height = mainDiv.offsetHeight;
            setChoice();
            }
            return false;
        });
        //鼠标松开
        $(dcument).on("mouseup.win",function(e){
            ifBool = false;
            contact = "";
            $(dcument).off(".win");
            return false;
        });
    }
    setChoice();//初始化选择区域可见





/*
        函数区
*/

        //左边拖动
        function leftMove(e){
            var x = e.clientX;//鼠标横坐标
            if(x < getPosition(boxDiv).left){
                x = getPosition(boxDiv).left;
            }
            var width = mainDiv.offsetWidth - 2;//选择层宽度
            var mainX = getPosition(leftUpDiv).left + 4;//左上角横坐标
            var addWidth = mainX - x;//拖动后应该增加的宽度

            //设置拖动后的宽高和位置
            mainDiv.style.width = (width + addWidth) + "px";
            mainDiv.style.left = mainDiv.offsetLeft - mainX + x + "px";
        }
        //上边拖动
        function upMove(e){
            var y = e.clientY;//鼠标纵坐标
            if(y < getPosition(boxDiv).top){
                y = getPosition(boxDiv).top;
            }
            var height = mainDiv.offsetHeight - 2;//选择层的高度
            var mainY = getPosition(leftUpDiv).top + 4;//左上角纵坐标
            var addHeight = mainY - y;//拖动后应该增加的高度
            
            //设置拖动后的宽高和位置
            mainDiv.style.height = (height + addHeight) + "px";
            mainDiv.style.top = mainDiv.offsetTop - mainY + y + "px"; //纵坐标减去增加的高度
        }
        //下边拖动
        function downMove(e){
            var y = e.clientY;//鼠标纵坐标
            if(y > getPosition(boxDiv).top + boxDiv.offsetHeight){
                y = getPosition(boxDiv).top + boxDiv.offsetHeight;
            }
            var height = mainDiv.offsetHeight - 2;//选择层的高度
            var mainY = getPosition(leftUpDiv).top + 4;//左上角纵坐标
            var addHeight = y - mainY - height;//拖动后应该增加的高度
            mainDiv.style.height = (height + addHeight) + "px";
        }
        //右边拖动
        function rightMove(e){
            var x = e.clientX;//鼠标横坐标
            if(x > getPosition(boxDiv).left + boxDiv.offsetWidth){
                x = getPosition(boxDiv).left + boxDiv.offsetWidth;
            }
            var width = mainDiv.offsetWidth - 2;//选择层宽度
            var mainX = getPosition(leftUpDiv).left + 4;//左上角横坐标
            var addWidth = x - width - mainX;//拖动后应该增加的宽度

            //设置拖动后的宽高和位置
            mainDiv.style.width = (width + addWidth) + "px";
        }
        //设置选择区域可见
        function setChoice(){
            var top = mainDiv.offsetTop;
            var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
            var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
            var left = mainDiv.offsetLeft;
            $this.find("#img2")[0].style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
            preview({"top":top,"right":right,"bottom":bottom,"left":left});

        }
        //获取元素的绝对位置
        function getPosition(node){
            var left = node.offsetLeft;
            var top = node.offsetTop;
            current = node.offsetParent; // 取得元素的offsetParent
            　// 一直循环直到根元素
        　　while (current != null) {
            　　left += current.offsetLeft;
            　　top += current.offsetTop;
            　　current = current.offsetParent;
        　　}
            return {"left":left,"top":top};
        }

        //预览
        function preview(view){
            jPos=view;
            var previewImg = $this.find("#img3")[0];
            previewImg.style.top = -view.top + "px";
            previewImg.style.left = -view.left + "px";
            previewImg.style.clip = "rect("+view.top+"px,"+view.right+"px,"+view.bottom+"px,"+view.left+"px)";
        }

        function getJpos(){
            var obj={};
            obj["top"]=jPos["top"]||0;
            obj["left"]=jPos["left"]||0;
            obj["height"]=(jPos["bottom"]||0)-(jPos["top"]||0);
            obj["width"]=(jPos["right"]||0)-(jPos["left"]||0);
            return obj;
        }
        if(option.getPosObj&&option.getPosObj.length==2){
            var optFn,optObj;
            for(var i=0;i<option.getPosObj.length;i++){
                if(typeof option.getPosObj[i]=="string"){
                    optObj=option.getPosObj[i];
                }else if(typeof option.getPosObj[i]=="function"){
                    optFn=option.getPosObj[i];
                }
            }
            if(!optFn||!optObj){
                return ;
            }
            $(optObj).on("click",function(){
                optFn(getJpos());
            });
    }
    }

    function htmlTemp($this,opt){
        var str='<div class="clipImgBox">
            <img class="img1" src="_src_"/>
            <img id="img2" class="img2" src="_src_"/>
            <div class="clipImgBoxmain" >
                <div id="left-up" class="minDiv left-up"></div>
                <div id="left" class="minDiv left"></div>
                <div id="left-down" class="minDiv left-down"></div>
                <div id="up" class="minDiv top"></div>
                <div id="right-up" class="minDiv right-up"></div>
                <div id="right" class="minDiv right"></div>
                <div id="right-down" class="minDiv right-down"></div>
                <div id="down" class="minDiv bottom"></div>
            </div>
        </div>
        <div id="clipImgBox-preview" class="clipImgBox-preview">
            <img id="img3" class="img3" src="_src_"/>
        </div>';
        $this.html(str.replace(/_src_/g,opt.imgPath||""));
        init($this,opt);
    }

    function imgLoading($this,opt){
        var oImg=$("<img />");
            oImg.attr("src",opt.imgPath||"");
            oImg.on("load",function(){
                htmlTemp($this,opt);
            });
            oImg.on("error",function(){
                console.error("图片路径错误！");
            });
    }

    $.fn.clipImg=function(option){
        if(!option){
            console.error("缺少参数！！！");
            return ;
        }
        imgLoading($(this),option);
    }
    return imgLoading;
});

例子:

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>效果图</title>
        <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <style type="text/css">
            body{background: #333;margin:0;padding:0;}
            .clipImgBox{position: absolute;top:0;left:0;width:460px;height:360px;}
            .clipImgBox .clipImgBoxmain{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index: 2;cursor: move}
            .clipImgBox .minDiv{width:8px;height:8px;background: #fff;font-size: 0;position: absolute;}
            .clipImgBox .minDiv.left-up{top:-4px;left: -4px;cursor:nw-resize;}
            .clipImgBox .minDiv.left{top:50%;margin-top:-4px;left: -4px;cursor:e-resize;}
            .clipImgBox .minDiv.left-down{bottom:-4px;left: -4px;cursor:sw-resize;}
            .clipImgBox .minDiv.top{top:-4px;left: 50%;margin-left:-4px;cursor:n-resize;}
            .clipImgBox .minDiv.right-up{top:-4px;right: -4px;cursor:ne-resize;}
            .clipImgBox .minDiv.right{top:50%;margin-top:-4px;right: -4px;cursor:e-resize;}
            .clipImgBox .minDiv.right-down{bottom:-4px;right: -4px;cursor:se-resize;}
            .clipImgBox .minDiv.bottom{bottom:-4px;left: 50%;margin-left:-4px;cursor:s-resize;}
            
            .clipImgBox-preview img,.clipImgBox img{position: absolute;z-index: 1}
            .clipImgBox .img1{opacity: 0.5}
            .clipImgBox .img2{clip:rect(0px,20px,100px,100px);}

            .clipImgBox-preview{position: absolute;top:100px;top:0;left:0;height:360px;}
            .clipImgBox-preview #img3{position: absolute;top:0;left:0;}
        </style>
    </head>
    <body>
    <div id="box">
    </div>
        <button id="getPos">获取</button>
<div id="box2">
    </div>
        <button id="getPos2">获取</button>

    </body>
</html>
<script>
function getPos(obj){
    console.log(obj);
}
function getPos2(obj){
    console.log(obj);
}

    $("#box").clipImg({imgPath:"1.jpg",getPosObj:[getPos,"#getPos"]});
    $("#box2").clipImg({imgPath:"2.jpg",getPosObj:[getPos2,"#getPos2"]});
</script>

它是基于jquery和jQueryUI做的。

使用jQueryUI是为了拖拽。