js jquery implements image cropping function

Now when we use the personal center of major websites, we have a function to upload personal avatars. After the user uploads a personal photo, it may not meet the requirements of the website, so the user is asked to crop the photo, and finally an avatar is generated based on the user's cropped size. This function is really great. When I didn’t understand js, it felt amazing, so amazing. I thought that one day I could understand the technology inside, how awesome it would be~ Do you all have the same thoughts as me~ Haha~~

Let’s use javascript to implement this function.

Copy code The code is as follows: http://www.w3.org/1999/xhtml "> clip *{ 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( http://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( http://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} 使用方法 $("#container").clip({ imgC : $("#imgC"), blockClass : "block", tipsClass : "tips" });

imgC : 表示裁剪图片的容器,也就是右边的图

blockClass : block的样式名 也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名 默认是block

tipsClass : tips的样式名 也就是页面上显示left width height top的那个span的样式名 默认是tips

http://common.cnblogs.com/script/jquery.js"> > (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 = $(' \ \ \ \ \ \ \ \ \ ') .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 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 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") }) 是不是很炫酷啊，小伙伴们，学学本示例的思路吧。

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

js jquery implements image cropping function_jquery