图片切割器

最新推荐文章于 2023-04-03 01:36:13 发布
最新推荐文章于 2023-04-03 01:36:13 发布
阅读量524 收藏
点赞数
分类专栏： HTML+JQuer 文章标签： html 图片 界面 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bzd_111/article/details/50149293
版权

在Photoshop中有非常方便的图片切割工具，，然而对于我这种懒人，只能用用这种简单的工具，假装就模拟一下，，切割出一个图片，就可以了这个就是主要的界面了 图片好像是小米的最美女程序猿
这个是小米的最美女程序猿

  1. 页面框架
    图片切割器的页面框架比较简单，主题部分就是一张图片，但是实际上是两张图片重合在一起，进行操作时是第一张图片被切割，下面的图片就相当于是背景，其html代码如下
<div id="mypic">
        <img src="1.jpg" border="0" id="mypic1">
        <img src="1.jpg" border="0" id="mypic2">
</div>

在设计一下css结构

body{
    margin:0px; padding:0px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#statistics{
    position:absolute;
    top:30px;
    padding:0px; margin:0px;
}
#statistics span{
    text-align:left;
}

#picArea{
    position:absolute;
    top:50px;background:#000000;    /* 黑色背景 */
    padding:0px; margin:0px;
}

#mypic{
    position:absolute;
    padding:0px; margin:0px;
    left:0px; top:0px;
}
/* 两幅相同的图片，在同一个位置
   上面的图片用来显示选中部分，不变颜色
   下面那幅则通过透明，变黑
*/
#mypic1{
    position:absolute;
    /*clip:rect(50px,300px,400px,100px);*/
    z-index:2;
}
#mypic2{
    position:absolute;
    z-index:1;
    filter:alpha(opacity=50);   /* 位于下方的图片，设置透明度 */
    -moz-opacity:0.5;
    opacity:0.5;
}

2.选择的控制
在图片上点击鼠标，会出现一个选着框，选择框有9个点，，上下左右，上左、上右、下左、下右还有中间一个点，采用一个div大块和9个小图形，html代码如下

<div id="selectArea">
        <span id="square0"><img src="dot.gif" border="0" style="cursor:nw-resize;"></span>
        <span id="square1"><img src="dot.gif" border="0" style="cursor:n-resize;"></span>
        <span id="square2"><img src="dot.gif" border="0" style="cursor:ne-resize;"></span>
        <span id="square3"><img src="dot.gif" border="0" style="cursor:w-resize;"></span>
        <span id="square4"><img src="dot.gif" border="0" style="cursor:e-resize;"></span>
        <span id="square5"><img src="dot.gif" border="0" style="cursor:sw-resize;"></span>
        <span id="square6"><img src="dot.gif" border="0" style="cursor:s-resize;"></span>
        <span id="square7"><img src="dot.gif" border="0" style="cursor:se-resize;"></span>
        <span id="square8"><img src="middot.gif" border="0" style="cursor:move;"></span>
        <span id="squareIE"></span> <!-- 解决IE兼容性问题 -->
    </div>

对应的css结构如下

#selectArea span{
    padding:0px; margin:0px;
    position:absolute;
    background-color:#333333;
}
#selectArea span img{
    padding:0px; margin:0px;
    position:absolute;
}

3.显示选择的区域
就是单击鼠标会出现一个2中的选择框就是

加上一个监听鼠标的事件，然后移动鼠标的时候，每个人的习惯不一样（可能是右下到左上，左上到右下等），所以要判断是鼠标的移动方向，选择区域有left，top，height，width，不管怎么移动，肯定会有两个值是不变的 

var fnpicAreaDown, fnpicAreaMove, fnpicAreaUp;  //事件的函数名称
    //点击鼠标，出现虚线选区
    $("#picArea").bind("mousedown",fnpicAreaDown = function(e){
        var clickX = e.pageX-offsetX, clickY = e.pageY-offsetY;
        $("#selectArea").show().css({
            "left":clickX,
            "top":clickY,
            "height":"0px",
            "width":"0px"
        });
        //移动鼠标，该选区变大
        $("#picArea").bind("mousemove",fnpicAreaMove = function(e){
            //获取鼠标移动的相对
            var iX = e.pageX-offsetX-clickX;
            var iY = e.pageY-offsetY-clickY;
            //首先判断不能移动出picArea，兼容IE
            if(e.pageX>=offsetX && e.pageX<=offsetX+$(this).width()){
                //其次，允许从下往上拖动
                if(iX>=0)
                    $("#selectArea").css("width",iX);
                else
                    $("#selectArea").css({"width":-iX,"left":e.pageX-offsetX});
            }
            if(e.pageY>=offsetY && e.pageY<=offsetY+$(this).height()){
                if(iY>=0)
                    $("#selectArea").css("height",iY);
                else
                    $("#selectArea").css({"height":-iY,"top":e.pageY-offsetY});
            }
            moveNine(); //移动9个小方块
            return false;   //阻止浏览器的默认事件
        });
        return false;   //阻止浏览器的默认事件
    });
    //

选择完毕可以拖动选择框，既控制选择框的移动，也就是控制9个点移动`

function moveNine(){
    //移动那9个小方块
    var iSelectWidth = parseInt($("#selectArea").width());
    var iSelectHeight = parseInt($("#selectArea").height());
    $("#square0").css({"left":"-1px","top":"-1px"});
    $("#square1").css({"left":iSelectWidth/2-2,"top":"-1px"});
    $("#square2").css({"left":iSelectWidth-4,"top":"-1px"});
    $("#square3").css({"left":"-1px","top":iSelectHeight/2-2});
    $("#square4").css({"left":iSelectWidth-4,"top":iSelectHeight/2-2});
    $("#square5").css({"left":"-1px","top":iSelectHeight-4});
    $("#square6").css({"left":iSelectWidth/2-2,"top":iSelectHeight-4});
    $("#square7").css({"left":iSelectWidth-4,"top":iSelectHeight-4});
    $("#square8").css({"left":iSelectWidth/2-3,"top":iSelectHeight/2-3});

    //这个就是给IE用的，制造一个看不见的区域来让IE选择
    $("#squareIE").width(Math.abs(iSelectWidth-8)).height(Math.abs(iSelectHeight-8));
}

还有一个需要的注意的是，移动是时候不能移到图片的外边，得控制一下移动的区域，代码如下

$("#picArea").bind("mousemove",fnselectMove = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            //水平方向不能移动出去
            if(DivLeft+DivWidth+moveOffsetX>=parentWidth-2)
                $("#selectArea").css({"left":parentWidth-DivWidth-2});
            else if(DivLeft+moveOffsetX<0)
                $("#selectArea").css({"left":"0px"});
            else
                $("#selectArea").css({"left":DivLeft+moveOffsetX});

            //竖直方向也不能移动出去
            if(DivTop+DivHeight+moveOffsetY>=parentHeight-2)
                $("#selectArea").css({"top":parentHeight-DivHeight-2});
            else if(DivTop+moveOffsetY<0)
                $("#selectArea").css({"top":"0px"});
            else
                $("#selectArea").css({"top":DivTop+moveOffsetY});
            return false;
        });
        return false;
    });

剪切图片的cropPic()方法采用的是css中clip的方法

function cropPic(){
    var tempSelectArea = $("#selectArea");
    //记录选区的四个点，用于切割
    var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
    var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
    var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
    var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
    $("#mypic1").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
}

4.改变选着区域的大小
选择的区域不仅可以移动，，而且还可以拖动那8个小点改变图片的大小，下面具体展示左上角的点为例，在移动时left、top和width、height都在变化，所以要判断一下

var fn0Move;
    //左上角的小方块
    $("#square0").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn0Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            //水平方向左移不能出图片，右移不能把选区宽度变成负数
            if(e.pageX>=offsetX){
                if(DivLeft+moveOffsetX<=0)
                    $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
                else if(moveOffsetX>DivWidth-10)
                    $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
                else
                    $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
            }

            //竖直方向上移不能出图片，下移不能把选区高度变成负数
            if(e.pageY>=offsetY){
                if(DivTop+moveOffsetY<=0)
                    $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
                else if(moveOffsetY>DivHeight-10)
                    $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
                else
                    $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
            }       
            moveNine(); //同时移动其它方块
            return false;
        });
        return false;
    });
    $("#square0").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn0Move);
        cropPic();  //重新剪切图片
        return false;
    });

5.双击截图
最后选择的区域满意了，就可双击确定截取的图片了

$("#selectArea").bind("dblclick",function(e){
        var tempSelectArea = $(this);
        //记录选区的四个点，用于切割
        var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
        var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
        var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
        var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
        //下层图片剪切，final
        $("#mypic2").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
        //背景色变成白色
        $("#picArea").css("backgroundColor","#FFFFFF");
        tempSelectArea.hide();
    });

6.最终程序
html程序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Crop Picture</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="19.js"></script>
<link href="19.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="statistics">
    size:<span id="showSize"></span>&nbsp;&nbsp;
    x:<span id="xPos"></span>&nbsp;&nbsp;
    y:<span id="yPos"></span>&nbsp;&nbsp;
</div>
<div id="picArea">
    <div id="mypic">
        <img src="1.jpg" border="0" id="mypic1">
        <img src="1.jpg" border="0" id="mypic2">
    </div>
    <div id="selectArea">
        <span id="square0"><img src="dot.gif" border="0" style="cursor:nw-resize;"></span>
        <span id="square1"><img src="dot.gif" border="0" style="cursor:n-resize;"></span>
        <span id="square2"><img src="dot.gif" border="0" style="cursor:ne-resize;"></span>
        <span id="square3"><img src="dot.gif" border="0" style="cursor:w-resize;"></span>
        <span id="square4"><img src="dot.gif" border="0" style="cursor:e-resize;"></span>
        <span id="square5"><img src="dot.gif" border="0" style="cursor:sw-resize;"></span>
        <span id="square6"><img src="dot.gif" border="0" style="cursor:s-resize;"></span>
        <span id="square7"><img src="dot.gif" border="0" style="cursor:se-resize;"></span>
        <span id="square8"><img src="middot.gif" border="0" style="cursor:move;"></span>
        <span id="squareIE"></span> <!-- 解决IE兼容性问题 -->
    </div>
</div>
</body>
</html>

css程序

body{
    margin:0px; padding:0px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#statistics{
    position:absolute;
    top:30px;
    padding:0px; margin:0px;
}
#statistics span{
    text-align:left;
}

#picArea{
    position:absolute;
    top:50px;background:#000000;    /* 黑色背景 */
    padding:0px; margin:0px;
}

#mypic{
    position:absolute;
    padding:0px; margin:0px;
    left:0px; top:0px;
}
/* 两幅相同的图片，在同一个位置
   上面的图片用来显示选中部分，不变颜色
   下面那幅则通过透明，变黑
*/
#mypic1{
    position:absolute;
    /*clip:rect(50px,300px,400px,100px);*/
    z-index:2;
}
#mypic2{
    position:absolute;
    z-index:1;
    filter:alpha(opacity=50);   /* 位于下方的图片，设置透明度 */
    -moz-opacity:0.5;
    opacity:0.5;
}

#selectArea{
    border:1px dashed #FFFFFF;
    position:absolute;
    z-index:5;
    display:none;   /* 初始化时隐藏选区 */
    margin:0px; padding:0px;
    cursor:move;
}
#selectArea span{
    padding:0px; margin:0px;
    position:absolute;
    background-color:#333333;
}
#selectArea span img{
    padding:0px; margin:0px;
    position:absolute;
}
#squareIE{
    /*这个就是给IE用的，制造一个看不见的区域来让IE选择*/
    background-color:#000000;
    position:absolute;
    left:4px; top:4px;
    filter:alpha(opacity=0); /* 透明度设置为0 */
    -moz-opacity:0;
}

js程序

$(function(){
    //初始化图片区域
    var myimg = new Image(); 
    myimg.src = $("#mypic2").attr("src"); 
    //输出图片数据
    $("#showSize").html(myimg.width + "×" + myimg.height);

    //初始化图片的位置，根据图片的宽度调整左右
    $("#statistics, #picArea").css("left",$(window).width()/2-myimg.width/2);
    $("#picArea").width(myimg.width).height(myimg.height); 
    var parentWidth = parseInt($("#picArea").width());
    var parentHeight = parseInt($("#picArea").height());

    //显示鼠标的相对于图片的坐标（左上角为(0,0)）
    var offsetX = parseInt($("#picArea").css("left"));
    var offsetY = parseInt($("#picArea").css("top"));
    $("#mypic").bind("mousemove",function(e){
        $("#xPos").text(e.pageX-offsetX);
        $("#yPos").text(e.pageY-offsetY);
    });

    var fnpicAreaDown, fnpicAreaMove, fnpicAreaUp;  //事件的函数名称
    //点击鼠标，出现虚线选区
    $("#picArea").bind("mousedown",fnpicAreaDown = function(e){
        var clickX = e.pageX-offsetX, clickY = e.pageY-offsetY;
        $("#selectArea").show().css({
            "left":clickX,
            "top":clickY,
            "height":"0px",
            "width":"0px"
        });
        //移动鼠标，该选区变大
        $("#picArea").bind("mousemove",fnpicAreaMove = function(e){
            //获取鼠标移动的相对
            var iX = e.pageX-offsetX-clickX;
            var iY = e.pageY-offsetY-clickY;
            //首先判断不能移动出picArea，兼容IE
            if(e.pageX>=offsetX && e.pageX<=offsetX+$(this).width()){
                //其次，允许从下往上拖动
                if(iX>=0)
                    $("#selectArea").css("width",iX);
                else
                    $("#selectArea").css({"width":-iX,"left":e.pageX-offsetX});
            }
            if(e.pageY>=offsetY && e.pageY<=offsetY+$(this).height()){
                if(iY>=0)
                    $("#selectArea").css("height",iY);
                else
                    $("#selectArea").css({"height":-iY,"top":e.pageY-offsetY});
            }
            moveNine(); //移动9个小方块
            return false;   //阻止浏览器的默认事件
        });
        return false;   //阻止浏览器的默认事件
    });
    //松开鼠标，删除出现选区的相关事件
    $("#picArea").bind("mouseup",fnpicAreaUp = function(e){
        $("#picArea").unbind("mousedown",fnpicAreaDown);
        $("#picArea").unbind("mousemove",fnpicAreaMove);
        cropPic();  //剪切上层图片，实现四周阴影的效果
        $("#picArea").unbind("mouseup",fnpicAreaUp);
        return false;
    });

    var DivWidth, DivHeight, DivLeft, DivTop;   //选区的宽、高、左位置、上位置

    var fnselectDown,fnselectMove;
    //点击移动选区，不能移出图片本身
    $("#selectArea").bind("mousedown",fnselectDown = function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fnselectMove = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            //水平方向不能移动出去
            if(DivLeft+DivWidth+moveOffsetX>=parentWidth-2)
                $("#selectArea").css({"left":parentWidth-DivWidth-2});
            else if(DivLeft+moveOffsetX<0)
                $("#selectArea").css({"left":"0px"});
            else
                $("#selectArea").css({"left":DivLeft+moveOffsetX});

            //竖直方向也不能移动出去
            if(DivTop+DivHeight+moveOffsetY>=parentHeight-2)
                $("#selectArea").css({"top":parentHeight-DivHeight-2});
            else if(DivTop+moveOffsetY<0)
                $("#selectArea").css({"top":"0px"});
            else
                $("#selectArea").css({"top":DivTop+moveOffsetY});
            return false;
        });
        return false;
    });
    $("#selectArea").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fnselectMove);
        cropPic();
        return false;
    });

    var fn0Move;
    //左上角的小方块
    $("#square0").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn0Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            //水平方向左移不能出图片，右移不能把选区宽度变成负数
            if(e.pageX>=offsetX){
                if(DivLeft+moveOffsetX<=0)
                    $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
                else if(moveOffsetX>DivWidth-10)
                    $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
                else
                    $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
            }

            //竖直方向上移不能出图片，下移不能把选区高度变成负数
            if(e.pageY>=offsetY){
                if(DivTop+moveOffsetY<=0)
                    $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
                else if(moveOffsetY>DivHeight-10)
                    $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
                else
                    $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
            }       
            moveNine(); //同时移动其它方块
            return false;
        });
        return false;
    });
    $("#square0").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn0Move);
        cropPic();  //重新剪切图片
        return false;
    });

    var fn1Move;
    //上面中间的小方块
    $("#square1").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn1Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageY>=offsetY){
                if(DivTop+moveOffsetY<=0)
                    $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
                else if(moveOffsetY>DivHeight-10)
                    $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
                else
                    $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
            }       
            moveNine();
            return false;
        });
        return false;
    });
    $("#square1").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn1Move);
        cropPic();
        return false;
    });

    var fn2Move;
    //右上角的小方块
    $("#square2").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn2Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageX<=offsetX+parentWidth){
                if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
                    $("#selectArea").css({"width":DivWidth+moveOffsetX});
                else if(DivWidth+moveOffsetX<=10)
                    $("#selectArea").css({"width":"10px"});
                else
                    $("#selectArea").css({"width":DivWidth+moveOffsetX});
            }

            if(e.pageY>=offsetY){
                if(DivTop+moveOffsetY<=0)
                    $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
                else if(moveOffsetY>DivHeight-10)
                    $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
                else
                    $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
            }       
            moveNine();
            return false;
        });
        return false;
    });
    $("#square2").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn2Move);
        cropPic();
        return false;
    });

    var fn3Move;
    //左侧中间的小方块
    $("#square3").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn3Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageX>=offsetX){
                if(DivLeft+moveOffsetX<=0)
                    $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
                else if(moveOffsetX>DivWidth-10)
                    $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
                else
                    $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
            }
            moveNine();
            return false;
        });
        return false;
    });
    $("#square3").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn3Move);
        cropPic();
        return false;
    });

    var fn4Move;
    //右边中间的小方块
    $("#square4").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn4Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageX<=offsetX+parentWidth){
                if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
                    $("#selectArea").css({"width":DivWidth+moveOffsetX});
                else if(DivWidth+moveOffsetX<=10)
                    $("#selectArea").css({"width":"10px"});
                else
                    $("#selectArea").css({"width":DivWidth+moveOffsetX});
            }
            moveNine();
            return false;
        });
        return false;
    });
    $("#square4").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn4Move);
        cropPic();
        return false;
    });

    var fn5Move;
    //左下角的小方块
    $("#square5").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn5Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageX>=offsetX){
                if(DivLeft+moveOffsetX<=0)
                    $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
                else if(moveOffsetX>DivWidth-10)
                    $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
                else
                    $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
            }

            if(e.pageY<=offsetY+parentHeight){
                if(DivTop+DivHeight+moveOffsetY>=parentHeight)
                    $("#selectArea").css({"height":DivHeight+moveOffsetY});
                else if(DivHeight+moveOffsetY<10)
                    $("#selectArea").css({"height":"10px"});
                else
                    $("#selectArea").css({"height":DivHeight+moveOffsetY});
            }       
            moveNine();
            return false;
        });
        return false;
    });
    $("#square5").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn5Move);
        cropPic();
        return false;
    });

    var fn6Move;
    //下面中间的小方块
    $("#square6").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn6Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageY<=offsetY+parentHeight){
                if(DivTop+DivHeight+moveOffsetY>=parentHeight)
                    $("#selectArea").css({"height":DivHeight+moveOffsetY});
                else if(DivHeight+moveOffsetY<10)
                    $("#selectArea").css({"height":"10px"});
                else
                    $("#selectArea").css({"height":DivHeight+moveOffsetY});
            }       
            moveNine();
            return false;
        });
        return false;
    });
    $("#square6").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn6Move);
        cropPic();
        return false;
    });

    var fn7Move;
    //右下角的小方块
    $("#square7").bind("mousedown",function(e){
        var clickX = e.pageX, clickY = e.pageY;
        DivWidth = parseInt($("#selectArea").width());
        DivHeight = parseInt($("#selectArea").height());
        DivLeft = parseInt($("#selectArea").css("left"));
        DivTop = parseInt($("#selectArea").css("top"));
        $("#picArea").bind("mousemove",fn7Move = function(e){
            var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;

            if(e.pageX<=offsetX+parentWidth){
                if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
                    $("#selectArea").css({"width":DivWidth+moveOffsetX});
                else if(DivWidth+moveOffsetX<=10)
                    $("#selectArea").css({"width":"10px"});
                else
                    $("#selectArea").css({"width":DivWidth+moveOffsetX});
            }
            if(e.pageY<=offsetY+parentHeight){
                if(DivTop+DivHeight+moveOffsetY>=parentHeight)
                    $("#selectArea").css({"height":DivHeight+moveOffsetY});
                else if(DivHeight+moveOffsetY<10)
                    $("#selectArea").css({"height":"10px"});
                else
                    $("#selectArea").css({"height":DivHeight+moveOffsetY});
            }       
            moveNine();
            return false;
        });
        return false;
    });
    $("#square7").bind("mouseup",function(e){
        $("#picArea").unbind("mousemove",fn6Move);
        cropPic();
        return false;
    });

    //双击选区切割
    $("#selectArea").bind("dblclick",function(e){
        var tempSelectArea = $(this);
        //记录选区的四个点，用于切割
        var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
        var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
        var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
        var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
        //下层图片剪切，final
        $("#mypic2").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
        //背景色变成白色
        $("#picArea").css("backgroundColor","#FFFFFF");
        tempSelectArea.hide();
    });
});

function cropPic(){
    var tempSelectArea = $("#selectArea");
    //记录选区的四个点，用于切割
    var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
    var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
    var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
    var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
    $("#mypic1").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
}

function moveNine(){
    //移动那9个小方块
    var iSelectWidth = parseInt($("#selectArea").width());
    var iSelectHeight = parseInt($("#selectArea").height());
    $("#square0").css({"left":"-1px","top":"-1px"});
    $("#square1").css({"left":iSelectWidth/2-2,"top":"-1px"});
    $("#square2").css({"left":iSelectWidth-4,"top":"-1px"});
    $("#square3").css({"left":"-1px","top":iSelectHeight/2-2});
    $("#square4").css({"left":iSelectWidth-4,"top":iSelectHeight/2-2});
    $("#square5").css({"left":"-1px","top":iSelectHeight-4});
    $("#square6").css({"left":iSelectWidth/2-2,"top":iSelectHeight-4});
    $("#square7").css({"left":iSelectWidth-4,"top":iSelectHeight-4});
    $("#square8").css({"left":iSelectWidth/2-3,"top":iSelectHeight/2-3});

    //这个就是给IE用的，制造一个看不见的区域来让IE选择
    $("#squareIE").width(Math.abs(iSelectWidth-8)).height(Math.abs(iSelectHeight-8));
}

我把所有的程序都放在了http://download.csdn.net/detail/bzd_111/9319185，需要的可以看看，如果有什么疑问，可以联系我，我的QQ是1240450484
现在课比较少了，一般都会有空的

bzd_111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java 图片切割_使用Java实现图像分割
weixin_32752813的博客
02-12 1388
为减少动画制作过程中的IO操作，我们可以使用连续动画来改善动画播放效率。如果我们对图像中的每张小图像单独分割成独立的文件，那么当每次要使用这些小图像的时候，我们都得从文件中读取图像信息。实际上我们可以利用Java将整张大图像中的每个小图像在应用程序中分割出来，然后使用的时候，直接从分割后的图像中获取需要使用的小图像就可以了，这样就不用每次都从文件中读取小图像信息，效率自然会比较高。那么如何来实现图...
matlab 图片字符切割,基于MATLAB的图片中字符的分割与识别
weixin_32529407的博客
04-10 2723
张雯+李浩进摘 要：本文主要介绍字符识别的基本原理，并且利用MATLAB工具软件实现图片中字符的分割和识别，对于满足一定要求的图片可以实现字符的分割与识别 ，通过图像读取，图像预处理，图像投影，字符分割，字符识别五个步骤实现.关键词：图像预处理；字符分割；字符识别Abstract：this paper mainly introduces the basic principle of charact...
最好用的图片切割工具
07-19
最好用的图片切割工具 可以用来切割图片 方便快捷 记得好评哦
一款免费的图片切割器
11-12
分享一款免费的图片切割器 非常好用 很简单
图片分割器V1.2.exe
11-23
自定按照设定分割图片，自定按照设定分割图片，自定按照设定分割图片，自定按照设定分割图片，自定按照设定分割图片，
图片切割
人生最遗憾的莫过于：轻易地放弃了不该放弃的,固执地坚持了不该坚持的
11-20 656
public String cutLocalImage(String imagePath) {                File path = new File(new StringBuffer().append(Constant.NGNIX_DISK).append(File.separator).append(nfurlPath).toString());         String ...
VB图片分割器九宫格
键盘上的舞指
01-29 337
'一款图片分割的小工具，控件开源，感兴趣的V友们可以下载研究研究学习学习！ 点击这里下载工程包 提取码：GVB8
html中如何把一张图片分块,神奇图片分割软件有哪些分割模式 图片分割器如何检验能否无缝拼图...
weixin_31774841的博客
06-05 745
神奇图片分割软件如何使用？神奇图片分割软件分割图片有哪些模式？神奇图片分割软件自带的批量分割功能在哪？神奇图片分割软件如何无缝拼接已经分割的图片？神奇图片分割软件是一款非常好用的图片分割器，可以按尺寸分割，也可以平均分割。下面来看看神奇图片分割软件使用图文教程。神奇图片分割软件是一款将图片分割为多个图像块的软件，本软件能够任意把图片若干分分割，支持市面上所有主流的文件格式，支持按行列数平均分割或按...
PYQT实战应用（1）------制作图片分割器，并为每张图片打上标签。
四平的博客
09-14 764
软件名称：野生动物红外照片分割编辑器 模块设计： （1）菜单栏 文件、缩放、跳转、翻页 （2）主界面 图像展示、图片总数、当前图片位置、信息、标签、上一张、确认修改、下一张。 如图： 软件作用： 对于深度学习来说，数据集的大小至关重要，为了适应不同模型的需要，在进入神经网络前需要进行图片的预处理操作，压缩裁剪图片。压缩会丢失很多的图片特征信息，因此，本软件尝试通过将一张大突破裁剪成多张小图片，并打上标签。如果一张大图片像素大小为30004000，那么裁剪后得到100张300400的小图片，再压缩到如Ale
图片分割器
05-05
C#写的一个小工具，可以等比的将一张大图分割成若干行列的小图，可自定义输出图片序列的名字
python图片切割器
12-19
可以将网络截屏得到的长图片按照pdf的尺寸进行切割，可以设定阈值避免切断文字，然后可以将生成对的图片进行转化合并生成pdf文件。
VB图片分割器源程序
02-04
把图片分割成九宫格或分割成多块等份的拼图，可设置横切或竖切，输出为图片名称单独的文件夹。
漫画图片切割
weixin_43407838的博客
01-21 1724
from PIL import Image import os def imgchuli(file, filename, filetype): img = Image.open(file) chicun = img.size high = int(chicun[1]) chang = int(chicun[0]) box = (0, 0, int(chang / 2), int(high)) box2 = (int(chang / 2), 0, i.
unity怎么切割图片
qq_20179331的博客
04-03 3829
unity怎么切割图片。
html设置图片切割,HTML+CSS实现合并图片的切割显示以及背景渲染
weixin_28811227的博客
06-04 1091
今天用了大约3小时才搞定了这么一小点工作。。合并图片的切割显示是我早就想研究一下的，因为这个东西应用非常广泛，今天总算在HTML的框架里有了些了解。核心代码为： div标签是个很好的东西，用来逻辑区分页面结构，在size选择器中，设定了div的大小，并设置多余部分隐藏显示，且大小为合并图片的一半 img由a包围，由a控制背景，图片的变换交给img，否则会产生图片覆盖的问题！这个问题困扰了我好久好...
常见电容器图片_常用电容器大全 (附图片)
weixin_33539912的博客
01-14 3120
1、铝电解电容器用浸有糊状电解质的吸水纸夹在两条铝箔中间卷绕而成，薄的化氧化膜作介质的电容器.因为氧化膜有单向导电性质,所以电解电容器具有极性.容量大，能耐受大的脉动电流，容量误差大，泄漏电流大；普通的不适于在高频和低温下应用,不宜使用在25kHz以上频率低频旁路、信号耦合、电源滤波。电容量：0.47～10000u额定电压：6.3～450V主要特点：体积小，容量大，损耗大，漏电大应用：电源...
egret font图片资源切割
最新发布
05-12
Egret Font是白鹭引擎提供的一款字体库，提供了丰富的字体资源...EGret Font的图片资源切割可以让开发者更加自由地使用字体资源，白鹭引擎为开发者提供了简便的切割工具和使用方式，减少了开发工作量，提高了开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值