forked from baijunjie/PhotoClip.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPhotoClip.min.js
2 lines (2 loc) · 8.83 KB
/
PhotoClip.min.js
1
2
/* PhotoClip v2.0.2 | Relying on the plug-in [jquery.js] [iscroll-zoom.js] [hammer.js] [lrz.all.bundle.js] */
!function(t,o){"use strict";"function"==typeof define&&define.amd?define(["jquery","iscroll-zoom","hammer","lrz"],o):"object"==typeof exports?module.exports=o(require("jquery"),require("iscroll-zoom"),require("hammer"),require("lrz")):(t.bjj=t.bjj||{},t.bjj.PhotoClip=o(t.jQuery,t.IScroll,t.Hammer,t.lrz))}(this,function(t,o,e,n){"use strict";function i(o,e){if(!window.FileReader)return void alert("您的浏览器不支持 HTML5 的 FileReader API， 因此无法初始化图片裁剪插件，请更换最新的浏览器！");var n=t.extend({},s,e);a.call(this,o,n)}function a(i,a){function s(){po=!0,go.append(this),w(ro,function(){so=this.naturalWidth,co=this.naturalHeight},this),w(mo,function(){u()}),Y.call(E,this)}function l(){var t={zoom:!0,scrollX:!0,scrollY:!0,freeScroll:!0,mouseWheel:!0,wheelAction:"zoom"};jo=new o(ho[0],t)}function u(){qo=0,Ao=0,Ro=0,lo=so,uo=co,go.css({width:so,height:co}),F(go,qo,Ao,Ro),p(so,co),jo.zoom(jo.options.zoomStart);var t=.5*(V-so*jo.scale),o=.5*(_-co*jo.scale);jo.scrollTo(t,o)}function p(t,o){T(t,o),jo.scale<jo.options.zoomMin&&jo.zoom(jo.options.zoomMin),mo.css({width:t,height:o}),ho.append(mo),jo.refresh()}function f(){var t=!!navigator.userAgent.match(/mobile/i);if(t){To=new e(mo[0]),To.add(new e.Rotate);var o,n;To.on("rotatemove",function(t){Lo||(o=t.rotation,o>180?o-=360:-180>o&&(o+=360),n=o>0?1:0>o?-1:0)}),To.on("rotateend",function(t){Lo||Math.abs(o)>30&&(1==n?d(t.center):-1==n&&h(t.center))})}else mo.on("dblclick",function(t){d({x:t.clientX,y:t.clientY})})}function d(t){m(90,t)}function h(t){m(-90,t)}function m(t,o){if(!Lo){Lo=!0;var e;e=o?x(mo,o.x,o.y):y(mo,ho,.5*V,.5*_);var n=k(Ro,e),i=n.x,a=n.y,r=0,s=0,c=0,l=0,u=Ro+t;90==u||-270==u?(r=i+a,s=a-i,u>Ro?(c=co-i-a,l=i-a):Ro>u&&(c=co-a-(so-i),l=i+a-co),lo=co,uo=so):180==u||-180==u?(r=2*i,s=2*a,u>Ro?(c=so-i-(co-a),l=co-(i+a)):Ro>u&&(c=so-(i+a),l=co-a-(so-i)),lo=so,uo=co):270==u||-90==u?(r=i-a,s=i+a,u>Ro?(c=i+a-so,l=so-i-(co-a)):Ro>u&&(c=a-i,l=so-i-a),lo=co,uo=so):(0==u||360==u||-360==u)&&(r=0,s=0,u>Ro?(c=i-a,l=i+a-so):Ro>u&&(c=i+a-co,l=a-i),lo=so,uo=co),0==Ro?(qo=0,Ao=0):90==Ro||-270==Ro?(qo-=i+a,Ao-=a-i):180==Ro||-180==Ro?(qo-=2*i,Ao-=2*a):(270==Ro||-90==Ro)&&(qo-=i-a,Ao-=i+a),qo=qo.toFixed(2)-0,Ao=Ao.toFixed(2)-0,F(go,qo,Ao,Ro,i,a),C(go,qo,Ao,u,200,function(){Lo=!1,Ro=u%360,qo+=r+c,Ao+=s+l,qo=qo.toFixed(2)-0,Ao=Ao.toFixed(2)-0,F(go,qo,Ao,Ro),jo.scrollTo(jo.x-c*jo.scale,jo.y-l*jo.scale),p(lo,uo)})}}function g(){zo=document.createElement("canvas")}function v(){if(!po)return void alert("亲，当前没有图片可以裁剪!");var t=y(mo,ho),o=jo.scale,e=zo.getContext("2d");e.clearRect(0,0,zo.width,zo.height),e.save(),eo&&no?(zo.width=eo,zo.height=no,e.scale(eo/V*o,no/_*o)):(zo.width=V/o,zo.height=_/o),e.translate(qo-t.x/o,Ao-t.y/o),e.rotate(Ro*Math.PI/180),e.drawImage(ro[0],0,0),e.restore();try{var n=zo.toDataURL(Q,H);vo.css("background-image","url("+n+")"),$.call(E,n)}catch(i){throw new Error("截图失败！当前图片源文件可能存在跨域问题，请确保图片与应用同源。如果您是在本地环境下执行本程序，请更换至服务器环境。")}}function b(){q()}function y(t,o,e,n){e=e||0,n=n||0;var i,a;return w(t,function(){i=t.offset()}),w(o,function(){a=o.offset()}),{x:a.left-i.left+e,y:a.top-i.top+n}}function x(t,o,e){o=o||0,e=e||0;var n;return w(t,function(){n=t.offset()}),{x:o+So.scrollLeft()-n.left,y:e+So.scrollTop()-n.top}}function w(o,e,n){var i=t();t.each(o,function(o,e){for(var n,a=e instanceof jQuery?e:t(e),r=a.parents().addBack().filter(":hidden"),o=r.length;o--&&a.is(":hidden");)n=r.eq(o),"none"===n.css("display")&&(i=i.add(n.show()))}),"function"==typeof e&&e.call(n||this),i.hide()}function k(t,o){var e=jo.scale,n={};return 0==t?(n.x=o.x/e,n.y=o.y/e):90==t||-270==t?(n.x=o.y/e,n.y=co-o.x/e):180==t||-180==t?(n.x=so-o.x/e,n.y=co-o.y/e):(270==t||-90==t)&&(n.x=so-o.y/e,n.y=o.x/e),n}function z(t,o,e,n){var i=t/e,a=o/n;return i>a?i:a}function T(t,o){jo.options.zoomMin=z(V,_,t,o),jo.options.zoomMax=Math.max(1,jo.options.zoomMin),jo.options.zoomStart=Math.min(jo.options.zoomMax,z(Mo,Fo,t,o))}function j(){ro&&ro.length&&(ro.off(),ro.remove(),delete ro[0])}function M(o){j(),ro=t("<img>").css({"user-select":"none","pointer-events":"none"}),io||(io=!0,X.call(E,ro[0])),ro.on("load",s),ro.attr("src",o)}function F(t,o,e,n,i,a){i=i||0,a=a||0;var r={};r[c+"transform"]="translateZ(0) translate("+o+"px,"+e+"px) rotate("+n+"deg)",r[c+"transform-origin"]=i+"px "+a+"px",t.css(r)}function C(t,o,e,n,i,a){t.css(c+"transform"),t.css(c+"transition",c+"transform "+i+"ms"),t.one(r,function(){t.css(c+"transition",""),a.call(this)}),t.css(c+"transform","translateZ(0) translate("+o+"px,"+e+"px) rotate("+n+"deg)")}function S(t){var o=t+"";return/%$/.test(o)}function L(){fo=t(i).css({"user-select":"none",overflow:"hidden"}),"static"==fo.css("position")&&fo.css("position","relative"),ho=t("<div class='photo-clip-view'>").css({position:"absolute",left:"50%",top:"50%"}).appendTo(fo),mo=t("<div class='photo-clip-moveLayer'>").appendTo(ho),go=t("<div class='photo-clip-rotateLayer'>").appendTo(mo);var o=t("<div class='photo-clip-mask'>").css({position:"absolute",left:0,top:0,width:"100%",height:"100%","pointer-events":"none"}).appendTo(fo);bo=t("<div class='photo-clip-mask-left'>").css({position:"absolute",left:0,right:"50%",top:"50%",bottom:"50%",width:"auto","background-color":"rgba(0,0,0,.5)"}).appendTo(o),yo=t("<div class='photo-clip-mask-right'>").css({position:"absolute",left:"50%",right:0,top:"50%",bottom:"50%","background-color":"rgba(0,0,0,.5)"}).appendTo(o),xo=t("<div class='photo-clip-mask-top'>").css({position:"absolute",left:0,right:0,top:0,bottom:"50%","background-color":"rgba(0,0,0,.5)"}).appendTo(o),wo=t("<div class='photo-clip-mask-bottom'>").css({position:"absolute",left:0,right:0,top:"50%",bottom:0,"background-color":"rgba(0,0,0,.5)"}).appendTo(o),ko=t("<div class='photo-clip-area'>").css({border:"1px dashed #ddd",position:"absolute",left:"50%",top:"50%"}).appendTo(o),vo=t(D),vo.length&&vo.css({"background-color":"#666","background-repeat":"no-repeat","background-position":"center","background-size":"contain"})}function q(t,o){var e=to,n=oo;if("number"==typeof t&&(to=t),"number"==typeof o&&(oo=o),V=to,_=oo,(J||K)&&(N=to/oo),w(fo,function(){Mo=fo.width(),Fo=fo.height()}),J&&(V=Mo/100*parseFloat(J),K||(_=V/N)),K&&(_=Fo/100*parseFloat(K),J||(V=_*N)),ho.css({width:V,height:_,"margin-left":-V/2,"margin-top":-_/2}),bo.css({"margin-right":V/2,"margin-top":-_/2,"margin-bottom":-_/2}),yo.css({"margin-left":V/2,"margin-top":-_/2,"margin-bottom":-_/2}),xo.css({"margin-bottom":_/2}),wo.css({"margin-top":_/2}),ko.css({width:V,height:_,"margin-left":-V/2-1,"margin-top":-_/2-1}),lo&&uo){var i=(V-e)/2*jo.scale,a=(_-n)/2*jo.scale;jo.scrollBy(i,a),p(lo,uo)}}function A(t){M(t)}function R(){ao.off("change"),ao=null,To?(To.off("rotatemove"),To.off("rotateend"),To.destroy(),To=null):mo.off("dblclick"),jo.destroy(),jo=null,fo.empty(),fo=null,ho=null,mo=null,go=null,vo.css({"background-color":"","background-repeat":"","background-position":"","background-size":""}),vo=null}var E=this,I=a.size,W=a.adaptive,P=a.outputSize,Q=a.outputType||"image/jpeg",H=a.outputQuality,O=a.file,B=a.source,D=a.view,U=a.ok,X=a.loadStart,Y=a.loadComplete,Z=a.loadError,$=a.clipFinish,G=a.lrzOption;t.isArray(I)||(I=[260,260]),t.isArray(P)||(P=[0,0]);var J,K,N,V,_,to=I[0]||260,oo=I[1]||260,eo=Math.max(P[0],0),no=Math.max(P[1],0);t.isArray(W)&&(W[0]&&(J=S(W[0])?W[0]:!1),W[1]&&(K=S(W[1])?W[1]:!1)),"jpg"===Q?Q="image/jpeg":"png"===Q&&(Q="image/png");var io=!1,ao=t(O);ao.length&&(ao.attr("accept","image/jpeg, image/x-png, image/gif"),ao.on("change",function(){if(this.files.length){var t=this.files[0];if(!/image\/\w+/.test(t.type))return alert("图片格式不正确，请选择正确格式的图片文件！"),!1;io||(io=!0,X.call(E,t));var o=new FileReader;o.onprogress=function(t){console.log((t.loaded/t.total*100).toFixed()+"%")},o.onload=function(){n(t,G).then(function(t){M(t.base64),io=!1}).catch(function(t){alert("图片处理失败"),Z.call(E,t),io=!1})},o.onerror=function(t){alert("图片加载失败"),Z.call(E,t),io=!1},o.readAsDataURL(t)}}),ao.click(function(){this.value=""})),B&&A(B);var ro,so,co,lo,uo,po,fo,ho,mo,go,vo,bo,yo,xo,wo,ko,zo,To,jo,Mo,Fo;L(),l(),f(),g();var Co=t(U);Co.length&&Co.click(function(){v()});var So=t(window);b(),So.resize(b);var Lo,qo,Ao,Ro;E.setSize=q,E.setImg=A,E.rotateCW=d,E.rotateCCW=h,E.destroy=R}var r,s={size:[260,260],adaptive:null,outputSize:[0,0],outputType:"jpg",outputQuality:.8,file:"",source:"",view:"",ok:"",loadStart:function(){},loadComplete:function(){},loadError:function(){},clipFinish:function(){},lrzOption:{}},c="";return function(){var t,o={Webkit:"webkit",Moz:"",O:"o"},e=document.documentElement,n=function(o){return t?t+o:o.toLowerCase()};for(var i in o)if(void 0!==e.style[i+"TransitionProperty"]){c="-"+i.toLowerCase()+"-",t=o[i];break}r=n("TransitionEnd")}(),i});