截取图片组件
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是为了拖拽。
