1 line
7.3 KiB
JavaScript
1 line
7.3 KiB
JavaScript
!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";var i={size:[260,260],outputSize:[0,0],file:"",view:"",ok:"",loadStart:function(){},loadComplete:function(){},loadError:function(){},clipFinish:function(){}};var r,a="";return function(){var t,o,e={Webkit:"webkit",Moz:"",O:"o"},n=document.documentElement;for(var i in e)if(void 0!==n.style[i+"TransitionProperty"]){a="-"+i.toLowerCase()+"-",t=e[i];break}o="TransitionEnd",r=t?t+o:o.toLowerCase()}(),function(s,c){if(window.FileReader){var l=function(i,s){var c=s.size,l=s.outputSize,p=s.file,d=s.view,u=s.ok,f="image/jpeg",h=s.loadStart,m=s.loadComplete,g=s.loadError,v=s.clipFinish;ot(c)||(c=[260,260]),ot(l)||(l=[0,0]);var b,x,y,w,k,z,T,M,j,S,F,L,q,R,C=c[0]||260,A=c[1]||260,E=Math.max(l[0],0),_=Math.max(l[1],0),I=t(p);if(I.length){var P,H;I.attr("accept","image/*"),I.on("change",function(){if(this.files.length){var o=this.files[0];if(!/image\/\w+/.test(o.type))return dr_tips(0,"图片格式不正确，请选择正确格式的图片文件！"),!1;var e=new FileReader;e.onprogress=function(t){},e.onload=function(e){n(o).then(function(o){var e;e=o.base64,b&&b.length&&(b.remove(),delete b[0]),(b=t("<img>").css({"user-select":"none","pointer-events":"none"})).on("load",Z),b.attr("src",e)}).catch(function(t){dr_tips(0,"图片处理失败"),g.call(this,t)})},e.onerror=function(t){dr_tips(0,"图片加载失败"),g.call(this,t)},e.readAsDataURL(o),h.call(e,o)}}),I.click(function(){this.value=""}),function(){"static"==(k=t(i).css({"user-select":"none",overflow:"hidden"})).css("position")&&k.css("position","relative"),z=t("<div class='photo-clip-view'>").css({position:"absolute",left:"50%",top:"50%",width:C,height:A,"margin-left":-C/2,"margin-top":-A/2}).appendTo(k),T=t("<div class='photo-clip-moveLayer'>").appendTo(z),M=t("<div class='photo-clip-rotateLayer'>").appendTo(T);var o=t("<div class='photo-clip-mask'>").css({position:"absolute",left:0,top:0,width:"100%",height:"100%","pointer-events":"none"}).appendTo(k);t("<div class='photo-clip-mask-left'>").css({position:"absolute",left:0,right:"50%",top:"50%",bottom:"50%",width:"auto",height:A,"margin-right":C/2,"margin-top":-A/2,"margin-bottom":-A/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(o),t("<div class='photo-clip-mask-right'>").css({position:"absolute",left:"50%",right:0,top:"50%",bottom:"50%","margin-left":C/2,"margin-top":-A/2,"margin-bottom":-A/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(o),t("<div class='photo-clip-mask-top'>").css({position:"absolute",left:0,right:0,top:0,bottom:"50%","margin-bottom":A/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(o),t("<div class='photo-clip-mask-bottom'>").css({position:"absolute",left:0,right:0,top:"50%",bottom:0,"margin-top":A/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(o),t("<div class='photo-clip-area'>").css({border:"1px dashed #ddd",position:"absolute",left:"50%",top:"50%",width:C,height:A,"margin-left":-C/2-1,"margin-top":-A/2-1}).appendTo(o),(j=t(d)).length&&j.css({"background-color":"#666","background-repeat":"no-repeat","background-position":"center","background-size":"contain"})}(),L=new o(z[0],{zoom:!0,scrollX:!0,scrollY:!0,freeScroll:!0,mouseWheel:!0,wheelAction:"zoom"}),navigator.userAgent.match(/mobile/i)?((F=new e(T[0])).add(new e.Rotate),F.on("rotatemove",function(t){D||((P=t.rotation)>180?P-=360:P<-180&&(P+=360),H=P>0?1:P<0?-1:0)}),F.on("rotateend",function(t){D||Math.abs(P)>30&&(1==H?Q(t.center):-1==H&&G(-90,t.center))})):T.on("dblclick",function(t){Q({x:t.clientX,y:t.clientY})}),S=document.createElement("canvas");var W=t(u);W.length&&W.click(function(){!function(){if(w){var t=K(T,z),o=L.scale,e=S.getContext("2d");e.clearRect(0,0,S.width,S.height),e.save(),E&&_?(S.width=E,S.height=_,e.scale(E/C*o,_/A*o)):(S.width=C/o,S.height=A/o),e.translate(O-t.x/o,U-t.y/o),e.rotate(X*Math.PI/180),e.drawImage(b[0],0,0),e.restore();var n=S.toDataURL(f,1);j.css("background-image","url("+n+")"),v.call(b[0],n)}else dr_tips(0,"当前没有图片可以裁剪!")}()});var D,O,U,X,Y=t(window);return J(),Y.resize(J),{destroy:function(){I.off("change"),I=null,F?(F.off("rotatemove"),F.off("rotateend"),F=null):T.off("dblclick"),L.destroy(),L=null,k.empty(),k=null,z=null,T=null,M=null,j.css({"background-color":"","background-repeat":"","background-position":"","background-size":""}),j=null}}}function Z(){w=!0,M.append(this),N.call(this,b,function(){x=this.naturalWidth,y=this.naturalHeight}),N(T,function(){!function(){O=0,U=0,X=0,M.css({width:x,height:y}),tt(M,O,U,X),$(x,y),L.zoom(L.options.zoomStart),B(x,y);var t=.5*(C-x*L.options.zoomStart),o=.5*(A-y*L.options.zoomStart);L.scrollTo(t,o)}()}),m.call(this,this.src)}function B(t,o){T.css({width:t,height:o}),z.append(T),L.refresh()}function Q(t){G(90,t)}function G(t,o){if(!D){var e,n,i,s,c;D=!0,o?(n=T,i=o.x,s=o.y,i=i||0,s=s||0,N(n,function(){c=n.offset()}),e={x:i+Y.scrollLeft()-c.left,y:s+Y.scrollTop()-c.top}):e=K(T,z,.5*C,.5*A);var l,p,d=function(t,o){var e=L.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=y-o.x/e):180==t||-180==t?(n.x=x-o.x/e,n.y=y-o.y/e):270!=t&&-90!=t||(n.x=x-o.y/e,n.y=o.x/e),n}(X,e),u=d.x,f=d.y,h=0,m=0,g=0,v=0,b=X+t;90==b||-270==b?(h=u+f,m=f-u,b>X?(g=y-u-f,v=u-f):b<X&&(g=y-f-(x-u),v=u+f-y),l=y,p=x):180==b||-180==b?(h=2*u,m=2*f,b>X?(g=x-u-(y-f),v=y-(u+f)):b<X&&(g=x-(u+f),v=y-f-(x-u)),l=x,p=y):270==b||-90==b?(h=u-f,m=u+f,b>X?(g=u+f-x,v=x-u-(y-f)):b<X&&(g=f-u,v=x-u-f),l=y,p=x):0!=b&&360!=b&&-360!=b||(h=0,m=0,b>X?(g=u-f,v=u+f-x):b<X&&(g=u+f-y,v=f-u),l=x,p=y),0==X?(O=0,U=0):90==X||-270==X?(O-=u+f,U-=f-u):180==X||-180==X?(O-=2*u,U-=2*f):270!=X&&-90!=X||(O-=u-f,U-=u+f),O=O.toFixed(2)-0,U=U.toFixed(2)-0,tt(M,O,U,X,u,f),function(t,o,e,n,i,s){t.css(a+"transform"),t.css(a+"transition",a+"transform "+i+"ms"),t.one(r,function(){t.css(a+"transition",""),s.call(this)}),t.css(a+"transform","translateZ(0) translate("+o+"px,"+e+"px) rotate("+n+"deg)")}(M,O,U,b,200,function(){D=!1,X=b%360,U+=m+v,O=(O+=h+g).toFixed(2)-0,U=U.toFixed(2)-0,tt(M,O,U,X),L.scrollTo(L.x-g*L.scale,L.y-v*L.scale),$(l,p),L.scale<L.options.zoomMin&&L.zoom(L.options.zoomMin),B(l,p)})}}function J(){N(k,function(){q=k.width(),R=k.height()})}function K(t,o,e,n){var i,r;return e=e||0,n=n||0,N(t,function(){i=t.offset()}),N(o,function(){r=o.offset()}),{x:r.left-i.left+e,y:r.top-i.top+n}}function N(o,e){var n=t();t.each(o,function(o,e){for(var i,r=t(e),a=r.parents().addBack().filter(":hidden"),o=0;o<a.length&&r.is(":hidden");o++)"none"==(i=a.eq(o)).css("display")&&(n=n.add(i.show()))}),"function"==typeof e&&e.call(this),n.hide()}function V(t,o,e,n){var i=t/e,r=o/n;return i>r?i:r}function $(t,o){L.options.zoomMin=V(C,A,t,o),L.options.zoomMax=Math.max(1,L.options.zoomMin),L.options.zoomStart=Math.min(L.options.zoomMax,V(q,R,t,o))}function tt(t,o,e,n,i,r){i=i||0,r=r||0;var s={};s[a+"transform"]="translateZ(0) translate("+o+"px,"+e+"px) rotate("+n+"deg)",s[a+"transform-origin"]=i+"px "+r+"px",t.css(s)}function ot(t){return"[object Array]"===Object.prototype.toString.call(t)}}(s,t.extend({},i,c));this.destroy=l.destroy}else dr_tips(0,"您的浏览器不支持 HTML5 的 FileReader API， 因此无法初始化图片裁剪插件，请更换最新的浏览器！")}}); |