js+jquery实现图片裁剪功能

时间：2021-05-26

现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了，原来不懂js的时候，感觉很神奇，太神奇了。心想哪天要是自己也能搞明白这里面的技术，那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~

下面我们就来用javascript来实现这个功能吧。

复制代码 代码如下:
<!DOCTYPE html>
<html xmlns="http://mand("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>

是不是很炫酷啊，小伙伴们，学学本示例的思路吧。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章