--依赖于jQuery;
1、调用方式：
view:复制代码
这里的 photoSrc 可以是本地图片地址、也可以是网络图片地址（需要跨域）、还可以是Base64编码图片
jQuery:$('#draftPhoto').photoCrop({ img : $scope.tempdraftPhoto, fixedScale:false, isHead:false, callBack:function(data){ if(data && data.success){ //取出返回结果值 - 返回结果值根据情况做取舍 var type = data.type, imgBase64Url = data.imgBase64Url; console.log(type); console.log(imgBase64Url); }else{ tipsShow("截图失败, 回调参数错误！"); } }});复制代码 2、代码实现：
(function ($){ $.fn.photoCrop=function (option) { //默认参数 var opt={ img:'', //图片src fixedScale:9/5, //缩放 isHead:null, //圆形 maxWidth:'860', //最大宽度 maxHeight:'1080', //最大高度 callBack:function () {} //回调 }; opt=$.extend(opt,option);//覆盖默认参数 var _this=this;//作用于 var imgSrc=opt.img ? opt.img : _this.attr('src');//图片Src //裁剪主界面 - 包括 遮罩 和 图片显示 + 操作按钮 var photoCropBox=$(' ' + ' ' + ' 
' + ' ' + ' ' + ' ' + ' 正面截图 确 定 取 消' + ' ' + ' ' + ' ' + ' ' + ' 背面截图 确 定 取 消' + ' ' + ' ' + ' '); $('body').append(photoCropBox); //原图显示容器 var _box=$('#photoCropBox-img'); var imgWidth=_box.find('img').width(); //操作按钮 $('#photoCropBox-option1 span, #photoCropBox-option2 span').css({ lineHeight:'26px', background:'#888', color:'#eee', display:'inline-block', paddingLeft:'10px', paddingRight:'10px', marginRight:'8px', cursor:'pointer' }); //裁剪 - 截图区域 - 边框线 + 原图背景 + 缩放点 var cropBox=$(' '); //截图区域背景 var screen=$(' '); _box.append(cropBox).append(screen); //裁剪 - 截图区域DOM var _corp=$('#photoCropBox-cropBox'); //截图区域 选择线 var cropBoxLine=$('#cropBoxLine'); setTimeout(function () { 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({ position:'absolute', opacity:.5 }); $('#photoCropBox-cropBox .bot').css({ position:'absolute', width:8, height:8, background:'#0f0', 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), _sx=e.pageX, _sy=e.pageY, _tx=_this.offset().left, _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 _this=$(this), _sx=e.pageX, _sy=e.pageY, _thisX=parseInt(_this.css('left')), _thisY=parseInt(_this.css('top')), _thisW=parseInt(_this.css('width')), _thisH=parseInt(_this.css('height')), pW=$('#photoCropBox-bg').width(), pH=$('#photoCropBox-bg').height(); $(document).on('mousemove',function (e) { e.preventDefault(); var _ex=e.pageX, _ey=e.pageY, _x=Number(_ex)-Number(_sx), _y=Number(_ey)-Number(_sy); _x+=_thisX; _y+=_thisY; if(_x<0) {_x=0;} if(_y<0) {_y=0;} if(_y>pH-_thisH) {_y=Number(pH)-Number(_thisH);} if(_x>pW-_thisW) {_x=Number(pW)-Number(_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, _that=$(this), _this=$('#photoCropBox-bg'), _tx=_this.offset().left, _ty=_this.offset().top, _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=Number((Number(_ex)-Number(_esx))/opt.fixedScale)+Number(_esy); if(_that.hasClass('right-top') || _that.hasClass('left-bottom')){ _ey=Number((Number(_esx)-Number(_ex))/opt.fixedScale)+Number(_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), _this=$('#photoCropBox-bg'), _tx=_this.offset().left, _ty=_this.offset().top, _sx=_corp.offset().left, _sy=_corp.offset().top, 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(!(Number(_ey)-Number(_sy)>0)){ var _x=Number(_sx)-Number(_tx),_y=Number(_ey)-Number(_ty),_w=cw,_h=-(Number(_ey)-Number(_sy)); if(_y<0) {_y=0;_h=Number(_sy)-Number(_ty);} }else{ var _x=Number(_sx)-Number(_tx),_y=Number(_sy)-Number(_ty),_w=cw,_h=Number(_ey)-Number(_sy); if(_h>Number(_this.height())-Number(_y)) {_h=Number(_this.height())-Number(_y);} } }else { if(Number(_ex)-Number(_sx)>0 && Number(_ey)-Number(_sy)>0){ var _x=Number(_sx)-Number(_tx),_y=Number(_sy)-Number(_ty),_w=Number(_ex)-Number(_sx),_h=ch; if(Number(_w)>Number(_this.width())-Number(_x)) _w=Number(_this.width())-Number(_x); }else if(!(Number(_ex)-Number(_sx)>0) && Number(_ey)-Number(_sy)>0){ var _x=Number(_ex)-Number(_tx),_y=Number(_sy)-Number(_ty),_w=-(Number(_ex)-Number(_sx)),_h=ch; if(_x<0) {_x=0;_w=Number(_sx)-Number(_tx);} } } resizeCropBox(_w,_h,_y,_x); }); $(document).on('mouseup',function () { $(document).unbind('mousemove'); lock=false; }); }); var sectionType = ""; //开始裁剪 $('.photoCropBox-start').on('click',function () { sectionType = this.id; _corp.css('display','block'); $('#photoCropBox-bg').css('display','block'); init(); }); //确认 裁剪区域 $('.photoCropBox-end').on('click',function () { if(sectionType){ 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 { //默认选择区域 if(sectionType == 'frontageImg'){ resizeCropBox(_box.width()-200,_box.height()/2-100,50,100); }else if(sectionType == 'backImg'){ resizeCropBox(_box.width()-200,_box.height()/2-100,_box.height()/2+50,100); }else{ resizeCropBox(_box.width()-200,_box.height()-100,50,100); } } if(opt.fixedScale) { $('.bot.top,.bot.left,.bot.bottom,.bot.right').remove();//固定 } }; //设置弹出层面板位置 function setPosition() { $('#photoCropBox-panel').css({ left:Math.abs($('#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