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

图片自定义裁剪如何实现？本文主要介绍了jquery实现自定义图片裁剪功能，代码超级简单，易修改。下面跟着小编一起来看下吧，希望能帮助到大家。
1.自定义宽高效果
1.html 代码 index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <script src="./jquery-1.12.4.min.js"></script> </head> <body> <img class="source" src="./test2.jpg" alt=""> <img src="" class="target" alt=""> </body> </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=$('' + '<canvas id="cropcanvas" style="position: absolute;opacity:1;left: 0;top: 0;z-index: 100"></canvas><img id="dataimg" src="'+imgsrc+'" style="opacity: 0;position: absolute" alt="">' + '' + '<img src="'+imgsrc+'" style="max-width: 100%;display: block;max-height: 100%;max-height: '+(opt.maxheight-110)+'px;" alt="">裁剪手动裁剪取消' + ''); $('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=$('' + '' + '<img src="'+imgsrc+'" style="display: block;width: '+_box.find('img').width()+'px;position: absolute;max-height: none;max-width: none" alt="">' + '' + '' + '' + '' + ''); 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(_y<0) _y=0; if(_y>ph-_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<0) {_y=0;_h=_sy-_ty;} }else{ var _x=_sx-_tx,_y=_sy-_ty,_w=cw,_h=_ey-_sy; if(_h>_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){ resizecropbox(_box.height()*opt.fixedscale,_box.height(),0,(_box.width()-_box.height()*opt.fixedscale)/2) }else { resizecropbox(_box.width()/2,_box.width()/opt.fixedscale/2,(_box.height()-_box.width()/opt.fixedscale/2)/2,_box.width()/4) } }else { resizecropbox(_box.width()/2,_box.height()/2,_box.height()/4,_box.width()/4) } if(opt.fixedscale) { $('.bot.top,.bot.left,.bot.bottom,.bot.right').remove();//固定 } } function setposition() { $('#photocropbox-panel').css({ top:($('#photocropbox-panel-box').height()-$('#photocropbox-panel').height())/2+'px', left:($('#photocropbox-panel-box').width()-$('#photocropbox-panel').width())/2+'px', opacity:1 }) } //结束x,y 背景x,y function getposition(_ex,_ey,_ty,_tx,_sx,_sy,_this) { if(_ex-_sx>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<0) {_x=0;_w=_sx-_tx;} if(_h>_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(_y<0) {_y=0;_h=_sy-_ty;} }else if(_ex-_sx>0 && !(_ey-_sy>0)){ var _x=_sx-_tx,_y=_ey-_ty,_w=_ex-_sx,_h=-(_ey-_sy); if(_y<0) {_y=0;_h=_sy-_ty;} if(_w>_this.width()-_x) _w=_this.width()-_x; } if(opt.fixedscale){ if(_w/opt.fixedscale>_h){ _w=_h*opt.fixedscale }else if (_w 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实现自定义图片裁剪功能代码分享的详细内容。

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

VIP推荐