js+jquery实现图片裁剪功能

程序员文章站 2022-06-13 09:30:44

现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真...

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

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

代码如下:

<!doctype html>
<html xmlns="https://www.w3.org/1999/xhtml">
<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(https://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);}
#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(https://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);}
.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>

使用方法
 $("#container").clip({
 imgc : $("#imgc"),
 blockclass : "block",
 tipsclass : "tips"
});
 imgc : 表示裁剪图片的容器,也就是右边的图
 blockclass : block的样式名也就是页面上的可以拖动的滑块的样式因为怕和别的页面上的样式重名默认是block
 tipsclass : tips的样式名 也就是页面上显示left width height top的那个span的样式名默认是tips

<ul>
<li>
 
 </li>
 <li>
 
 </li>
</ul>
<script type="text/javascript" src="https://common.cnblogs.com/script/jquery.js"></script>
<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 = $('\
 \
 \
 \
 \
 \
 nbsp; \
 \
 \
 ')
 .bind("mousedown.r",function(e){self.start(e)})
 .appendto(this.container[0]);
 this.tips = $('').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:"+parseint(left) + "top:" + +parseint(top) + "width:"+width+ "height:"+height+"");
 },
 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>

上一篇：杨贵妃真给安禄山洗过澡？唐玄宗知道吗？

下一篇：三星要推第二款折叠屏手机或抢在华为Mate X前发布

js+jquery实现图片裁剪功能

vue+elementUI实现表单和图片上传及验证功能示例

html5使用canvas实现图片下载功能的示例代码

vue中利用simplemde实现markdown编辑器（增加图片上传功能）

Android中使用GridView实现仿微信图片上传功能(附源代码)

Html5 FileReader实现即时上传图片功能实例代码

Android实现拍照及图片裁剪（6.0以上权限处理及7.0以上文件管理）

PHP实现本地图片上传和验证功能

Android Retrofit实现多图片/文件、图文上传功能

android实现一个图片验证码倒计时功能

HTML5 和小程序实现拍照图片旋转、压缩和上传功能