截取图片组件

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是为了拖拽。

时间： 2024-10-28 09:46:29

截取图片组件的相关文章

node上截取图片工具 images（node-images）

我们经常会遇到服务器上传的图片进行裁剪或者增加logo等等一些操作,在node平台上该如何实现呢? 看到大家都在使用"gm"这个工具,功能很强大,但是在Windows平台上简直就是各种坑啊,我整了一下午虽然解决了一部分问题,但还是选择了另外一款不错的,而且轻量级跨平台比较好的截图模块——images 安装方式   npm install images github地址为https://github.com/zhangyuanwei/node-images 正如作者所描述的,轻量级.跨平

拍照+相册+截取图片

一.拍照+截取 拍照: mStorageDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM);//获取存储器的专门放图片的区域 uri = Uri.fromFile(new File(mStorageDir.getPath()+System.currentTimeMillis()+".png")); //在该区域创建文件,并转换为uri格式 Intent intent = new

关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示

我们都知道在ios中,每一个UIImageView都有他的frame大小,但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢?在默认情况,图片会被压缩或者拉伸以填满整个区域. 通过查看UIView的属性可以知道,view的contentMode属性可以用来控制图片的显示情况.下面的设置可以让图片进行居中显示. 1 imageView.contentMode =  UIViewContentModeCenter; 这个居中是包括了,横向和纵向都是居中.图片不会拉伸或者压缩,就是按照im

[ATL/WTL]_[CBitmap复制图片-截取图片-平铺图片]

场景: 1.当你需要截取图片部分区域作为某个控件的背景. 2.需要平铺图片到一个大区域让他自动放大时. 3.或者需要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateCompatibleDC(NULL); ddc.CreateCompatibleDC(NULL); CBitmap destBmp; destBmp.CreateCompatibleBitmap(CClientDC(NULL),width,height); sdc.SelectBitmap(m_Bitma

[ATL/WTL]_[0基础]_[CBitmap复制图片-截取图片-平铺图片]

场景: 1.当你须要截取图片部分区域作为某个控件的背景. 2.须要平铺图片到一个大区域让他自己主动放大时. 3.或者须要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateCompatibleDC(NULL); ddc.CreateCompatibleDC(NULL); CBitmap destBmp; destBmp.CreateCompatibleBitmap(CClientDC(NULL),width,height); sdc.SelectBitmap(m_Bit

Android：实现最简单的单指移动、双指缩放的图片组件

本例实现了最简单的单指移动.双指缩放的图片组件,效果图如下:             功能: 1.单指移动,双指缩放. 2.可控制缩放范围,防止过大或过小:初始化时自动缩放至组件大小,并居中显示. 3.边界控制,防止图片"移出去了". 4.可使用在xml中,并自动适应组件大小. 5.代码简洁!!! 核心代码:DragScaleView.java package com.sina.simplegestureimage; import android.content.Context; im

IOS 截取图片 部分 并生成新图片

/** * 从图片中按指定的位置大小截取图片的一部分 * * @param image UIImage image 原始的图片 * @param rect CGRect rect 要截取的区域 * * @return UIImage */ + (UIImage *)ct_imageFromImage:(UIImage *)image inRect:(CGRect)rect{ //把像 素rect 转化为 点rect(如无转化则按原图像素取部分图片) CGFloat scale = [UIScre

根据size截取图片中间矩形区域的图片 这里的size是正方形

#pragma mark 根据size截取图片中间矩形区域的图片 这里的size是正方形 -(UIImage *)cutCenterImage:(UIImage *)image size:(CGSize)size{ CGSize imageSize = image.size; CGRect rect; //根据图片的大小计算出图片中间矩形区域的位置与大小 if (imageSize.width > imageSize.height) { float leftMargin = (imageSize

iOS 根据UIImage 修改UIImageView Frame （包括截取图片中间部分）

iOS UIImageView 根据需求调整frame 1.图片的宽和高不相等,截取图片的中间部分,截取的部分Size明确 2.图片的宽度要等于其父视图的类的宽度,然后根据宽度计算高度,保证 图片不变形,显示正常 3.图片的宽度或高度大于其父视图的类的宽的或高度,如果是宽度的问题, 就以其父视图的宽度为准,确定图片的显示宽度:如果是高度的问题,就以 其父视图的高度为准,确定图片的显示高度. 以上三种情况,具体示例依次如下: 第一种情况,调用方法: - (void)imageLoadedFinis