jquery实现自定义图片裁剪功能代码分享

图片自定义裁剪如何实现？本文主要介绍了jquery实现自定义图片裁剪功能，代码超级简单，易修改。下面跟着小编一起来看下吧，希望能帮助到大家。

1.自定义宽高效果

1.html 代码  index.html

登录后复制

2.添加插件代码

(function ($) { $.fn.photoCrop=function (option) { var opt={ img:'', fixedScale:9/5, isHead:null, maxWidth:'1400', maxHeight:'800', callBack:function () {} } opt=$.extend(opt,option); var _this=this; var imgSrc=opt.img ? opt.img:_this.attr('src'); var photoCropBox=$('
' + '
' + '
' + '
裁剪手动裁剪取消
' + '
'); $('body').append(photoCropBox); var _box=$('#photoCropBox-img'); var imgWidth=_box.find('img').width(); $('#photoCropBox-option span').css({ lineHeight:'30px', background:'#000', color:'#fff', display:'inline-block', paddingLeft:'20px', paddingRight:'20px', marginRight:'5px', cursor:'pointer' }) var cropBox=$('
' + '
' + '' + '
' + '
' + '
' + '
' + '
'); var screen=$('
') _box.append(cropBox); _box.append(screen); var _corp=$('#photoCropBox-cropBox'); var cropBoxLine=$('#cropBoxLine'); setTimeout(function () { console.log(imgWidth) cropBoxLine.find('img').css('width',_box.find('img').width()+'px') },20) if(opt.isHead){ cropBoxLine.css({borderRadius:'100%'}) } $('#photoCropBox-cropBox .line,#photoCropBox-cropBox .line2').css({ background:'url(./img/Jcrop.gif)', position:'absolute', opacity:.5 }) $('#photoCropBox-cropBox .bot').css({ background:'rgba(0,0,0,0.5)', position:'absolute', width:7, height:7, border:'1px #999 solid' }) setTimeout(function () { init(); },10) $(window).on('resize',function () { setPosition(); }) $('#photoCropBox-cancel').on('click',function () { closeBox(); }) $('#photoCropBox-bg').on('mousedown',function (e) { if(opt.fixedScale) return //固定 $('#cropBoxLine2').hide(); var _this=$(this); var _sx=e.pageX,_sy=e.pageY; var _tx=_this.offset().left; var _ty=_this.offset().top; $(document).on('mousemove',function (e) { e.preventDefault(); var _ex=e.pageX,_ey=e.pageY; getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this) }) $(document).on('mouseup',function () { $(document).unbind('mousemove'); $('#cropBoxLine2').show(); }) }) var lock=false; _corp.on('mousedown',function (e) { if(lock){return} var _sx=e.pageX,_sy=e.pageY; var pW=$('#photoCropBox-bg').width(),pH=$('#photoCropBox-bg').height(); var _this=$(this),_thisX=parseInt(_this.css('left')),_thisY=parseInt(_this.css('top')),_thisW=parseInt(_this.css('width')),_thisH=parseInt(_this.css('height')); $(document).on('mousemove',function (e) { e.preventDefault(); var _ex=e.pageX,_ey=e.pageY; var _x=_ex-_sx,_y=_ey-_sy; _x+=_thisX;_y+=_thisY; if(_x<0) _x=0; if(_ypH-_thisH) _y=pH-_thisH; if(_x>pW-_thisW) _x=pW-_thisW; resizeCropBox("","",_y,_x,true) }) $(document).on('mouseup',function () { $(document).unbind('mousemove'); }) }) //控制大小 $('#cropBoxLine2 .bot').on("mousedown",function (e) { lock=true; var _esx=e.pageX,_esy=e.pageY; var _that=$(this); var _this=$('#photoCropBox-bg'); var _tx=_this.offset().left; var _ty=_this.offset().top; var _sx=_corp.offset().left,_sy=_corp.offset().top;//裁剪框 if(_that.hasClass('right-top')) _sy+=_corp.height(); if(_that.hasClass('left-top')){ _sy+=_corp.height(); _sx+=_corp.width(); } if(_that.hasClass('left-bottom')) _sx+=_corp.width(); $(document).on('mousemove',function (e) { e.preventDefault(); var _ex=e.pageX,_ey=e.pageY; if(opt.fixedScale){ _ey=(_ex-_esx)/opt.fixedScale+_esy; if(_that.hasClass('right-top') || _that.hasClass('left-bottom')){ _ey=(_esx-_ex)/opt.fixedScale+_esy; } } getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this) }) $(document).on('mouseup',function () { $(document).unbind('mousemove'); lock=false; }) }) $('#cropBoxLine2 .left,#cropBoxLine2 .top,#cropBoxLine2 .right,#cropBoxLine2 .bottom').on('mousedown',function (e) { if(opt.fixedScale) return //固定 lock=true; var _that=$(this); var _this=$('#photoCropBox-bg'); var _tx=_this.offset().left;// var _ty=_this.offset().top; var _sx=_corp.offset().left,_sy=_corp.offset().top; var ch=_corp.height(),cw=_corp.width(); if(_that.hasClass('top')){ _sy+=ch; }else if(_that.hasClass('left')) { _sx+=cw; } $(document).on('mousemove',function (e) { e.preventDefault(); var _ex=e.pageX,_ey=e.pageY; if(_that.hasClass('top') || _that.hasClass('bottom')){ if(!(_ey-_sy>0)){ var _x=_sx-_tx,_y=_ey-_ty,_w=cw,_h=-(_ey-_sy); if(_y_this.height()-_y) _h=_this.height()-_y; } }else { if(_ex-_sx>0 && _ey-_sy>0){ var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=ch; if(_w>_this.width()-_x) _w=_this.width()-_x; }else if(!(_ex-_sx>0) && _ey-_sy>0){ var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=ch; if(_x<0) {_x=0;_w=_sx-_tx;} } } resizeCropBox(_w,_h,_y,_x); }) $(document).on('mouseup',function () { $(document).unbind('mousemove'); lock=false; }) }) $('#photoCropBox-start').on('click',function () { _corp.css('display','block') $('#photoCropBox-bg').css('display','block') }) $('#photoCropBox-end').on('click',function () { getImage() closeBox() }) function init() { setPosition() if(opt.fixedScale){ if((_box.height()-_box.width()/opt.fixedScale/2)0 && _ey-_sy>0){ var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=_ey-_sy; if(_w>_this.width()-_x) _w=_this.width()-_x; if(_h>_this.height()-_y) _h=_this.height()-_y; }else if(!(_ex-_sx>0) && _ey-_sy>0){ var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=_ey-_sy; if(_x_this.height()-_y) _h=_this.height()-_y; }else if(!(_ex-_sx>0) && !(_ey-_sy>0)){ var _x=_ex-_tx,_y=_ey-_ty,_w=-(_ex-_sx),_h=-(_ey-_sy); if(_x<0) {_x=0;_w=_sx-_tx;} if(_y0 && !(_ey-_sy>0)){ var _x=_sx-_tx,_y=_ey-_ty,_w=_ex-_sx,_h=-(_ey-_sy); if(_y_this.width()-_x) _w=_this.width()-_x; } if(opt.fixedScale){ if(_w/opt.fixedScale>_h){ _w=_h*opt.fixedScale }else if (_w<opt.fixedScale*_h){ _h=_w/opt.fixedScale } } resizeCropBox(_w,_h,_y,_x); } var c=document.getElementById("cropCanvas"); var ctx=c.getContext("2d"); var img=$('#dataImg'); function getImage() { var scale=$('#photoCropBox-img').width()/$('#dataImg').width(); var sx=parseInt(_corp.css('left'))/scale; var sy=parseInt(_corp.css('top'))/scale; var swidth=parseInt(_corp.css('width'))/scale; var sheight=parseInt(_corp.css('height'))/scale; var c_img = new Image; c_img.onload = function () { ctx.drawImage(c_img,sx,sy,swidth,sheight,0,0,swidth,sheight); var url=c.toDataURL("image/jpeg"); opt.callBack(url); }; c_img.crossOrigin = 'anonymous'; //可选值：anonymous，* c_img.src = imgSrc c.width = swidth; c.height = sheight; } //宽，高,top,left,m-是否是拖拽 function resizeCropBox(w,h,t,l,m) { _corp.css(prefix()+'transition','all 0s'); if(!m){ _corp.css({ width:w, height:h, top:t+'px', left:l+'px' }) }else { _corp.css({ top:t+'px', left:l+'px' }) } cropBoxLine.find('img').css({ top:-t+'px', left:-l+'px' }) } function closeBox() { $('#photoCropBox').remove(); } function prefix() { var prefixes=['','-ms-','-moz-','-webkit-','-o-'],i=0; while (i < prefixes.length){ if($('body').css(prefixes[i]+'transition')){ return prefixes[i]; } i++; } } } })(jQuery)　

登录后复制

3.绑定代码

$(function () { $('.source').on('click',function () { $(this).photoCrop({ fixedScale:false, isHead:false, callBack:function(url){ $('.target').attr('src',url) }, }); })  })

登录后复制

2.宽高比例固定效果

代码：

$(function () { $('.source').on('click',function () { $(this).photoCrop({ fixedScale:5/6, isHead:false, callBack:function(url){ $('.target').attr('src',url) }, }); }) })

登录后复制

3.头像裁剪效果

代码：

$(function () { $('.source').on('click',function () { $(this).photoCrop({ fixedScale:1, isHead:true, callBack:function(url){ $('.target').attr('src',url) }, }); }) })

登录后复制

大家学会了吗？赶紧动手尝试一下吧。

相关推荐：

jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能

微信小程序图片选择区域实现裁剪功能方法教程

js+jquery实现图片裁剪功能_jquery

以上就是jquery实现自定义图片裁剪功能代码分享的详细内容，更多请关注【创想鸟】其它相关文章！