jsjquery达成裁剪,图片裁剪本领

By admin in web前端 on 2019年7月23日

明日大家在选择各大网址的民用宗旨时,都有个上传个人头像的功效。用户在上传了个体照片之后,或然不符合网址的渴求,于是须要用户对照片举办裁剪,最终基于用户裁剪的尺寸生成头像。那几个效能正是太棒了,原本不懂js的时候,认为绝对漂亮妙,太美妙了。心想曾几何时要是团结也能搞明白那些中的技巧,那该多牛啊~大家是否也可以有啥作者同样的主张啊~哈哈~~

js+jquery实现图片裁剪成效,jsjquery达成裁剪

近期大家在应用各大网址的个人基本时,都有个上传个人头像的作用。用户在上传了私家照片之后,恐怕不吻合网址的要求,于是需要用户对照片进行裁剪,最后依据用户裁剪的尺寸生成头像。那些作用就是太棒了,原本不懂js的时候,感到很神奇,太奇妙了。心想哪一天假使协和也能搞理解那中间的手艺,那该多牛啊~大家是还是不是也是有什么笔者同样的主张啊~哈哈~~

上面我们就来用javascript来兑现那一个意义吗。

复制代码 代码如下:

<!DOCTYPE html>
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>clip</title>
<style type=”text/css”>
*{ padding:0; margin:0;}
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px;
margin:30px auto; }
li{ float:left; width:500px;}
#container{width:480px; height:480px; margin:0 auto; border:1px solid
#999;
position:relative;backgroundnull:url(
#container .block{height:100px; width:100px; border:1px solid #000000;
position:absolute; left:50px; top:50px;
background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;}
#container .tips{ position:absolute; padding:5px; border:1px solid
#ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6;
display:none; font-size:12px; color:#333; ;}
.tips span{ display:inline-block;zoom:1; width:28px;}
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;}
.rLeftDown,.rRightUp{cursor:ne-resize;}
.rRightDown,.rLeftUp{cursor:nw-resize;}
.rRight,.rLeft{cursor:e-resize;}
.rUp,.rDown{cursor:n-resize;}
.rRightDown{ bottom:-3px; right:-3px;}
.rLeftDown{ bottom:-3px; left:-3px;}
.rRightUp{ top:-3px; right:-3px;}
.rLeftUp{ top:-3px; left:-3px;}
.rRight{ right:-3px; top:50%}
.rLeft{ left:-3px; top:50%}
.rUp{ top:-3px; left:50%}
.rDown{ bottom:-3px; left:50%}
#imgC{ border:1px solid #CCC; width:0; height:0; margin:0
auto;backgroundnull:url(
.code {
    background: none repeat scroll 0 0 #E3F4F9;
    border: 1px solid #BAE2F0;
    font: 12px “Courier New”,Courier,monospace;
    margin: 30px auto;
    padding: 10px 10px 40px;
 width:980px;
}
.code p{ height:24px; line-height:24px;}
.code span{ display:inline-block;zoom:1; margin-right:5px; width:85px;
font-weight:bold; color:#00F}
</style>
</head>
<body>
<div class=”code”>
 <div class=”how”>使用办法</div>
    <p>$(“#container”).clip({
  imgC : $(“#imgC”),
        blockClass : “block”,
        tipsClass  : “tips”       
 });</p>
    <p><span>imgC :</span>
表示裁剪图片的容器,也正是侧边的图</p>
    <p><span>blockClass :</span> block的体裁名 
也正是页面上的能够拖动的滑块的样式 因为怕和其他页面上的体制重名 
私下认可是block</p>
    <p><span>tipsClass  :</span> tips的样式名  
也正是页面上显示left width height top的那多少个span的体制名
暗中认可是tips</p>
</div>
<ul>
 <li>
     <div id=”container”></div>
    </li>
    <li>
     <div id=”imgC”></div>
    </li>
</ul>
<script type=”text/javascript”
src=”;
<script type=”text/javascript”>
(function(){
 var dBody = document.body,
  dDoc = document.documentElement,
  ie   = $.browser.msie;
 ie&&($.browser.version==”6.0″)
  &&document.execCommand(“BackgroundImageCache”, false, true); 
 var  clip =  function(options){
  this.init.call(this,options); 
 }
 clip.prototype = {
  options :{
   moveCallBack : function(){},
   blockClass : “block”,
   tipsClass  : “tips”
  },
  init : function(options){   
   $.extend(this,this.options,options||{});
   if(!this.container || !this.imgC){
    return;
   }
   this.container = $(this.container);
   var self = this;
   this.block = $(‘<div class=”‘+this.blockClass+'”>\
     <div action=”rightDown” class=”rRightDown”></div>\
     <div action=”leftDown” class=”rLeftDown”></div>\
     <div action=”rightUp” class=”rRightUp”></div>\
     <div action=”leftUp” class=”rLeftUp”></div>\
     <div action=”right” class=”rRight”></div>\
     <div action=”left” class=”rLeft”></div>\
     <div action=”up” class=”rUp”></div>\
     <div action=”down” class=”rDown” ></div>\
       </div>’)
   .bind(“mousedown.r”,function(e){self.start(e)})
   .appendTo(this.container[0]);
   this.tips = $(‘<span class=”‘+this.tipsClass+'”
/>’).appendTo(this.container[0]);
   this.setImg();
  },
  setImg : function(){
   var block = this.block;
   var left  = block.css(“left”),
    top   = block.css(“top”),
    height = block.height(),
    width  = block.width();
   this.imgC.css({
    height: height,
    width : width,
    “background-position” : “-“+left+” -“+top
   });
   this.tips.html(“left:<span>”+parseInt(left) +
“</span>top:<span>” + +parseInt(top) +
“</span>width:<span>”+width+
“</span>height:<span>”+height+”</span>”);
  },
  start : function(e){      
   var $elem     = $(e.target),
    block     = this.block,
    self      = this,
    move      = false,
    container = this.container,
    action    = $elem.attr(“action”);
   //这几个 每趟都要总结 基本dom结构的改造 浏览器的缩放
都会让内部的值发生改换 
   this.offset =
$.extend({height:container.height(),width:container.width()},container.offset());
   this.blockOriginal =
{height:block.height(),width:block.width(),left:parseInt(block.css(“left”)),top:parseInt(block.css(“top”))};
   if(action){
    this.fun = this[action];    
   }else{
    this.x = e.clientX – this.offset.left – this.blockOriginal.left ;
    this.y = e.clientY – this.offset.top – this.blockOriginal.top;
    move = true;
   }   
   ie
    &&this.block[0].setCapture();
   this.tips.show();
   $(document)
    .bind(“mousemove.r”,function(e){self.move(e,move)})
    .bind(“mouseup.r”,function(){self.end()});   
  },
  end  : function(){
   $(document)
    .unbind(“mousemove.r”)
    .unbind(“mouseup.r”);
   ie 
    &&this.block[0].releaseCapture();
   this.tips.hide(); 
  },
  move : function(e,isMove){
   window.getSelection
    ? window.getSelection().removeAllRanges()
    : document.selection.empty();
    
   var block = this.block; 
   if(isMove){
    var left = Math.max(0,e.clientX – this.offset.left – this.x);
    left = Math.min(left,this.offset.width –
this.blockOriginal.width);
    var top = Math.max(0,e.clientY – this.offset.top – this.y);
    top = Math.min(top,this.offset.height –
this.blockOriginal.height);
    block.css({left:left,top:top});    
   }else{
    var offset = this.fun(e);
    block.css(offset);
   }
   
   this.setImg();
   this.moveCallBack();
  },
  down : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
//出现垂直方向滚动条时候 要总计那些 
    offset = this.offset;
    
   if(e.clientY-offset.top>=blockOriginal.top-sTop){
    var height = Math.min(offset.height –
blockOriginal.top,e.clientY-offset.top-blockOriginal.top+sTop),
     top = blockOriginal.top;
   }else{
    var height =
Math.min(offset.top+blockOriginal.top-e.clientY-sTop,blockOriginal.top),
     top = Math.max(e.clientY – offset.top+sTop,0);
   }
   return {height:height, top:top};
  },
  up : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
    offset = this.offset;
   if(e.clientY-offset.top-blockOriginal.height<=blockOriginal.top-sTop){
    var top = Math.max(e.clientY-offset.top+sTop,0),
     maxHeight = blockOriginal.top + blockOriginal.height,
     height = Math.min(maxHeight,blockOriginal.top +
blockOriginal.height -(e.clientY-offset.top)-sTop);     
   }else{
    var height =
Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height+sTop,offset.height-blockOriginal.top-blockOriginal.height),
     top = blockOriginal.top+blockOriginal.height;  
   }
   return {height:height, top:top};
  },
  left : function(e){
   var blockOriginal = this.blockOriginal,
    offset = this.offset;
    
   if(e.clientX – offset.left – blockOriginal.width –
blockOriginal.left<=0){
    var left  = Math.max(e.clientX – offset.left,0),
     width = Math.min(blockOriginal.left +
blockOriginal.width,blockOriginal.left + blockOriginal.width
-(e.clientX-offset.left));
   }else{
    var width =
Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width),
     left  = blockOriginal.left + blockOriginal.width;
   }
   return {left : left,  width : width};
  },
  right : function(e){
   var blockOriginal = this.blockOriginal,
    offset = this.offset;
   if(e.clientX-offset.left>=blockOriginal.left){
    var width = Math.min(offset.width – blockOriginal.left,e.clientX –
offset.left – blockOriginal.left),
     left  = blockOriginal.left;
   }else{
    var width = Math.min(offset.left + blockOriginal.left –
e.clientX,blockOriginal.left),
     left  = Math.max(e.clientX – offset.left,0);
   }
   return {left : left,  width : width};
  },
  rightDown : function(e){
   return $.extend(this.right(e),this.down(e));  
  },
  leftDown : function(e){
   return $.extend(this.left(e),this.down(e));
  },
  rightUp : function(e){
   return $.extend(this.right(e),this.up(e));
  },
  leftUp : function(e){
   return $.extend(this.left(e),this.up(e));
  },
  getValue : function(){
   var block = this.block;
   return {
    left   : parseInt(block.css(“left”)),
    top    : parseInt(block.css(“top”)),
    width  : block.width(),
    height : block.height()
   }
  }
 }
 $.fn.clip = function(options){
  options.container = this;
  return new clip(options);
 }
})();
 xx = $(“#container”).clip({
  imgC : $(“#imgC”)
 })
</script>
</body>
</html>

是还是不是很炫丽啊,小同伙们,学学本示例的思绪吧。

以后大家在行使各大网址的私家基本时,都有个上传个人头像的作用。用户在上传了民用照片之…

学php gd库 看到有图片裁剪 正好整贰个 嗯 其实挺简单的

下边大家就来用javascript来贯彻这些效用吗。

php版,代码如下:
<!DOCTYPE html>
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Resize</title>
<style type=”text/css”>
*{ padding:0; margin:0;}
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px;
margin:30px auto; }
li{ float:left; width:500px;}
#container{width:480px; height:480px; margin:0 auto; border:1px solid
#999;
position:relative;backgroundnull:url(
#container .block{height:100px; width:100px; border:1px solid #000000;
position:absolute; left:50px; top:50px;
background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;}
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;}
.rLeftDown,.rRightUp{cursor:ne-resize;}
.rRightDown,.rLeftUp{cursor:nw-resize;}
.rRight,.rLeft{cursor:e-resize;}
.rUp,.rDown{cursor:n-resize;}
.rRightDown{ bottom:-3px; right:-3px;}
.rLeftDown{ bottom:-3px; left:-3px;}
.rRightUp{ top:-3px; right:-3px;}
.rLeftUp{ top:-3px; left:-3px;}
.rRight{ right:-3px; top:50%}
.rLeft{ left:-3px; top:50%}
.rUp{ top:-3px; left:50%}
.rDown{ bottom:-3px; left:50%}
#imgC{ border:1px solid #CCC; width:0; height:0; margin:0
auto;backgroundnull:url(
</style>
</head>
<body>
<ul>
<li>
<div id=”container”></div>
</li>
<li>
<div id=”imgC”></div>
</li>
</ul>
<script type=”text/javascript”
src=”;
<script type=”text/javascript”>
(function(){
var dBody = document.body,
dDoc = document.documentElement;
var clip = function(options){
this.init.call(this,options);
}
clip.prototype = {
options :{
moveCallBack : function(){},
className : “block”
},
init : function(options){
$.extend(this,this.options,options||{});
if(!this.container || !this.imgC){
return;
}
this.container = $(this.container);
var self = this;
this.block = $(‘<div class=”‘+this.className+'”>
<div action=”rightDown” class=”rRightDown”></div>
<div action=”leftDown” class=”rLeftDown”></div>
<div action=”rightUp” class=”rRightUp”></div>
<div action=”leftUp” class=”rLeftUp”></div>
<div action=”right” class=”rRight”></div>
<div action=”left” class=”rLeft”></div>
<div action=”up” class=”rUp”></div>
<div action=”down” class=”rDown” ></div>
</div>’)
.bind(“mousedown.r”,function(e){self.start(e)})
.appendTo(this.container[0]);
this.setImg();
},
setImg : function(){
var block = this.block;
this.imgC.css({
height: block.height(),
width : block.width(),
“background-position” : “-“+block.css(“left”)+” -“+block.css(“top”)
});
},
start : function(e){
var $elem = $(e.target),
block = this.block,
self = this,
move = false,
container = this.container,
action = $elem.attr(“action”);
//这么些 每回都要总计 基本dom结构的改造 浏览器的缩放
都会让内部的值发生改造
this.offset =
$.extend({height:container.height(),width:container.width()},container.offset());
this.blockOriginal =
{height:block.height(),width:block.width(),left:parseInt(block.css(“left”)),top:parseInt(block.css(“top”))};
if(action){
this.fun = this[action];
}else{
this.x = e.clientX – this.offset.left – this.blockOriginal.left ;
this.y = e.clientY – this.offset.top – this.blockOriginal.top;
move = true;
}
$(document)
.bind(“mousemove.r”,function(e){self.move(e,move)})
.bind(“mouseup.r”,function(){self.end()});
},
end : function(){
$(document)
.unbind(“mousemove.r”)
.unbind(“mouseup.r”);
},
move : function(e,isMove){
window.getSelection
? window.getSelection().removeAllRanges()
: document.selection.empty();

复制代码 代码如下:

var block = this.block;
if(isMove){
var left = Math.max(0,e.clientX – this.offset.left – this.x);
left = Math.min(left,this.offset.width – this.blockOriginal.width);
var top = Math.max(0,e.clientY – this.offset.top – this.y);
top = Math.min(top,this.offset.height – this.blockOriginal.height);
block.css({left:left,top:top});
}else{
var offset = this.fun(e);
block.css(offset);
}
this.setImg();
this.moveCallBack();
},
down : function(e){
var blockOriginal = this.blockOriginal,
sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
//现身垂直方向滚动条时候 要总结这些
offset = this.offset;

<!DOCTYPE html>
<html xmlns=””>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>clip</title>
<style type=”text/css”>
*{ padding:0; margin:0;}
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px;
margin:30px auto; }
li{ float:left; width:500px;}
#container{width:480px; height:480px; margin:0 auto; border:1px solid
#999;
position:relative;background:url();}
#container .block{height:100px; width:100px; border:1px solid #000000;
position:absolute; left:50px; top:50px;
background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;}
#container .tips{ position:absolute; padding:5px; border:1px solid
#ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6;
display:none; font-size:12px; color:#333; ;}
.tips span{ display:inline-block;zoom:1; width:28px;}
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;}
.rLeftDown,.rRightUp{cursor:ne-resize;}
.rRightDown,.rLeftUp{cursor:nw-resize;}
.rRight,.rLeft{cursor:e-resize;}
.rUp,.rDown{cursor:n-resize;}
.rRightDown{ bottom:-3px; right:-3px;}
.rLeftDown{ bottom:-3px; left:-3px;}
.rRightUp{ top:-3px; right:-3px;}
.rLeftUp{ top:-3px; left:-3px;}
.rRight{ right:-3px; top:50%}
.rLeft{ left:-3px; top:50%}
.rUp{ top:-3px; left:50%}
.rDown{ bottom:-3px; left:50%}
#imgC{ border:1px solid #CCC; width:0; height:0; margin:0
auto;background:url();}
.code {
    background: none repeat scroll 0 0 #E3F4F9;
    border: 1px solid #BAE2F0;
    font: 12px “Courier New”,Courier,monospace;
    margin: 30px auto;
    padding: 10px 10px 40px;
 width:980px;
}
.code p{ height:24px; line-height:24px;}
.code span{ display:inline-block;zoom:1; margin-right:5px; width:85px;
font-weight:bold; color:#00F}
</style>
</head>
<body>
<div class=”code”>
 <div class=”how”>使用格局</div>
    <p>$(“#container”).clip({
  imgC : $(“#imgC”),
        blockClass : “block”,
        tipsClass  : “tips”       
 });</p>
    <p><span>imgC :</span>
表示裁剪图片的器皿,也正是左边的图</p>
    <p><span>blockClass :</span> block的样式名 
也正是页面上的能够拖动的滑块的样式 因为怕和其他页面上的体裁重名 
默许是block</p>
    <p><span>tipsClass  :</span> tips的体制名  
约等于页面上呈现left width height top的特别span的体裁名
默许是tips</p>
</div>
<ul>
 <li>
     <div id=”container”></div>
    </li>
    <li>
     <div id=”imgC”></div>
    </li>
</ul>
<script type=”text/javascript”
src=”>
<script type=”text/javascript”>
(function(){
 var dBody = document.body,
  dDoc = document.documentElement,
  ie   = $.browser.msie;
 ie&&($.browser.version==”6.0″)
  &&document.execCommand(“BackgroundImageCache”, false, true); 
 var  clip =  function(options){
  this.init.call(this,options); 
 }
 clip.prototype = {
  options :{
   moveCallBack : function(){},
   blockClass : “block”,
   tipsClass  : “tips”
  },
  init : function(options){   
   $.extend(this,this.options,options||{});
   if(!this.container || !this.imgC){
    return;
   }
   this.container = $(this.container);
   var self = this;
   this.block = $(‘<div class=”‘+this.blockClass+'”>\
     <div action=”rightDown” class=”rRightDown”></div>\
     <div action=”leftDown” class=”rLeftDown”></div>\
     <div action=”rightUp” class=”rRightUp”></div>\
     <div action=”leftUp” class=”rLeftUp”></div>\
     <div action=”right” class=”rRight”></div>\
     <div action=”left” class=”rLeft”></div>\
     <div action=”up” class=”rUp”></div>\
     <div action=”down” class=”rDown” ></div>\
       </div>’)
   .bind(“mousedown.r”,function(e){self.start(e)})
   .appendTo(this.container[0]);
   this.tips = $(‘<span class=”‘+this.tipsClass+'”
/>’).appendTo(this.container[0]);
   this.setImg();
  },
  setImg : function(){
   var block = this.block;
   var left  = block.css(“left”),
    top   = block.css(“top”),
    height = block.height(),
    width  = block.width();
   this.imgC.css({
    height: height,
    width : width,
    “background-position” : “-“+left+” -“+top
   });
   this.tips.html(“left:<span>”+parseInt(left) +
“</span>top:<span>” + +parseInt(top) +
“</span>width:<span>”+width+
“</span>height:<span>”+height+”</span>”);
  },
  start : function(e){      
   var $elem     = $(e.target),
    block     = this.block,
    self      = this,
    move      = false,
    container = this.container,
    action    = $elem.attr(“action”);
   //那几个 每回都要总结 基本dom结构的改换 浏览器的缩放
都会让内部的值发生变动 
   this.offset =
$.extend({height:container.height(),width:container.width()},container.offset());
   this.blockOriginal =
{height:block.height(),width:block.width(),left:parseInt(block.css(“left”)),top:parseInt(block.css(“top”))};
   if(action){
    this.fun = this[action];    
   }else{
    this.x = e.clientX – this.offset.left – this.blockOriginal.left ;
    this.y = e.clientY – this.offset.top – this.blockOriginal.top;
    move = true;
   }   
   ie
    &&this.block[0].setCapture();
   this.tips.show();
   $(document)
    .bind(“mousemove.r”,function(e){self.move(e,move)})
    .bind(“mouseup.r”,function(){self.end()});   
  },
  end  : function(){
   $(document)
    .unbind(“mousemove.r”)
    .unbind(“mouseup.r”);
   ie 
    &&this.block[0].releaseCapture();
   this.tips.hide(); 
  },
  move : function(e,isMove){
   window.getSelection
    ? window.getSelection().removeAllRanges()
    : document.selection.empty();
    
   var block = this.block; 
   if(isMove){
    var left = Math.max(0,e.clientX – this.offset.left – this.x);
    left = Math.min(left,this.offset.width –
this.blockOriginal.width);
    var top = Math.max(0,e.clientY – this.offset.top – this.y);
    top = Math.min(top,this.offset.height –
this.blockOriginal.height);
    block.css({left:left,top:top});    
   }else{
    var offset = this.fun(e);
    block.css(offset);
   }
   
   this.setImg();
   this.moveCallBack();
  },
  down : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
//出现垂直方向滚动条时候 要总括这几个 
    offset = this.offset;
    
   if(e.clientY-offset.top>=blockOriginal.top-sTop){
    var height = Math.min(offset.height –
blockOriginal.top,e.clientY-offset.top-blockOriginal.top+sTop),
     top = blockOriginal.top;
   }else{
    var height =
Math.min(offset.top+blockOriginal.top-e.clientY-sTop,blockOriginal.top),
     top = Math.max(e.clientY – offset.top+sTop,0);
   }
   return {height:height, top:top};
  },
  up : function(e){
   var blockOriginal = this.blockOriginal,
    sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
    offset = this.offset;
   if(e.clientY-offset.top-blockOriginal.height<=blockOriginal.top-sTop){
    var top = Math.max(e.clientY-offset.top+sTop,0),
     maxHeight = blockOriginal.top + blockOriginal.height,
     height = Math.min(maxHeight,blockOriginal.top +
blockOriginal.height -(e.clientY-offset.top)-sTop);     
   }else{
    var height =
Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height+sTop,offset.height-blockOriginal.top-blockOriginal.height),
     top = blockOriginal.top+blockOriginal.height;  
   }
   return {height:height, top:top};
  },
  left : function(e){
   var blockOriginal = this.blockOriginal,
    offset = this.offset;
    
   if(e.clientX – offset.left – blockOriginal.width –
blockOriginal.left<=0){
    var left  = Math.max(e.clientX – offset.left,0),
     width = Math.min(blockOriginal.left +
blockOriginal.width,blockOriginal.left + blockOriginal.width
-(e.clientX-offset.left));
   }else{
    var width =
Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width),
     left  = blockOriginal.left + blockOriginal.width;
   }
   return {left : left,  width : width};
  },
  right : function(e){
   var blockOriginal = this.blockOriginal,
    offset = this.offset;
   if(e.clientX-offset.left>=blockOriginal.left){
    var width = Math.min(offset.width – blockOriginal.left,e.clientX –
offset.left – blockOriginal.left),
     left  = blockOriginal.left;
   }else{
    var width = Math.min(offset.left + blockOriginal.left –
e.clientX,blockOriginal.left),
     left  = Math.max(e.clientX – offset.left,0);
   }
   return {left : left,  width : width};
  },
  rightDown : function(e){
   return $.extend(this.right(e),this.down(e));  
  },
  leftDown : function(e){
   return $.extend(this.left(e),this.down(e));
  },
  rightUp : function(e){
   return $.extend(this.right(e),this.up(e));
  },
  leftUp : function(e){
   return $.extend(this.left(e),this.up(e));
  },
  getValue : function(){
   var block = this.block;
   return {
    left   : parseInt(block.css(“left”)),
    top    : parseInt(block.css(“top”)),
    width  : block.width(),
    height : block.height()
   }
  }
 }
 $.fn.clip = function(options){
  options.container = this;
  return new clip(options);
 }
})();
 xx = $(“#container”).clip({
  imgC : $(“#imgC”)
 })
</script>
</body>
</html>

if(e.clientY-offset.top>=blockOriginal.top-sTop){
var height = Math.min(offset.height –
blockOriginal.top,e.clientY-offset.top-blockOriginal.top+sTop),
top = blockOriginal.top;
}else{
var height =
Math.min(offset.top+blockOriginal.top-e.clientY-sTop,blockOriginal.top),
top = Math.max(e.clientY – offset.top+sTop,0);
}
return {height:height, top:top};
},
up : function(e){
var blockOriginal = this.blockOriginal,
sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
offset = this.offset;
if(e.clientY-offset.top-blockOriginal.height<=blockOriginal.top-sTop){
var top = Math.max(e.clientY-offset.top+sTop,0),
maxHeight = blockOriginal.top + blockOriginal.height,
height = Math.min(maxHeight,blockOriginal.top + blockOriginal.height
-(e.clientY-offset.top)-sTop);
}else{

是还是不是很炫酷啊,小同伙们,学学本示例的笔触吧。

var height =
Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height+sTop,offset.height-blockOriginal.top-blockOriginal.height),
top = blockOriginal.top+blockOriginal.height;
}
return {height:height, top:top};
},
left : function(e){
var blockOriginal = this.blockOriginal,
offset = this.offset;

你大概感兴趣的篇章:

  • js完成点击后将文字或图表复制到剪贴板的法子
  • php+js达成图片的上传、裁剪、预览、提交示例
  • jquery imgareaselect
    使用使用js与程序结合贯彻图片剪切
  • 接纳JavaScript+canvas完结图片裁剪
  • 依赖原生JS达成图片裁剪
  • javascript
    图片裁剪本领解读
  • JS实现图片剪裁并预览效果
  • 基于JavaScript实现图片剪切效果
  • 使用Javascript裁剪图片并储存的回顾实现

if(e.clientX – offset.left – blockOriginal.width –
blockOriginal.left<=0){
var left = Math.max(e.clientX – offset.left,0),
width = Math.min(blockOriginal.left +
blockOriginal.width,blockOriginal.left + blockOriginal.width
-(e.clientX-offset.left));
}else{
var width =
Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width),
left = blockOriginal.left + blockOriginal.width;
}
return {left : left, width : width};
},
right : function(e){
var blockOriginal = this.blockOriginal,
offset = this.offset;
if(e.clientX-offset.left>=blockOriginal.left){
var width = Math.min(offset.width – blockOriginal.left,e.clientX –
offset.left – blockOriginal.left),
left = blockOriginal.left;
}else{
var width = Math.min(offset.left + blockOriginal.left –
e.clientX,blockOriginal.left),
left = Math.max(e.clientX – offset.left,0);
}
return {left : left, width : width};
},
rightDown : function(e){
return $.extend(this.right(e),this.down(e));
},
leftDown : function(e){
return $.extend(this.left(e),this.down(e));
},
rightUp : function(e){
return $.extend(this.right(e),this.up(e));
},
leftUp : function(e){
return $.extend(this.left(e),this.up(e));
},
getValue : function(){
var block = this.block;
return {
left : parseInt(block.css(“left”)),
top : parseInt(block.css(“top”)),
width : block.width(),
height : block.height()
}
}
}
$.fn.clip = function(options){
options.container = this;
return new clip(options);
}
})();
$(“#container”).clip({
imgC : $(“#imgC”)
})
</script>
</body>
</html>

gd库 看到有图片裁剪 正好整三个 嗯
其实挺简单的 php版,代码如下: !DOCTYPE html html
xmlns= head meta
http-equiv=Content-Ty…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2020 澳门新葡亰官网app 版权所有