ng-croppie
Version:
An Angular module for the awesome Croppie.js
2 lines (1 loc) • 18.6 kB
JavaScript
!function(t,e){"function"==typeof define&&define.amd?define(["exports","b"],e):"object"==typeof exports&&"string"!=typeof exports.nodeName?e(exports,require("b")):e(t.commonJsStrict={},t.b)}(this,function(t,e){function n(t){if(t in X)return t;for(var e=t[0].toUpperCase()+t.slice(1),n=B.length;n--;)if(t=B[n]+e,t in X)return t}function o(t){t=t||{};for(var e=1;e<arguments.length;e++){var n=arguments[e];if(n)for(var r in n)n.hasOwnProperty(r)&&("object"==typeof n[r]?t[r]=o({},n[r]):t[r]=n[r])}return t}function r(t,e,n){var o;return function(){var r=this,i=arguments,s=function(){o=null,n||t.apply(r,i)},a=n&&!o;clearTimeout(o),o=setTimeout(s,e),a&&t.apply(r,i)}}function i(t){if("createEvent"in document){var e=document.createEvent("HTMLEvents");e.initEvent("change",!1,!0),t.dispatchEvent(e)}else t.fireEvent("onchange")}function s(t,e,n){if("string"==typeof e){var o=e;e={},e[o]=n}for(var r in e)t.style[r]=e[r]}function a(t){var e=t.points,n=document.createElement("div"),o=document.createElement("img"),r=e[2]-e[0],i=e[3]-e[1];return n.classList.add("croppie-result"),n.appendChild(o),s(o,{left:-1*e[0]+"px",top:-1*e[1]+"px"}),o.src=t.url,s(n,{width:r+"px",height:i+"px"}),n}function u(t,e){var n=e.points,o=n[0],r=n[1],i=n[2]-n[0],s=n[3]-n[1],a=e.circle,u=document.createElement("canvas"),l=u.getContext("2d"),c=i,p=s;return e.outputWidth&&e.outputHeight&&(c=e.outputWidth,p=e.outputHeight),u.width=c,u.height=p,a&&(l.save(),l.beginPath(),l.arc(c/2,p/2,c/2,0,2*Math.PI,!0),l.closePath(),l.clip()),l.drawImage(t,o,r,i,s,0,0,c,p),u.toDataURL()}function l(t,e){var n,o=e||new Image;return n=new Promise(function(t,e){o.setAttribute("crossOrigin","anonymous"),o.onload=function(){setTimeout(function(){t(o)},1)}}),o.src=t,n}function c(){var t,e,n,o,r=this,i=["croppie-container"],a=r.options.viewport.type?"cr-vp-"+r.options.viewport.type:null;r.data={},r.elements={},t=r.elements.boundary=document.createElement("div"),n=r.elements.viewport=document.createElement("div"),e=r.elements.img=document.createElement("img"),o=r.elements.overlay=document.createElement("div"),t.classList.add("cr-boundary"),s(t,{width:r.options.boundary.width+"px",height:r.options.boundary.height+"px"}),n.classList.add("cr-viewport"),a&&n.classList.add(a),s(n,{width:r.options.viewport.width+"px",height:r.options.viewport.height+"px"}),e.classList.add("cr-image"),o.classList.add("cr-overlay"),r.element.appendChild(t),t.appendChild(e),t.appendChild(n),t.appendChild(o),r.element.classList.add(i),r.options.customClass&&r.element.classList.add(r.options.customClass),v.call(this),r.options.showZoom&&d.call(r)}function p(t){this.options.showZoom&&(this.elements.zoomer.value=E(t))}function d(){function t(){f.call(s),o=new I(s.elements.img),r=s.elements.viewport.getBoundingClientRect(),i=F.parse(s.elements.img)}function e(){m.call(s,{value:parseFloat(u.value),origin:o||new I(s.elements.img),viewportRect:r||s.elements.viewport.getBoundingClientRect(),transform:i||F.parse(s.elements.img)})}function n(n){var o=n.deltaY/-2e3,r=s._currentZoom+o;n.preventDefault(),t(),p.call(s,r),e()}var o,r,i,s=this,a=s.elements.zoomerWrap=document.createElement("div"),u=s.elements.zoomer=document.createElement("input");a.classList.add("cr-slider-wrap"),u.type="range",u.classList.add("cr-slider"),u.step="0.01",u.value=1,s.element.appendChild(a),a.appendChild(u),s._currentZoom=1,s.elements.zoomer.addEventListener("mousedown",t),s.elements.zoomer.addEventListener("touchstart",t),s.elements.zoomer.addEventListener("input",e),s.elements.zoomer.addEventListener("change",e),s.options.mouseWheelZoom&&(s.elements.boundary.addEventListener("mousewheel",n),s.elements.boundary.addEventListener("DOMMouseScroll",n))}function m(t){var e=this,n=t.transform,o=t.viewportRect,r=t.origin;e._currentZoom=t.value,n.scale=e._currentZoom;var i=h.call(e,o),a=i.translate,u=i.origin;n.x>=a.maxX&&(r.x=u.minX,n.x=a.maxX),n.x<=a.minX&&(r.x=u.maxX,n.x=a.minX),n.y>=a.maxY&&(r.y=u.minY,n.y=a.maxY),n.y<=a.minY&&(r.y=u.maxY,n.y=a.minY);var l={};l[z]=n.toString(),l[Y]=r.toString(),s(e.elements.img,l),W.call(e),w.call(e)}function h(t){var e=this,n=e._currentZoom,o=t.width,r=t.height,i=e.options.boundary.width/2,s=e.options.boundary.height/2,a=e._originalImageWidth,u=e._originalImageHeight,l=a*n,c=u*n,p=o/2,d=r/2,m=-1*(p/n-i),h=m-(l*(1/n)-o*(1/n)),f=-1*(d/n-s),v=f-(c*(1/n)-r*(1/n)),g=1/n*p,w=l*(1/n)-g,y=1/n*d,b=c*(1/n)-y;return{translate:{maxX:m,minX:h,maxY:f,minY:v},origin:{maxX:w,minX:g,maxY:b,minY:y}}}function f(){var t=this,e=t._currentZoom,n=t.elements.img.getBoundingClientRect(),o=t.elements.viewport.getBoundingClientRect(),r=F.parse(t.elements.img.style[z]),i=new I(t.elements.img),a=o.top-n.top+o.height/2,u=o.left-n.left+o.width/2,l={},c={};l.y=a/e,l.x=u/e,c.y=(l.y-i.y)*(1-e),c.x=(l.x-i.x)*(1-e),r.x-=c.x,r.y-=c.y;var p={};p[Y]=l.x+"px "+l.y+"px",p[z]=r.toString(),s(t.elements.img,p)}function v(){function t(t){t.preventDefault(),c||(c=!0,o=t.pageX,r=t.pageY,transform=F.parse(l.elements.img),window.addEventListener("mousemove",e),window.addEventListener("touchmove",e),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[Z]="none",u=l.elements.viewport.getBoundingClientRect())}function e(t){t.preventDefault();var e=t.pageX||t.touches[0].pageX,n=t.pageY||t.touches[0].pageY,c=e-o,d=n-r,m=l.elements.img.getBoundingClientRect(),h=transform.y+d,f=transform.x+c,v={};if("touchmove"==t.type&&t.touches.length>1){var w=t.touches[0],y=t.touches[1],b=Math.sqrt((w.pageX-y.pageX)*(w.pageX-y.pageX)+(w.pageY-y.pageY)*(w.pageY-y.pageY));a||(a=b/l._currentZoom);var _=b/a;return p.call(l,_),void i(l.elements.zoomer)}u.top>m.top+d&&u.bottom<m.bottom+d&&(transform.y=h),u.left>m.left+c&&u.right<m.right+c&&(transform.x=f),v[z]=transform.toString(),s(l.elements.img,v),g.call(l),r=n,o=e}function n(){c=!1,window.removeEventListener("mousemove",e),window.removeEventListener("touchmove",e),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[Z]="",f.call(l),w.call(l),a=0}var o,r,a,u,l=this,c=!1;l.elements.overlay.addEventListener("mousedown",t),l.elements.overlay.addEventListener("touchstart",t)}function g(){var t=this,e=t.elements.boundary.getBoundingClientRect(),n=t.elements.img.getBoundingClientRect();s(t.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-e.top+"px",left:n.left-e.left+"px"})}function w(){var t=this;y.call(t)&&t.options.update.call(t,t.get())}function y(){return this.elements.img.offsetHeight>0&&this.elements.img.offsetWidth>0}function b(){var t,e,n,o,r,a=this,u=0,l=1.5,c=1,d={},m=a.elements.img,h=a.elements.zoomer,f=new F(0,0,c),v=new I,w=y.call(a);w&&!a.data.bound&&(a.data.bound=!0,d[z]=f.toString(),d[Y]=v.toString(),s(m,d),t=m.getBoundingClientRect(),e=a.elements.viewport.getBoundingClientRect(),n=a.elements.boundary.getBoundingClientRect(),a._originalImageWidth=t.width,a._originalImageHeight=t.height,a.options.showZoom&&(o=e.width/t.width,r=e.height/t.height,u=Math.max(o,r),u>=l&&(l=u+1),h.min=E(u),h.max=E(l),c=Math.max(n.width/t.width,n.height/t.height),p.call(a,c),i(h)),a._currentZoom=f.scale=c,d[z]=f.toString(),s(m,d),a.data.points.length?_.call(a,a.data.points):x.call(a),g.call(a))}function _(t){if(4!=t.length)throw"Croppie - Invalid number of points supplied: "+t;var e=this,n=t[2]-t[0],o=e.elements.viewport.getBoundingClientRect(),r=e.elements.boundary.getBoundingClientRect(),i={left:o.left-r.left,top:o.top-r.top},a=o.width/n,u=t[1],l=t[0],c=-1*t[1]+i.top,d=-1*t[0]+i.left,m={};m[Y]=l+"px "+u+"px",m[z]=new F(d,c,a).toString(),s(e.elements.img,m),p.call(e,a),e._currentZoom=a}function x(){var t=this,e=t.elements.img.getBoundingClientRect(),n=t.elements.viewport.getBoundingClientRect(),o=t.elements.boundary.getBoundingClientRect(),r=n.left-o.left,i=n.top-o.top,a=r-(e.width-n.width)/2,u=i-(e.height-n.height)/2,l=new F(a,u,t._currentZoom);s(t.elements.img,z,l.toString())}function C(t,e){var n,o=this,r=[];if("string"==typeof t)n=t,t={};else if(Array.isArray(t))r=t.slice();else{if("undefined"==typeof t&&o.data.url)return b.call(o),w.call(o),null;n=t.url,r=t.points||[]}o.data.bound=!1,o.data.url=n||o.data.url,o.data.points=(r||o.data.points).map(function(t){return parseFloat(t)});var i=l(n,o.elements.img);return i.then(function(){b.call(o),w.call(o),e&&e()}),i}function E(t){return parseFloat(t).toFixed(2)}function L(){var t=this,e=t.elements.img.getBoundingClientRect(),n=t.elements.viewport.getBoundingClientRect(),o=n.left-e.left,r=n.top-e.top,i=o+n.width,s=r+n.height,a=t._currentZoom;return(a===1/0||isNaN(a))&&(a=1),o=Math.max(0,o/a),r=Math.max(0,r/a),i=Math.max(0,i/a),s=Math.max(0,s/a),{points:[E(o),E(r),E(i),E(s)],zoom:a}}function S(t){var e,n,o=this,r=L.call(o),i=t||{type:"canvas",size:"viewport"},s="string"==typeof i?i:i.type,c=i.size||"viewport";return"viewport"===c&&(e=o.elements.viewport.getBoundingClientRect(),r.outputWidth=e.width,r.outputHeight=e.height),r.circle="circle"===o.options.viewport.type,r.url=o.data.url,n=new Promise(function(t,e){"canvas"===s?l(r.url).then(function(e){t(u(e,r))}):t(a(r))})}function A(){console.warn("Croppie.refresh() is deprecated. Please use Croppie.bind() without any arguments instead. refresh() will be removed in a later release."),b.call(this)}function M(){var t=this;t.element.removeChild(t.elements.boundary),t.options.showZoom&&t.element.removeChild(t.elements.zoomerWrap),delete t.elements}function R(t,e){this.element=t,this.options=o({},R.defaults,e),c.call(this)}"function"!=typeof Promise&&function(){"use strict";function t(t){return"function"==typeof t||"object"==typeof t&&null!==t}function e(t){return"function"==typeof t}function n(t){return"object"==typeof t&&null!==t}function o(t){T=t}function r(t){k=t}function i(){return function(){process.nextTick(c)}}function s(){return function(){O(c)}}function a(){var t=0,e=new U(c),n=document.createTextNode("");return e.observe(n,{characterData:!0}),function(){n.data=t=++t%2}}function u(){var t=new MessageChannel;return t.port1.onmessage=c,function(){t.port2.postMessage(0)}}function l(){return function(){setTimeout(c,1)}}function c(){for(var t=0;q>t;t+=2){var e=K[t],n=K[t+1];e(n),K[t]=void 0,K[t+1]=void 0}q=0}function p(){try{var t=require,e=t("vertx");return O=e.runOnLoop||e.runOnContext,s()}catch(n){return l()}}function d(){}function m(){return new TypeError("You cannot resolve a promise with itself")}function h(){return new TypeError("A promises callback cannot return that same promise.")}function f(t){try{return t.then}catch(e){return et.error=e,et}}function v(t,e,n,o){try{t.call(e,n,o)}catch(r){return r}}function g(t,e,n){k(function(t){var o=!1,r=v(n,e,function(n){o||(o=!0,e!==n?b(t,n):x(t,n))},function(e){o||(o=!0,C(t,e))},"Settle: "+(t._label||" unknown promise"));!o&&r&&(o=!0,C(t,r))},t)}function w(t,e){e._state===V?x(t,e._result):e._state===tt?C(t,e._result):E(e,void 0,function(e){b(t,e)},function(e){C(t,e)})}function y(t,n){if(n.constructor===t.constructor)w(t,n);else{var o=f(n);o===et?C(t,et.error):void 0===o?x(t,n):e(o)?g(t,n,o):x(t,n)}}function b(e,n){e===n?C(e,m()):t(n)?y(e,n):x(e,n)}function _(t){t._onerror&&t._onerror(t._result),L(t)}function x(t,e){t._state===G&&(t._result=e,t._state=V,0!==t._subscribers.length&&k(L,t))}function C(t,e){t._state===G&&(t._state=tt,t._result=e,k(_,t))}function E(t,e,n,o){var r=t._subscribers,i=r.length;t._onerror=null,r[i]=e,r[i+V]=n,r[i+tt]=o,0===i&&t._state&&k(L,t)}function L(t){var e=t._subscribers,n=t._state;if(0!==e.length){for(var o,r,i=t._result,s=0;s<e.length;s+=3)o=e[s],r=e[s+n],o?M(n,o,r,i):r(i);t._subscribers.length=0}}function S(){this.error=null}function A(t,e){try{return t(e)}catch(n){return nt.error=n,nt}}function M(t,n,o,r){var i,s,a,u,l=e(o);if(l){if(i=A(o,r),i===nt?(u=!0,s=i.error,i=null):a=!0,n===i)return void C(n,h())}else i=r,a=!0;n._state!==G||(l&&a?b(n,i):u?C(n,s):t===V?x(n,i):t===tt&&C(n,i))}function R(t,e){try{e(function(e){b(t,e)},function(e){C(t,e)})}catch(n){C(t,n)}}function Y(t,e){var n=this;n._instanceConstructor=t,n.promise=new t(d),n._validateInput(e)?(n._input=e,n.length=e.length,n._remaining=e.length,n._init(),0===n.length?x(n.promise,n._result):(n.length=n.length||0,n._enumerate(),0===n._remaining&&x(n.promise,n._result))):C(n.promise,n._validationError())}function z(t){return new ot(this,t).promise}function Z(t){function e(t){b(r,t)}function n(t){C(r,t)}var o=this,r=new o(d);if(!H(t))return C(r,new TypeError("You must pass an array to race.")),r;for(var i=t.length,s=0;r._state===G&&i>s;s++)E(o.resolve(t[s]),void 0,e,n);return r}function B(t){var e=this;if(t&&"object"==typeof t&&t.constructor===e)return t;var n=new e(d);return b(n,t),n}function X(t){var e=this,n=new e(d);return C(n,t),n}function j(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}function P(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}function F(t){this._id=ut++,this._state=void 0,this._result=void 0,this._subscribers=[],d!==t&&(e(t)||j(),this instanceof F||P(),R(this,t))}function I(){var t;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var n=t.Promise;(!n||"[object Promise]"!==Object.prototype.toString.call(n.resolve())||n.cast)&&(t.Promise=lt)}var W;W=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)};var O,T,D,H=W,q=0,k=({}.toString,function(t,e){K[q]=t,K[q+1]=e,q+=2,2===q&&(T?T(c):D())}),N="undefined"!=typeof window?window:void 0,$=N||{},U=$.MutationObserver||$.WebKitMutationObserver,Q="undefined"!=typeof process&&"[object process]"==={}.toString.call(process),J="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,K=new Array(1e3);D=Q?i():U?a():J?u():void 0===N&&"function"==typeof require?p():l();var G=void 0,V=1,tt=2,et=new S,nt=new S;Y.prototype._validateInput=function(t){return H(t)},Y.prototype._validationError=function(){return new Error("Array Methods must be provided an Array")},Y.prototype._init=function(){this._result=new Array(this.length)};var ot=Y;Y.prototype._enumerate=function(){for(var t=this,e=t.length,n=t.promise,o=t._input,r=0;n._state===G&&e>r;r++)t._eachEntry(o[r],r)},Y.prototype._eachEntry=function(t,e){var o=this,r=o._instanceConstructor;n(t)?t.constructor===r&&t._state!==G?(t._onerror=null,o._settledAt(t._state,e,t._result)):o._willSettleAt(r.resolve(t),e):(o._remaining--,o._result[e]=t)},Y.prototype._settledAt=function(t,e,n){var o=this,r=o.promise;r._state===G&&(o._remaining--,t===tt?C(r,n):o._result[e]=n),0===o._remaining&&x(r,o._result)},Y.prototype._willSettleAt=function(t,e){var n=this;E(t,void 0,function(t){n._settledAt(V,e,t)},function(t){n._settledAt(tt,e,t)})};var rt=z,it=Z,st=B,at=X,ut=0,lt=F;F.all=rt,F.race=it,F.resolve=st,F.reject=at,F._setScheduler=o,F._setAsap=r,F._asap=k,F.prototype={constructor:F,then:function(t,e){var n=this,o=n._state;if(o===V&&!t||o===tt&&!e)return this;var r=new this.constructor(d),i=n._result;if(o){var s=arguments[o-1];k(function(){M(o,r,s,i)})}else E(n,r,t,e);return r},"catch":function(t){return this.then(null,t)}};var ct=I,pt={Promise:lt,polyfill:ct};"function"==typeof define&&define.amd?define(function(){return pt}):"undefined"!=typeof module&&module.exports?module.exports=pt:"undefined"!=typeof this&&(this.ES6Promise=pt),ct()}.call(this);var Y,z,Z,B=["Webkit","Moz","ms"],X=document.createElement("div").style;z=n("transform"),Y=n("transformOrigin"),Z=n("userSelect");var j="translate3d",P=", 0px",F=function(t,e,n){this.x=parseFloat(t),this.y=parseFloat(e),this.scale=parseFloat(n)};F.parse=function(t){return t.style?F.parse(t.style[z]):t.indexOf("matrix")>-1||t.indexOf("none")>-1?F.fromMatrix(t):F.fromString(t)},F.fromMatrix=function(t){var e=t.substring(7).split(",");return e.length&&"none"!==t||(e=[1,0,0,1,0,0]),new F(parseInt(e[4],10),parseInt(e[5],10),parseFloat(e[0]))},F.fromString=function(t){var e=t.split(") "),n=e[0].substring(j.length+1).split(","),o=e.length>1?e[1].substring(6):1,r=n.length>1?n[0]:0,i=n.length>1?n[1]:0;return new F(r,i,o)},F.prototype.toString=function(){return j+"("+this.x+"px, "+this.y+"px"+P+") scale("+this.scale+")"};var I=function(t){if(!t||!t.style[Y])return this.x=0,void(this.y=0);var e=t.style[Y].split(" ");this.x=parseFloat(e[0]),this.y=parseFloat(e[1])};I.prototype.toString=function(){return this.x+"px "+this.y+"px"};var W=r(g,500);if(this.jQuery){var O=this.jQuery;O.fn.croppie=function(t){var e=typeof t;if("string"===e){var n=Array.prototype.slice.call(arguments,1),o=O(this).data("croppie");return"get"===t?o.get():"result"===t?o.result.apply(o,n):this.each(function(){var e=O(this).data("croppie");if(e){var o=e[t];if(!O.isFunction(o))throw"Croppie "+t+" method not found";o.apply(e,n),"destroy"===t&&O(this).removeData("croppie")}})}return this.each(function(){var e=new R(this,t);O(this).data("croppie",e)})}}R.defaults={viewport:{width:100,height:100,type:"square"},boundary:{width:300,height:300},customClass:"",showZoom:!0,mouseWheelZoom:!0,update:function(){}},o(R.prototype,{bind:function(t,e){return C.call(this,t,e)},get:function(){return L.call(this)},result:function(t){return S.call(this,t)},refresh:function(){return A.call(this)},destroy:function(){return M.call(this)}}),t.Croppie=window.Croppie=R}),angular.module("ngCroppie",[]).directive("ngCroppie",["$timeout",function(t){return{restrict:"AE",scope:{src:"=",viewport:"=",boundry:"=",type:"@",zoom:"@",mousezoom:"@",update:"=",ngModel:"="},link:function(t,e,n){void 0==t.viewport&&(t.viewport={w:null,h:null}),void 0==t.boundry&&(t.boundry={w:null,h:null}),t.viewport.w=void 0!=t.viewport.w?t.viewport.w:300,t.viewport.h=void 0!=t.viewport.h?t.viewport.h:300,t.boundry.w=void 0!=t.boundry.w?t.boundry.w:400,t.boundry.h=void 0!=t.boundry.h?t.boundry.h:400,t.viewport.w>t.boundry.w&&(t.viewport.w=t.boundry.w),t.viewport.h>t.boundry.h&&(t.viewport.h=t.boundry.h);var o=("true"===t.zoom,"true"===t.mousezoom,{viewport:{width:t.viewport.w,height:t.viewport.h,type:t.type||"square"},boundary:{width:t.boundry.w,height:t.boundry.h},showZoom:t.zoom,mouseWheelZoom:t.mousezoom});void 0!=t.update&&(o.update=t.update);var r=new Croppie(e[0],o);window.setInterval(function(){r.result("canvas").then(function(e){t.$apply(function(){t.ngModel=e})})},250);t.$watch("src",function(e,n){void 0!=t.src&&(r.bind(t.src),r.result("canvas").then(function(e){t.$apply(function(){t.ngModel=e})}))})}}}]);