js-image-clipper/dist/jsImageClipper.js

A JavaScript image clipping plug-in

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.JsImageClipper=t():e.JsImageClipper=t()}(window,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var i,r,o,l,a,p,u,c,s,d,f,g,m,v,y,h,x,w,b,C,L;n(1);function I(e){var t=e.target;t.removeEventListener("load",I),r=t;var n=i.querySelector(".imageClipperBodyContainer"),x=i.querySelector(".imageClipperImgContainer"),w=i.querySelector(".imageClipperImgControl");d=w.clientWidth,f=w.clientHeight;var E=i.querySelector(".imageClipperControlImg");o=E;var B=x.clientWidth;B;var j=x.clientHeight;j;var H=t.naturalWidth,q=t.naturalHeight;v=H,y=q;var O,W,M,P,_=H/q;h=_,H>=q?W=(O=B)/_:O=(W=j)*_,p=O,u=W,a=M=(j-W)/2,l=P=(B-O)/2,t.style.width=O+"px",t.style.height=W+"px",t.style.top=M+"px",t.style.left=P+"px";var D=(n.clientWidth-w.clientWidth)/2,X=(n.clientHeight-w.clientHeight)/2;c=X,s=D;var Y=P-D,T=M-X;g=Y,m=T,w.style.left=D+"px",w.style.top=X+"px",E.style.width=O+"px",E.style.height=W+"px",E.style.top=T+"px",E.style.left=Y+"px",i.querySelector(".imageClipperShowImg").style.visibility="visible",i.querySelector(".imageClipperControlImg").style.visibility="visible",L=!0,void 0!==b.onImageLoaded&&"function"==typeof b.onImageLoaded&&b.onImageLoaded(),(C="ontouchend"in document)?n.addEventListener("touchstart",S):n.addEventListener("mousedown",S)}function S(e){e.preventDefault(),C?(window.addEventListener("touchmove",E),window.addEventListener("touchend",B),x=e.touches[0].screenX,w=e.touches[0].screenY):(window.addEventListener("mousemove",E),window.addEventListener("mouseup",B),x=e.screenX,w=e.screenY)}function E(e){if(e.preventDefault(),C)var t=e.touches[0].screenX,n=e.touches[0].screenY;else t=e.screenX,n=e.screenY;var i=l+(t-x),v=a+(n-w);i>s&&(i=s),v>c&&(v=c),i+p<s+d&&(i=s+d-p),v+u<c+f&&(v=c+f-u),l=i,a=v,r.style.left=l+"px",r.style.top=a+"px",g=i-s,m=v-c,o.style.left=g+"px",o.style.top=m+"px",x=t,w=n}function B(e){e.preventDefault(),C?(window.removeEventListener("touchmove",E),window.removeEventListener("touchend",B)):(window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",B))}function j(){r.style.width=p+"px",r.style.height=u+"px",r.style.top=a+"px",r.style.left=l+"px",o.style.width=p+"px",o.style.height=u+"px",o.style.top=m+"px",o.style.left=g+"px"}function H(){var e=document.createElement("canvas");return e.setAttribute("width",d),e.setAttribute("height",f),e.getContext("2d").drawImage(r,g,m,p,u),e}t.default={init:function(e,t,n){if("string"!=typeof e)throw new Error("selector must be a String");if(null===(i=document.querySelector(e)))throw new Error("Specified dom not found");var r={clipperBoxWidth:200,clipperBoxHeight:200,onImageLoaded:void 0};if(void 0!==n&&"[object Object]"===Object.prototype.toString.call(n))for(var o in r)if(null!=n[o]){if("clipperBoxWidth"==o||"clipperBoxHeight"==o){var l=n[o];"NaN"==parseFloat(l).toString()&&(n[o]=200)}r[o]=n[o]}var a='<div class="imageClipperBodyContainer"><div class="imageClipperImgContainer"><div class="imageClipperImgMask"></div><img class="imageClipperShowImg" src="'+t+'" /></div><div class="imageClipperImgControl" style="width:'+(b=r).clipperBoxWidth+"px;height:"+b.clipperBoxHeight+'px;"><img class="imageClipperControlImg" src="'+t+'"/></div></div>';i.innerHTML=a,L=!1,i.querySelector(".imageClipperShowImg").addEventListener("load",I)},getIsLoaded:function(){return L},zoomIn:function(){var e,t,n,i;L&&(e=p,n=a-((t=(e+=.1*e)/h)-u)/2,i=l-(e-p)/2,p=e,u=t,a=n,l=i,m=n-c,g=i-s,j())},zoomOut:function(){var e,t,n,i;L&&(v>y?(t=u,(t-=.1*t)<f&&(t=f),e=t*h):(e=p,(e-=.1*e)<d&&(e=d),t=e/h),n=a-(t-u)/2,i=l-(e-p)/2,p=e,u=t,a=n,l=i,m=n-c,g=i-s,j())},getClipperPosition:function(){var e=null;return L&&(e={imgWidth:p,imgHeight:u,clipperX:Math.abs(g),clipperY:Math.abs(m),clipperBoxWidth:d,clipperBoxHeight:f}),e},getImgDataURL:function(e,t){var n=null;if(L){var i=H();null==e&&(e="image/png"),null==t&&(t=.9),n=i.toDataURL(e,t),i=null}return n},getImgBlob:function(e,t,n){if(L){var i=H();if(null==t&&(t="image/png"),null==n&&(n=.9),null==e||"function"!=typeof e)throw new Error("need a callback function");i.toBlob((function(t){e(t),i=null}),t,n)}},destory:function(){C?i.querySelector(".imageClipperBodyContainer").removeEventListener("touchstart",S):i.querySelector(".imageClipperBodyContainer").removeEventListener("mousedown",S),i.innerHTML=""}}},function(e,t,n){}]).default}));
//# sourceMappingURL=jsImageClipper.js.map