From 4cc842543061aa46cd594d3b934e5f4fcc131377 Mon Sep 17 00:00:00 2001 From: alsmpd Date: Fri, 22 Sep 2017 13:06:08 -0500 Subject: [PATCH 01/68] Accessibility Aria & Alt Changes - Adds aria label to input range - Adds alt to images - Adds aria-hidden to hidden image - Add aria grabbed and drop to draggable image --- croppie.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/croppie.js b/croppie.js index 989202d2..cf19506c 100755 --- a/croppie.js +++ b/croppie.js @@ -150,6 +150,12 @@ } } + function setAttributes(el, attrs) { + for (var key in attrs) { + el.setAttribute(key, attrs[key]); + } + } + function num(v) { return parseInt(v, 10); } @@ -169,7 +175,7 @@ if (img.src === src) {// If image source hasn't changed resolve immediately _resolve(); return; - } + } img.exifdata = null; img.removeAttribute('crossOrigin'); @@ -180,7 +186,7 @@ if (doExif) { EXIF.getData(img, function () { _resolve(); - }); + }); } else { _resolve(); @@ -373,6 +379,7 @@ viewport.setAttribute('tabindex', 0); addClass(self.elements.preview, 'cr-image'); + setAttributes(self.elements.preview, { 'alt': 'preview', 'aria-grabbed': 'false', 'aria-dropeffect': 'move' }); addClass(overlay, 'cr-overlay'); self.element.appendChild(boundary); @@ -540,7 +547,7 @@ self.options.viewport.width += deltaX; css(self.elements.viewport, { width: self.options.viewport.width + 'px' - }); + }); } _updateOverlay.call(self); @@ -650,6 +657,7 @@ self._currentZoom = ui ? ui.value : self._currentZoom; transform.scale = self._currentZoom; + self.elements.zoomer.setAttribute('aria-valuenow', ui.value); applyCss(); if (self.options.enforceBoundary) { @@ -849,7 +857,7 @@ originalX = touches.pageX; originalY = touches.pageY; } - + self.elements.preview.setAttribute('aria-grabbed', isDragging); transform = Transform.parse(self.elements.preview); window.addEventListener('mousemove', mouseMove); window.addEventListener('touchmove', mouseMove); @@ -903,6 +911,7 @@ function mouseUp() { isDragging = false; + self.elements.preview.setAttribute('aria-grabbed', isDragging); window.removeEventListener('mousemove', mouseMove); window.removeEventListener('touchmove', mouseMove); window.removeEventListener('mouseup', mouseUp); @@ -943,7 +952,7 @@ self.options.update.call(self, data); if (self.$ && typeof Prototype == 'undefined') { - self.$(self.element).trigger('update', data); + self.$(self.element).trigger('update', data); } else { var ev; @@ -1101,7 +1110,7 @@ if (exif && !customOrientation) { var orientation = getExifOrientation(img); drawCanvas(canvas, img, num(orientation || 0, 10)); - } + } else if (customOrientation) { drawCanvas(canvas, img, customOrientation); } @@ -1268,7 +1277,7 @@ var y1 = y0 + height; self.data.points = [x0, y0, x1, y1]; - } + } else if (self.options.relative) { points = [ points[0] * img.naturalWidth / 100, @@ -1479,6 +1488,7 @@ if (this.element.tagName.toLowerCase() === 'img') { var origImage = this.element; addClass(origImage, 'cr-original-image'); + setAttributes(origImage, {'aria-hidden' : 'true', 'alt' : '' }); var replacementDiv = document.createElement('div'); this.element.parentNode.appendChild(replacementDiv); replacementDiv.appendChild(origImage); From 7c693b72d0055c3d1f02252b202cad487bb8d35e Mon Sep 17 00:00:00 2001 From: alsmpd Date: Fri, 22 Sep 2017 13:09:51 -0500 Subject: [PATCH 02/68] Accessibility Label - Adds label to input --- croppie.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index cf19506c..2fbcc867 100755 --- a/croppie.js +++ b/croppie.js @@ -598,7 +598,8 @@ zoomer.step = '0.0001'; zoomer.value = 1; zoomer.style.display = self.options.showZoomer ? '' : 'none'; - + zoomer.setAttribute('aria-label', 'zoom'); + self.element.appendChild(wrap); wrap.appendChild(zoomer); From a4f012d101a94ed4adc6972563cbeacdd25cdbbf Mon Sep 17 00:00:00 2001 From: alsmpd Date: Fri, 22 Sep 2017 14:05:17 -0500 Subject: [PATCH 03/68] Accessibility dropeffect - Fixes dropeffect location and state https://technet.microsoft.com/en-us/library/hh968241%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396 --- croppie.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/croppie.js b/croppie.js index 2fbcc867..e5786c47 100755 --- a/croppie.js +++ b/croppie.js @@ -361,6 +361,7 @@ } addClass(boundary, 'cr-boundary'); + boundary.setAttribute('aria-dropeffect', 'none'); bw = self.options.boundary.width; bh = self.options.boundary.height; css(boundary, { @@ -379,7 +380,7 @@ viewport.setAttribute('tabindex', 0); addClass(self.elements.preview, 'cr-image'); - setAttributes(self.elements.preview, { 'alt': 'preview', 'aria-grabbed': 'false', 'aria-dropeffect': 'move' }); + setAttributes(self.elements.preview, { 'alt': 'preview', 'aria-grabbed': 'false' }); addClass(overlay, 'cr-overlay'); self.element.appendChild(boundary); @@ -598,8 +599,7 @@ zoomer.step = '0.0001'; zoomer.value = 1; zoomer.style.display = self.options.showZoomer ? '' : 'none'; - zoomer.setAttribute('aria-label', 'zoom'); - + self.element.appendChild(wrap); wrap.appendChild(zoomer); @@ -788,6 +788,11 @@ } } + function toggleGrabState(isDragging) { + self.elements.preview.setAttribute('aria-grabbed', isDragging); + self.elements.boundary.setAttribute('aria-dropeffect', isDragging? 'move': 'none'); + } + function keyDown(ev) { var LEFT_ARROW = 37, UP_ARROW = 38, @@ -858,7 +863,7 @@ originalX = touches.pageX; originalY = touches.pageY; } - self.elements.preview.setAttribute('aria-grabbed', isDragging); + toggleGrabState(isDragging); transform = Transform.parse(self.elements.preview); window.addEventListener('mousemove', mouseMove); window.addEventListener('touchmove', mouseMove); @@ -912,7 +917,7 @@ function mouseUp() { isDragging = false; - self.elements.preview.setAttribute('aria-grabbed', isDragging); + toggleGrabState(isDragging); window.removeEventListener('mousemove', mouseMove); window.removeEventListener('touchmove', mouseMove); window.removeEventListener('mouseup', mouseUp); From 7fb6462ae68b59e6eac4dc2ff0a79a3bca484a4a Mon Sep 17 00:00:00 2001 From: Andre Date: Tue, 26 Sep 2017 11:19:35 -0500 Subject: [PATCH 04/68] Accessibility Label (Again) - Adds label to input --- croppie.js | 1 + 1 file changed, 1 insertion(+) diff --git a/croppie.js b/croppie.js index e5786c47..86554d8c 100755 --- a/croppie.js +++ b/croppie.js @@ -599,6 +599,7 @@ zoomer.step = '0.0001'; zoomer.value = 1; zoomer.style.display = self.options.showZoomer ? '' : 'none'; + zoomer.setAttribute('aria-label', 'zoom'); self.element.appendChild(wrap); wrap.appendChild(zoomer); From 55ba456d62a850ab826308b121f347642546f890 Mon Sep 17 00:00:00 2001 From: Anton Korenskoy Date: Sat, 14 Oct 2017 19:05:58 +1000 Subject: [PATCH 05/68] Set correct value for accessibility attribute when rotate picture --- croppie.js | 2 +- croppie.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index 86554d8c..8063de2e 100755 --- a/croppie.js +++ b/croppie.js @@ -659,7 +659,7 @@ self._currentZoom = ui ? ui.value : self._currentZoom; transform.scale = self._currentZoom; - self.elements.zoomer.setAttribute('aria-valuenow', ui.value); + self.elements.zoomer.setAttribute('aria-valuenow', self._currentZoom); applyCss(); if (self.options.enforceBoundary) { diff --git a/croppie.min.js b/croppie.min.js index 3b2092c8..e9ffb8f9 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(e){function t(e){if(e in q)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=T.length;n--;)if(e=T[n]+t,e in q)return e}function n(e,t){e=e||{};for(var i in t)t[i]&&t[i].constructor&&t[i].constructor===Object?(e[i]=e[i]||{},n(e[i],t[i])):e[i]=t[i];return e}function i(e,t,n){var i;return function(){var o=this,r=arguments,a=function(){i=null,n||e.apply(o,r)},s=n&&!i;clearTimeout(i),i=setTimeout(a,t),s&&e.apply(o,r)}}function o(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function r(e,t,n){if("string"==typeof t){var i=t;t={},t[i]=n}for(var o in t)e.style[o]=t[o]}function a(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function s(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function l(e){return parseInt(e,10)}function u(e,t,n){var i=t||new Image;return i.style.opacity=0,new Promise(function(t){function o(){setTimeout(function(){t(i)},1)}return i.src===e?void o():(i.exifdata=null,i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){n?EXIF.getData(i,function(){o()}):o()},void(i.src=e))})}function c(e){var t=e.naturalWidth,n=e.naturalHeight;if(e.exifdata&&e.exifdata.Orientation>=5){var i=t;t=n,n=i}return{width:t,height:n}}function h(e){return e.exifdata.Orientation}function p(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function d(){var e,t,n,i,o,s,l=this,u="croppie-container",c=l.options.viewport.type?"cr-vp-"+l.options.viewport.type:null;l.options.useCanvas=l.options.enableOrientation||m.call(l),l.data={},l.elements={},e=l.elements.boundary=document.createElement("div"),n=l.elements.viewport=document.createElement("div"),t=l.elements.img=document.createElement("img"),i=l.elements.overlay=document.createElement("div"),l.options.useCanvas?(l.elements.canvas=document.createElement("canvas"),l.elements.preview=l.elements.canvas):l.elements.preview=l.elements.img,a(e,"cr-boundary"),o=l.options.boundary.width,s=l.options.boundary.height,r(e,{width:o+(isNaN(o)?"":"px"),height:s+(isNaN(s)?"":"px")}),a(n,"cr-viewport"),c&&a(n,c),r(n,{width:l.options.viewport.width+"px",height:l.options.viewport.height+"px"}),n.setAttribute("tabindex",0),a(l.elements.preview,"cr-image"),a(i,"cr-overlay"),l.element.appendChild(e),e.appendChild(l.elements.preview),e.appendChild(n),e.appendChild(i),a(l.element,u),l.options.customClass&&a(l.element,l.options.customClass),x.call(this),l.options.enableZoom&&g.call(l),l.options.enableResize&&f.call(l)}function m(){return this.options.enableExif&&window.EXIF}function f(){function e(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){var r=p.elements.overlay.getBoundingClientRect();if(m=!0,o=e.pageX,s=e.pageY,i=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",l=r.width,u=r.height,e.touches){var a=e.touches[0];o=a.pageX,s=a.pageY}window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[D]="none"}}function t(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var a=e.touches[0];t=a.pageX,n=a.pageY}var c=t-o,h=n-s,m=p.options.viewport.height+h,v=p.options.viewport.width+c;"v"===i&&m>=f&&u>=m?(r(d,{height:m+"px"}),p.options.boundary.height+=h,r(p.elements.boundary,{height:p.options.boundary.height+"px"}),p.options.viewport.height+=h,r(p.elements.viewport,{height:p.options.viewport.height+"px"})):"h"===i&&v>=f&&l>=v&&(r(d,{width:v+"px"}),p.options.boundary.width+=c,r(p.elements.boundary,{width:p.options.boundary.width+"px"}),p.options.viewport.width+=c,r(p.elements.viewport,{width:p.options.viewport.width+"px"})),C.call(p),B.call(p),b.call(p),E.call(p),s=n,o=t}function n(){m=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[D]=""}var i,o,s,l,u,c,h,p=this,d=document.createElement("div"),m=!1,f=50;a(d,"cr-resizer"),r(d,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(c=document.createElement("div"),a(c,"cr-resizer-vertical"),d.appendChild(c)),this.options.resizeControls.width&&(h=document.createElement("div"),a(h,"cr-resizer-horisontal"),d.appendChild(h)),c&&c.addEventListener("mousedown",e),h&&h.addEventListener("mousedown",e),this.elements.boundary.appendChild(d)}function v(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=F(e,4);t.value=Math.max(t.min,Math.min(t.max,n))}}function g(){function e(){w.call(n,{value:parseFloat(o.value),origin:new $(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:K.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i*n._currentZoom,t.preventDefault(),v.call(n,o),e.call(n)}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");a(i,"cr-slider-wrap"),a(o,"cr-slider"),o.type="range",o.step="0.0001",o.value=1,o.style.display=n.options.showZoomer?"":"none",n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function w(e){function t(){var e={};e[A]=i.toString(),e[P]=a.toString(),r(n.elements.preview,e)}var n=this,i=e?e.transform:K.parse(n.elements.preview),o=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new $(n.elements.preview);if(n._currentZoom=e?e.value:n._currentZoom,i.scale=n._currentZoom,t(),n.options.enforceBoundary){var s=y.call(n,o),l=s.translate,u=s.origin;i.x>=l.maxX&&(a.x=u.minX,i.x=l.maxX),i.x<=l.minX&&(a.x=u.maxX,i.x=l.minX),i.y>=l.maxY&&(a.y=u.minY,i.y=l.maxY),i.y<=l.minY&&(a.y=u.maxY,i.y=l.minY)}t(),Q.call(n),E.call(n)}function y(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.elements.boundary.clientWidth/2,a=t.elements.boundary.clientHeight/2,s=t.elements.preview.getBoundingClientRect(),l=s.width,u=s.height,c=i/2,h=o/2,p=-1*(c/n-r),d=p-(l*(1/n)-i*(1/n)),m=-1*(h/n-a),f=m-(u*(1/n)-o*(1/n)),v=1/n*c,g=l*(1/n)-v,w=1/n*h,y=u*(1/n)-w;return{translate:{maxX:p,minX:d,maxY:m,minY:f},origin:{maxX:g,minX:v,maxY:y,minY:w}}}function b(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),o=K.parse(e.elements.preview.style[A]),a=new $(e.elements.preview),s=i.top-n.top+i.height/2,l=i.left-n.left+i.width/2,u={},c={};u.y=s/t,u.x=l/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),o.x-=c.x,o.y-=c.y;var h={};h[P]=u.x+"px "+u.y+"px",h[A]=o.toString(),r(e.elements.preview,h)}function x(){function e(e,t){var n=d.elements.preview.getBoundingClientRect(),i=p.y+t,o=p.x+e;d.options.enforceBoundary?(h.top>n.top+t&&h.bottomn.left+e&&h.right=37&&e.keyCode<=40){e.preventDefault();var s=t(e.keyCode);p=K.parse(d.elements.preview),document.body.style[D]="none",h=d.elements.viewport.getBoundingClientRect(),n(s)}}else{var l=0;l=e.keyCode==o?parseFloat(d.elements.zoomer.value,10)+parseFloat(d.elements.zoomer.step,10):parseFloat(d.elements.zoomer.value,10)-parseFloat(d.elements.zoomer.step,10),d.setZoom(l)}}function n(t){var n=t[0],i=t[1],o={};e(n,i),o[A]=p.toString(),r(d.elements.preview,o),C.call(d),document.body.style[D]="",b.call(d),E.call(d),c=0}function i(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){if(m=!0,l=e.pageX,u=e.pageY,e.touches){var t=e.touches[0];l=t.pageX,u=t.pageY}p=K.parse(d.elements.preview),window.addEventListener("mousemove",a),window.addEventListener("touchmove",a),window.addEventListener("mouseup",s),window.addEventListener("touchend",s),document.body.style[D]="none",h=d.elements.viewport.getBoundingClientRect()}}function a(t){t.preventDefault();var n=t.pageX,i=t.pageY;if(t.touches){var a=t.touches[0];n=a.pageX,i=a.pageY}var s=n-l,h=i-u,m={};if("touchmove"==t.type&&t.touches.length>1){var f=t.touches[0],g=t.touches[1],w=Math.sqrt((f.pageX-g.pageX)*(f.pageX-g.pageX)+(f.pageY-g.pageY)*(f.pageY-g.pageY));c||(c=w/d._currentZoom);var y=w/c;return v.call(d,y),void o(d.elements.zoomer)}e(s,h),m[A]=p.toString(),r(d.elements.preview,m),C.call(d),u=i,l=n}function s(){m=!1,window.removeEventListener("mousemove",a),window.removeEventListener("touchmove",a),window.removeEventListener("mouseup",s),window.removeEventListener("touchend",s),document.body.style[D]="",b.call(d),E.call(d),c=0}var l,u,c,h,p,d=this,m=!1;d.elements.overlay.addEventListener("mousedown",i),d.elements.viewport.addEventListener("keydown",t),d.elements.overlay.addEventListener("touchstart",i)}function C(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();r(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function E(){var e,t=this,n=t.get();if(_.call(t))if(t.options.update.call(t,n),t.$&&"undefined"==typeof Prototype)t.$(t.element).trigger("update",n);else{var e;window.CustomEvent?e=new CustomEvent("update",{detail:n}):(e=document.createEvent("CustomEvent"),e.initCustomEvent("update",!0,!0,n)),t.element.dispatchEvent(e)}}function _(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function L(){var e=this,t=1,n={},i=e.elements.preview,o=e.elements.preview.getBoundingClientRect(),a=new K(0,0,t),s=new $,l=_.call(e);l&&!e.data.bound&&(e.data.bound=!0,n[A]=a.toString(),n[P]=s.toString(),n.opacity=1,r(i,n),e._originalImageWidth=o.width,e._originalImageHeight=o.height,e.options.enableZoom?B.call(e,!0):e._currentZoom=t,a.scale=e._currentZoom,n[A]=a.toString(),r(i,n),e.data.points.length?R.call(e,e.data.points):I.call(e),b.call(e),C.call(e))}function B(e){var t,n,i,r,a=this,s=0,l=1.5,u=a.elements.zoomer,c=parseFloat(u.value),h=a.elements.boundary.getBoundingClientRect(),p=a.elements.preview.getBoundingClientRect(),d=a.elements.viewport.getBoundingClientRect();a.options.enforceBoundary&&(i=d.width/(e?p.width:p.width/c),r=d.height/(e?p.height:p.height/c),s=Math.max(i,r)),s>=l&&(l=s+1),u.min=F(s,4),u.max=F(l,4),e&&(n=Math.max(h.width/p.width,h.height/p.height),t=null!==a.data.boundZoom?a.data.boundZoom:n,v.call(a,t)),o(u)}function R(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),o=t.elements.boundary.getBoundingClientRect(),a={left:i.left-o.left,top:i.top-o.top},s=i.width/n,l=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,p={};p[P]=u+"px "+l+"px",p[A]=new K(h,c,s).toString(),r(t.elements.preview,p),v.call(t,s),t._currentZoom=s}function I(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),o=n.left-i.left,a=n.top-i.top,s=o-(t.width-n.width)/2,l=a-(t.height-n.height)/2,u=new K(s,l,e._currentZoom);r(e.elements.preview,A,u.toString())}function M(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=m.call(t),e=t.options.enableOrientation&&e;if(o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r&&!e){var a=h(i);p(n,i,l(a||0,10))}else e&&p(n,i,e)}function Z(e){var t=this,n=e.points,i=l(n[0]),o=l(n[1]),r=l(n[2]),a=l(n[3]),s=r-i,u=a-o,c=e.circle,h=document.createElement("canvas"),p=h.getContext("2d"),d=s,m=u,f=0,v=0,g=d,w=m,y=e.outputWidth&&e.outputHeight,b=1;return y&&(g=e.outputWidth,w=e.outputHeight,b=g/d),h.width=g,h.height=w,e.backgroundColor&&(p.fillStyle=e.backgroundColor,p.fillRect(0,0,d,m)),t.options.enforceBoundary||(0>i&&(f=Math.abs(i),i=0),0>o&&(v=Math.abs(o),o=0),r>t._originalImageWidth&&(s=t._originalImageWidth-i,d=s),a>t._originalImageHeight&&(u=t._originalImageHeight-o,m=u)),1!==b&&(f*=b,v*=b,d*=b,m*=b),p.drawImage(this.elements.preview,i,o,Math.min(s,t._originalImageWidth),Math.min(u,t._originalImageHeight),f,v,d,m),c&&(p.fillStyle="#fff",p.globalCompositeOperation="destination-in",p.beginPath(),p.arc(d/2,m/2,d/2,0,2*Math.PI,!0),p.closePath(),p.fill()),h}function z(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),o=t[2]-t[0],s=t[3]-t[1];return a(n,"croppie-result"),n.appendChild(i),r(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,r(n,{width:o+"px",height:s+"px"}),n}function Y(e){return Z.call(this,e).toDataURL(e.format,e.quality)}function W(e){var t=this;return new Promise(function(n){Z.call(t,e).toBlob(function(e){n(e)},e.format,e.quality)})}function X(e,t){var n,i=this,o=[],r=null,a=m.call(i);if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if("undefined"==typeof e&&i.data.url)return L.call(i),E.call(i),null;n=e.url,o=e.points||[],r="undefined"==typeof e.zoom?null:e.zoom}return i.data.bound=!1,i.data.url=n||i.data.url,i.data.boundZoom=r,u(n,i.elements.img,a).then(function(n){if(o.length)i.options.relative&&(o=[o[0]*n.naturalWidth/100,o[1]*n.naturalHeight/100,o[2]*n.naturalWidth/100,o[3]*n.naturalHeight/100]);else{var r,a,s=c(n),l=i.elements.viewport.getBoundingClientRect(),u=l.width/l.height,h=s.width/s.height;h>u?(a=s.height,r=a*u):(r=s.width,a=r/u);var p=(s.width-r)/2,d=(s.height-a)/2,m=p+r,f=d+a;i.data.points=[p,d,m,f]}i.data.points=o.map(function(e){return parseFloat(e)}),i.options.useCanvas&&M.call(i,e.orientation||1),L.call(i),E.call(i),t&&t()})}function F(e,t){return parseFloat(e).toFixed(t||0)}function H(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=(n.width-e.elements.viewport.offsetWidth)/2,a=(n.height-e.elements.viewport.offsetHeight)/2,s=i+e.elements.viewport.offsetWidth+r,l=o+e.elements.viewport.offsetHeight+a,u=e._currentZoom;(u===1/0||isNaN(u))&&(u=1);var c=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(c,i/u),o=Math.max(c,o/u),s=Math.max(c,s/u),l=Math.max(c,l/u),{points:[F(i),F(o),F(s),F(l)],zoom:u}}function k(e){var t,i=this,o=H.call(i),r=n(G,n({},e)),a="string"==typeof e?e:r.type||"base64",s=r.size||"viewport",l=r.format,u=r.quality,c=r.backgroundColor,h="boolean"==typeof r.circle?r.circle:"circle"===i.options.viewport.type,p=i.elements.viewport.getBoundingClientRect(),d=p.width/p.height;return"viewport"===s?(o.outputWidth=p.width,o.outputHeight=p.height):"object"==typeof s&&(s.width&&s.height?(o.outputWidth=s.width,o.outputHeight=s.height):s.width?(o.outputWidth=s.width,o.outputHeight=s.width/d):s.height&&(o.outputWidth=s.height*d,o.outputHeight=s.height)),J.indexOf(l)>-1&&(o.format="image/"+l,o.quality=u),o.circle=h,o.url=i.data.url,o.backgroundColor=c,t=new Promise(function(e){switch(a.toLowerCase()){case"rawcanvas":e(Z.call(i,o));break;case"canvas":case"base64":e(Y.call(i,o));break;case"blob":W.call(i,o).then(e);break;default:e(z.call(i,o))}})}function j(){L.call(this)}function S(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=document.createElement("canvas"),o=1;i.width=n.width,i.height=n.height;var r=i.getContext("2d");r.drawImage(n,0,0),(90===e||-270===e)&&(o=6),(-90===e||270===e)&&(o=8),(180===e||-180===e)&&(o=3),p(n,i,o),w.call(t),i=null}function O(){var e=this;e.element.removeChild(e.elements.boundary),s(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function N(e,t){if(this.element=e,this.options=n(n({},N.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;a(i,"cr-original-image");var o=document.createElement("div");this.element.parentNode.appendChild(o),o.appendChild(i),this.element=o,this.options.url=this.options.url||i.src}if(d.call(this),this.options.url){var r={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,X.call(this,r)}}"function"!=typeof Promise&&!function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],l(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null===n)return void(t._state?e.resolve:e.reject)(t._value);var i;try{i=n(t._value)}catch(o){return void e.reject(o)}e.resolve(i)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void l(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(i){r.call(this,i)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function l(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(o){if(i)return;i=!0,n(o)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype["catch"]=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new s(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){i(r,e)},n)}e[r]=a,0===--o&&t(e)}catch(l){n(l)}}if(0===e.length)return t([]);for(var o=e.length,r=0;ri;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this),"function"!=typeof window.CustomEvent&&!function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,n){for(var i=atob(this.toDataURL(t,n).split(",")[1]),o=i.length,r=new Uint8Array(o),a=0;o>a;a++)r[a]=i.charCodeAt(a);e(new Blob([r],{type:t||"image/png"}))}});var P,A,D,T=["Webkit","Moz","ms"],q=document.createElement("div").style;A=t("transform"),P=t("transformOrigin"),D=t("userSelect");var U={translate3d:{suffix:", 0px"},translate:{suffix:""}},K=function(e,t,n){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(n)};K.parse=function(e){return e.style?K.parse(e.style[A]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?K.fromMatrix(e):K.fromString(e)},K.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new K(l(t[4]),l(t[5]),parseFloat(t[0]))},K.fromString=function(e){var t=e.split(") "),n=t[0].substring(N.globals.translate.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new K(o,r,i)},K.prototype.toString=function(){var e=U[N.globals.translate].suffix||"";return N.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var $=function(e){if(!e||!e.style[P])return this.x=0,void(this.y=0);var t=e.style[P].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};$.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Q=i(C,500),G={type:"canvas",format:"png",quality:1},J=["jpeg","webp","png"];if(window.jQuery){var V=window.jQuery;V.fn.croppie=function(e){var t=typeof e;if("string"===t){var n=Array.prototype.slice.call(arguments,1),i=V(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,n):"bind"===e?i.bind.apply(i,n):this.each(function(){var t=V(this).data("croppie");if(t){var i=t[e];if(!V.isFunction(i))throw"Croppie "+e+" method not found";i.apply(t,n),"destroy"===e&&V(this).removeData("croppie")}})}return this.each(function(){var t=new N(this,e);t.$=V,V(this).data("croppie",t)})}}N.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},N.globals={translate:"translate3d"},n(N.prototype,{bind:function(e,t){return X.call(this,e,t)},get:function(){var e=H.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return k.call(this,e)},refresh:function(){return j.call(this)},setZoom:function(e){v.call(this,e),o(this.elements.zoomer)},rotate:function(e){S.call(this,e)},destroy:function(){return O.call(this)}}),e.Croppie=window.Croppie=N,"object"==typeof module&&module.exports&&(module.exports=N)}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(e){function t(e){if(e in q)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=T.length;n--;)if((e=T[n]+t)in q)return e}function n(e,t){e=e||{};for(var i in t)t[i]&&t[i].constructor&&t[i].constructor===Object?(e[i]=e[i]||{},n(e[i],t[i])):e[i]=t[i];return e}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;(t={})[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function l(e,t){for(var n in t)e.setAttribute(n,t[n])}function s(e){return parseInt(e,10)}function u(e,t,n){var i=t||new Image;return i.style.opacity=0,new Promise(function(t){function o(){setTimeout(function(){t(i)},1)}i.src!==e?(i.exifdata=null,i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){n?EXIF.getData(i,function(){o()}):o()},i.src=e):o()})}function c(e){var t=e.naturalWidth,n=e.naturalHeight;if(e.exifdata&&e.exifdata.Orientation>=5){var i=t;t=n,n=i}return{width:t,height:n}}function h(e){return e.exifdata.Orientation}function p(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function d(){var e,t,n,i,a,s=this,u=s.options.viewport.type?"cr-vp-"+s.options.viewport.type:null;s.options.useCanvas=s.options.enableOrientation||m.call(s),s.data={},s.elements={},e=s.elements.boundary=document.createElement("div"),t=s.elements.viewport=document.createElement("div"),s.elements.img=document.createElement("img"),n=s.elements.overlay=document.createElement("div"),s.options.useCanvas?(s.elements.canvas=document.createElement("canvas"),s.elements.preview=s.elements.canvas):s.elements.preview=s.elements.img,r(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),i=s.options.boundary.width,a=s.options.boundary.height,o(e,{width:i+(isNaN(i)?"":"px"),height:a+(isNaN(a)?"":"px")}),r(t,"cr-viewport"),u&&r(t,u),o(t,{width:s.options.viewport.width+"px",height:s.options.viewport.height+"px"}),t.setAttribute("tabindex",0),r(s.elements.preview,"cr-image"),l(s.elements.preview,{alt:"preview","aria-grabbed":"false"}),r(n,"cr-overlay"),s.element.appendChild(e),e.appendChild(s.elements.preview),e.appendChild(t),e.appendChild(n),r(s.element,"croppie-container"),s.options.customClass&&r(s.element,s.options.customClass),x.call(this),s.options.enableZoom&&g.call(s),s.options.enableResize&&f.call(s)}function m(){return this.options.enableExif&&window.EXIF}function f(){function e(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){var o=p.elements.overlay.getBoundingClientRect();if(m=!0,a=e.pageX,l=e.pageY,i=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",s=o.width,u=o.height,e.touches){var r=e.touches[0];a=r.pageX,l=r.pageY}window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[D]="none"}}function t(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var r=e.touches[0];t=r.pageX,n=r.pageY}var c=t-a,h=n-l,m=p.options.viewport.height+h,v=p.options.viewport.width+c;"v"===i&&m>=f&&m<=u?(o(d,{height:m+"px"}),p.options.boundary.height+=h,o(p.elements.boundary,{height:p.options.boundary.height+"px"}),p.options.viewport.height+=h,o(p.elements.viewport,{height:p.options.viewport.height+"px"})):"h"===i&&v>=f&&v<=s&&(o(d,{width:v+"px"}),p.options.boundary.width+=c,o(p.elements.boundary,{width:p.options.boundary.width+"px"}),p.options.viewport.width+=c,o(p.elements.viewport,{width:p.options.viewport.width+"px"})),C.call(p),B.call(p),b.call(p),E.call(p),l=n,a=t}function n(){m=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[D]=""}var i,a,l,s,u,c,h,p=this,d=document.createElement("div"),m=!1,f=50;r(d,"cr-resizer"),o(d,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(r(c=document.createElement("div"),"cr-resizer-vertical"),d.appendChild(c)),this.options.resizeControls.width&&(r(h=document.createElement("div"),"cr-resizer-horisontal"),d.appendChild(h)),c&&c.addEventListener("mousedown",e),h&&h.addEventListener("mousedown",e),this.elements.boundary.appendChild(d)}function v(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=F(e,4);t.value=Math.max(t.min,Math.min(t.max,n))}}function g(){function e(){w.call(n,{value:parseFloat(o.value),origin:new $(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:K.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i*n._currentZoom,t.preventDefault(),v.call(n,o),e.call(n)}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.0001",o.value=1,o.style.display=n.options.showZoomer?"":"none",o.setAttribute("aria-label","zoom"),n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function w(e){function t(){var e={};e[P]=i.toString(),e[N]=a.toString(),o(n.elements.preview,e)}var n=this,i=e?e.transform:K.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new $(n.elements.preview);if(n._currentZoom=e?e.value:n._currentZoom,i.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),t(),n.options.enforceBoundary){var l=y.call(n,r),s=l.translate,u=l.origin;i.x>=s.maxX&&(a.x=u.minX,i.x=s.maxX),i.x<=s.minX&&(a.x=u.maxX,i.x=s.minX),i.y>=s.maxY&&(a.y=u.minY,i.y=s.maxY),i.y<=s.minY&&(a.y=u.maxY,i.y=s.minY)}t(),Q.call(n),E.call(n)}function y(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.elements.boundary.clientWidth/2,a=t.elements.boundary.clientHeight/2,l=t.elements.preview.getBoundingClientRect(),s=l.width,u=l.height,c=i/2,h=o/2,p=-1*(c/n-r),d=-1*(h/n-a),m=1/n*c,f=1/n*h;return{translate:{maxX:p,minX:p-(s*(1/n)-i*(1/n)),maxY:d,minY:d-(u*(1/n)-o*(1/n))},origin:{maxX:s*(1/n)-m,minX:m,maxY:u*(1/n)-f,minY:f}}}function b(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=K.parse(e.elements.preview.style[P]),a=new $(e.elements.preview),l=i.top-n.top+i.height/2,s=i.left-n.left+i.width/2,u={},c={};u.y=l/t,u.x=s/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[N]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function x(){function e(e,t){var n=d.elements.preview.getBoundingClientRect(),i=p.y+t,o=p.x+e;d.options.enforceBoundary?(h.top>n.top+t&&h.bottomn.left+e&&h.right1){var f=t.touches[0],g=t.touches[1],w=Math.sqrt((f.pageX-g.pageX)*(f.pageX-g.pageX)+(f.pageY-g.pageY)*(f.pageY-g.pageY));c||(c=w/d._currentZoom);var y=w/c;return v.call(d,y),void i(d.elements.zoomer)}e(l,h),m[P]=p.toString(),o(d.elements.preview,m),C.call(d),u=r,s=n}function l(){t(m=!1),window.removeEventListener("mousemove",a),window.removeEventListener("touchmove",a),window.removeEventListener("mouseup",l),window.removeEventListener("touchend",l),document.body.style[D]="",b.call(d),E.call(d),c=0}var s,u,c,h,p,d=this,m=!1;d.elements.overlay.addEventListener("mousedown",r),d.elements.viewport.addEventListener("keydown",function(e){var t=37,i=38,o=39,r=40;if(!e.shiftKey||e.keyCode!=i&&e.keyCode!=r){if(d.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var a=function(n){switch(e.keyCode){case t:return[1,0];case i:return[0,1];case o:return[-1,0];case r:return[0,-1]}}();p=K.parse(d.elements.preview),document.body.style[D]="none",h=d.elements.viewport.getBoundingClientRect(),n(a)}}else{var l=0;l=e.keyCode==i?parseFloat(d.elements.zoomer.value,10)+parseFloat(d.elements.zoomer.step,10):parseFloat(d.elements.zoomer.value,10)-parseFloat(d.elements.zoomer.step,10),d.setZoom(l)}}),d.elements.overlay.addEventListener("touchstart",r)}function C(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function E(){var e=this,t=e.get();if(_.call(e))if(e.options.update.call(e,t),e.$&&"undefined"==typeof Prototype)e.$(e.element).trigger("update",t);else{var n;window.CustomEvent?n=new CustomEvent("update",{detail:t}):(n=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),e.element.dispatchEvent(n)}}function _(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function L(){var e=this,t={},n=e.elements.preview,i=e.elements.preview.getBoundingClientRect(),r=new K(0,0,1),a=new $;_.call(e)&&!e.data.bound&&(e.data.bound=!0,t[P]=r.toString(),t[N]=a.toString(),t.opacity=1,o(n,t),e._originalImageWidth=i.width,e._originalImageHeight=i.height,e.options.enableZoom?B.call(e,!0):e._currentZoom=1,r.scale=e._currentZoom,t[P]=r.toString(),o(n,t),e.data.points.length?R.call(e,e.data.points):I.call(e),b.call(e),C.call(e))}function B(e){var t,n,o,r,a=this,l=0,s=1.5,u=a.elements.zoomer,c=parseFloat(u.value),h=a.elements.boundary.getBoundingClientRect(),p=a.elements.preview.getBoundingClientRect(),d=a.elements.viewport.getBoundingClientRect();a.options.enforceBoundary&&(o=d.width/(e?p.width:p.width/c),r=d.height/(e?p.height:p.height/c),l=Math.max(o,r)),l>=s&&(s=l+1),u.min=F(l,4),u.max=F(s,4),e&&(n=Math.max(h.width/p.width,h.height/p.height),t=null!==a.data.boundZoom?a.data.boundZoom:n,v.call(a,t)),i(u)}function R(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},l=i.width/n,s=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,p={};p[N]=u+"px "+s+"px",p[P]=new K(h,c,l).toString(),o(t.elements.preview,p),v.call(t,l),t._currentZoom=l}function I(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,l=r-(t.width-n.width)/2,s=a-(t.height-n.height)/2,u=new K(l,s,e._currentZoom);o(e.elements.preview,P,u.toString())}function M(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=m.call(t),e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r&&!e?p(n,i,s(h(i)||0,10)):e&&p(n,i,e)}function Z(e){var t=this,n=e.points,i=s(n[0]),o=s(n[1]),r=s(n[2]),a=s(n[3]),l=r-i,u=a-o,c=e.circle,h=document.createElement("canvas"),p=h.getContext("2d"),d=l,m=u,f=0,v=0,g=d,w=m,y=1;return e.outputWidth&&e.outputHeight&&(g=e.outputWidth,w=e.outputHeight,y=g/d),h.width=g,h.height=w,e.backgroundColor&&(p.fillStyle=e.backgroundColor,p.fillRect(0,0,d,m)),t.options.enforceBoundary||(i<0&&(f=Math.abs(i),i=0),o<0&&(v=Math.abs(o),o=0),r>t._originalImageWidth&&(d=l=t._originalImageWidth-i),a>t._originalImageHeight&&(m=u=t._originalImageHeight-o)),1!==y&&(f*=y,v*=y,d*=y,m*=y),p.drawImage(this.elements.preview,i,o,Math.min(l,t._originalImageWidth),Math.min(u,t._originalImageHeight),f,v,d,m),c&&(p.fillStyle="#fff",p.globalCompositeOperation="destination-in",p.beginPath(),p.arc(d/2,m/2,d/2,0,2*Math.PI,!0),p.closePath(),p.fill()),h}function z(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],l=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:l+"px"}),n}function Y(e){return Z.call(this,e).toDataURL(e.format,e.quality)}function W(e){var t=this;return new Promise(function(n,i){Z.call(t,e).toBlob(function(e){n(e)},e.format,e.quality)})}function X(e,t){var n,i=this,o=[],r=null,a=m.call(i);if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if(void 0===e&&i.data.url)return L.call(i),E.call(i),null;n=e.url,o=e.points||[],r=void 0===e.zoom?null:e.zoom}return i.data.bound=!1,i.data.url=n||i.data.url,i.data.boundZoom=r,u(n,i.elements.img,a).then(function(n){if(o.length)i.options.relative&&(o=[o[0]*n.naturalWidth/100,o[1]*n.naturalHeight/100,o[2]*n.naturalWidth/100,o[3]*n.naturalHeight/100]);else{var r,a,l=c(n),s=i.elements.viewport.getBoundingClientRect(),u=s.width/s.height;l.width/l.height>u?r=(a=l.height)*u:a=(r=l.width)/u;var h=(l.width-r)/2,p=(l.height-a)/2,d=h+r,m=p+a;i.data.points=[h,p,d,m]}i.data.points=o.map(function(e){return parseFloat(e)}),i.options.useCanvas&&M.call(i,e.orientation||1),L.call(i),E.call(i),t&&t()})}function F(e,t){return parseFloat(e).toFixed(t||0)}function H(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=(n.width-e.elements.viewport.offsetWidth)/2,a=(n.height-e.elements.viewport.offsetHeight)/2,l=i+e.elements.viewport.offsetWidth+r,s=o+e.elements.viewport.offsetHeight+a,u=e._currentZoom;(u===1/0||isNaN(u))&&(u=1);var c=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(c,i/u),o=Math.max(c,o/u),l=Math.max(c,l/u),s=Math.max(c,s/u),{points:[F(i),F(o),F(l),F(s)],zoom:u}}function k(e){var t=this,i=H.call(t),o=n(G,n({},e)),r="string"==typeof e?e:o.type||"base64",a=o.size||"viewport",l=o.format,s=o.quality,u=o.backgroundColor,c="boolean"==typeof o.circle?o.circle:"circle"===t.options.viewport.type,h=t.elements.viewport.getBoundingClientRect(),p=h.width/h.height;return"viewport"===a?(i.outputWidth=h.width,i.outputHeight=h.height):"object"==typeof a&&(a.width&&a.height?(i.outputWidth=a.width,i.outputHeight=a.height):a.width?(i.outputWidth=a.width,i.outputHeight=a.width/p):a.height&&(i.outputWidth=a.height*p,i.outputHeight=a.height)),J.indexOf(l)>-1&&(i.format="image/"+l,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e,n){switch(r.toLowerCase()){case"rawcanvas":e(Z.call(t,i));break;case"canvas":case"base64":e(Y.call(t,i));break;case"blob":W.call(t,i).then(e);break;default:e(z.call(t,i))}})}function j(){L.call(this)}function A(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=document.createElement("canvas"),o=1;i.width=n.width,i.height=n.height,i.getContext("2d").drawImage(n,0,0),90!==e&&-270!==e||(o=6),-90!==e&&270!==e||(o=8),180!==e&&-180!==e||(o=3),p(n,i,o),w.call(t),i=null}function S(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function O(e,t){if(this.element=e,this.options=n(n({},O.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;r(i,"cr-original-image"),l(i,{"aria-hidden":"true",alt:""});var o=document.createElement("div");this.element.parentNode.appendChild(o),o.appendChild(i),this.element=o,this.options.url=this.options.url||i.src}if(d.call(this),this.options.url){var a={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,X.call(this,a)}}"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null!==n){var i;try{i=n(t._value)}catch(t){return void e.reject(t)}e.resolve(i)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void s(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function l(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function s(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(e){if(i)return;i=!0,n(e)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype.catch=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new l(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var l=a.then;if("function"==typeof l)return void l.call(a,function(e){i(r,e)},n)}e[r]=a,0==--o&&t(e)}catch(e){n(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;ri;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,n){for(var i=atob(this.toDataURL(t,n).split(",")[1]),o=i.length,r=new Uint8Array(o),a=0;a-1||e.indexOf("none")>-1?K.fromMatrix(e):K.fromString(e)},K.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new K(s(t[4]),s(t[5]),parseFloat(t[0]))},K.fromString=function(e){var t=e.split(") "),n=t[0].substring(O.globals.translate.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new K(o,r,i)},K.prototype.toString=function(){var e=U[O.globals.translate].suffix||"";return O.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var $=function(e){if(!e||!e.style[N])return this.x=0,void(this.y=0);var t=e.style[N].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};$.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Q=function(e,t,n){var i;return function(){var o=this,r=arguments,a=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||e.apply(o,r)},t),a&&e.apply(o,r)}}(C,500),G={type:"canvas",format:"png",quality:1},J=["jpeg","webp","png"];if(window.jQuery){var V=window.jQuery;V.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),n=V(this).data("croppie");return"get"===e?n.get():"result"===e?n.result.apply(n,t):"bind"===e?n.bind.apply(n,t):this.each(function(){var n=V(this).data("croppie");if(n){var i=n[e];if(!V.isFunction(i))throw"Croppie "+e+" method not found";i.apply(n,t),"destroy"===e&&V(this).removeData("croppie")}})}return this.each(function(){var t=new O(this,e);t.$=V,V(this).data("croppie",t)})}}O.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},O.globals={translate:"translate3d"},n(O.prototype,{bind:function(e,t){return X.call(this,e,t)},get:function(){var e=H.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return k.call(this,e)},refresh:function(){return j.call(this)},setZoom:function(e){v.call(this,e),i(this.elements.zoomer)},rotate:function(e){A.call(this,e)},destroy:function(){return S.call(this)}}),e.Croppie=window.Croppie=O,"object"==typeof module&&module.exports&&(module.exports=O)}); \ No newline at end of file From eeac7005a86c2ce67e4ee3141f3445f9ac19c000 Mon Sep 17 00:00:00 2001 From: Andre Date: Wed, 18 Oct 2017 21:50:24 -0500 Subject: [PATCH 06/68] 2.5.0 Prep Accessibility --- croppie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index 8063de2e..2ba2637a 100755 --- a/croppie.js +++ b/croppie.js @@ -2,7 +2,7 @@ * Croppie * Copyright 2017 * Foliotek - * Version: 2.5.0 + * Version: 2.5.1 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { From fcbc82685999432851ab11930c25286191aadd19 Mon Sep 17 00:00:00 2001 From: Andre Date: Wed, 18 Oct 2017 21:50:29 -0500 Subject: [PATCH 07/68] 2.5.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cb5f955c..9ab9ccbd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.5.0", + "version": "2.5.1", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From 2f486903eab6bb4063a9ac6b36e21e47d50532b2 Mon Sep 17 00:00:00 2001 From: Nathan Wienand Date: Thu, 19 Oct 2017 14:54:14 +0200 Subject: [PATCH 08/68] Seems to be a fix for the aspect ratio problem with square images. (#378) * fixes-issue-#365 * 2.5.1 * fixes-issue-#365 * forgot minified version --- croppie.js | 16 +++++++++------- croppie.min.js | 3 ++- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/croppie.js b/croppie.js index 2ba2637a..87d39337 100755 --- a/croppie.js +++ b/croppie.js @@ -1142,12 +1142,14 @@ canvasWidth = outWidth, canvasHeight = outHeight, customDimensions = (data.outputWidth && data.outputHeight), - outputRatio = 1; + outputWidthRatio = 1; + outputHeightRatio = 1; if (customDimensions) { canvasWidth = data.outputWidth; canvasHeight = data.outputHeight; - outputRatio = canvasWidth / outWidth; + outputWidthRatio = canvasWidth / outWidth; + outputHeightRatio = canvasHeight / outWHeight; } canvas.width = canvasWidth; @@ -1178,11 +1180,11 @@ } } - if (outputRatio !== 1) { - startX *= outputRatio; - startY *= outputRatio; - outWidth *= outputRatio; - outHeight *= outputRatio; + if (outputWidthRatio !== 1 || outputHeightRatio !== 1) { + startX *= outputWidthRatio; + startY *= outputHeightRatio; + outWidth *= outputWidthRatio; + outHeight *= outputHeightRatio; } ctx.drawImage(this.elements.preview, left, top, Math.min(width, self._originalImageWidth), Math.min(height, self._originalImageHeight), startX, startY, outWidth, outHeight); diff --git a/croppie.min.js b/croppie.min.js index e9ffb8f9..de8717e1 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1,2 @@ -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(e){function t(e){if(e in q)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=T.length;n--;)if((e=T[n]+t)in q)return e}function n(e,t){e=e||{};for(var i in t)t[i]&&t[i].constructor&&t[i].constructor===Object?(e[i]=e[i]||{},n(e[i],t[i])):e[i]=t[i];return e}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;(t={})[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function l(e,t){for(var n in t)e.setAttribute(n,t[n])}function s(e){return parseInt(e,10)}function u(e,t,n){var i=t||new Image;return i.style.opacity=0,new Promise(function(t){function o(){setTimeout(function(){t(i)},1)}i.src!==e?(i.exifdata=null,i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){n?EXIF.getData(i,function(){o()}):o()},i.src=e):o()})}function c(e){var t=e.naturalWidth,n=e.naturalHeight;if(e.exifdata&&e.exifdata.Orientation>=5){var i=t;t=n,n=i}return{width:t,height:n}}function h(e){return e.exifdata.Orientation}function p(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function d(){var e,t,n,i,a,s=this,u=s.options.viewport.type?"cr-vp-"+s.options.viewport.type:null;s.options.useCanvas=s.options.enableOrientation||m.call(s),s.data={},s.elements={},e=s.elements.boundary=document.createElement("div"),t=s.elements.viewport=document.createElement("div"),s.elements.img=document.createElement("img"),n=s.elements.overlay=document.createElement("div"),s.options.useCanvas?(s.elements.canvas=document.createElement("canvas"),s.elements.preview=s.elements.canvas):s.elements.preview=s.elements.img,r(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),i=s.options.boundary.width,a=s.options.boundary.height,o(e,{width:i+(isNaN(i)?"":"px"),height:a+(isNaN(a)?"":"px")}),r(t,"cr-viewport"),u&&r(t,u),o(t,{width:s.options.viewport.width+"px",height:s.options.viewport.height+"px"}),t.setAttribute("tabindex",0),r(s.elements.preview,"cr-image"),l(s.elements.preview,{alt:"preview","aria-grabbed":"false"}),r(n,"cr-overlay"),s.element.appendChild(e),e.appendChild(s.elements.preview),e.appendChild(t),e.appendChild(n),r(s.element,"croppie-container"),s.options.customClass&&r(s.element,s.options.customClass),x.call(this),s.options.enableZoom&&g.call(s),s.options.enableResize&&f.call(s)}function m(){return this.options.enableExif&&window.EXIF}function f(){function e(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){var o=p.elements.overlay.getBoundingClientRect();if(m=!0,a=e.pageX,l=e.pageY,i=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",s=o.width,u=o.height,e.touches){var r=e.touches[0];a=r.pageX,l=r.pageY}window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[D]="none"}}function t(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var r=e.touches[0];t=r.pageX,n=r.pageY}var c=t-a,h=n-l,m=p.options.viewport.height+h,v=p.options.viewport.width+c;"v"===i&&m>=f&&m<=u?(o(d,{height:m+"px"}),p.options.boundary.height+=h,o(p.elements.boundary,{height:p.options.boundary.height+"px"}),p.options.viewport.height+=h,o(p.elements.viewport,{height:p.options.viewport.height+"px"})):"h"===i&&v>=f&&v<=s&&(o(d,{width:v+"px"}),p.options.boundary.width+=c,o(p.elements.boundary,{width:p.options.boundary.width+"px"}),p.options.viewport.width+=c,o(p.elements.viewport,{width:p.options.viewport.width+"px"})),C.call(p),B.call(p),b.call(p),E.call(p),l=n,a=t}function n(){m=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[D]=""}var i,a,l,s,u,c,h,p=this,d=document.createElement("div"),m=!1,f=50;r(d,"cr-resizer"),o(d,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(r(c=document.createElement("div"),"cr-resizer-vertical"),d.appendChild(c)),this.options.resizeControls.width&&(r(h=document.createElement("div"),"cr-resizer-horisontal"),d.appendChild(h)),c&&c.addEventListener("mousedown",e),h&&h.addEventListener("mousedown",e),this.elements.boundary.appendChild(d)}function v(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=F(e,4);t.value=Math.max(t.min,Math.min(t.max,n))}}function g(){function e(){w.call(n,{value:parseFloat(o.value),origin:new $(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:K.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i*n._currentZoom,t.preventDefault(),v.call(n,o),e.call(n)}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.0001",o.value=1,o.style.display=n.options.showZoomer?"":"none",o.setAttribute("aria-label","zoom"),n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function w(e){function t(){var e={};e[P]=i.toString(),e[N]=a.toString(),o(n.elements.preview,e)}var n=this,i=e?e.transform:K.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new $(n.elements.preview);if(n._currentZoom=e?e.value:n._currentZoom,i.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),t(),n.options.enforceBoundary){var l=y.call(n,r),s=l.translate,u=l.origin;i.x>=s.maxX&&(a.x=u.minX,i.x=s.maxX),i.x<=s.minX&&(a.x=u.maxX,i.x=s.minX),i.y>=s.maxY&&(a.y=u.minY,i.y=s.maxY),i.y<=s.minY&&(a.y=u.maxY,i.y=s.minY)}t(),Q.call(n),E.call(n)}function y(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.elements.boundary.clientWidth/2,a=t.elements.boundary.clientHeight/2,l=t.elements.preview.getBoundingClientRect(),s=l.width,u=l.height,c=i/2,h=o/2,p=-1*(c/n-r),d=-1*(h/n-a),m=1/n*c,f=1/n*h;return{translate:{maxX:p,minX:p-(s*(1/n)-i*(1/n)),maxY:d,minY:d-(u*(1/n)-o*(1/n))},origin:{maxX:s*(1/n)-m,minX:m,maxY:u*(1/n)-f,minY:f}}}function b(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=K.parse(e.elements.preview.style[P]),a=new $(e.elements.preview),l=i.top-n.top+i.height/2,s=i.left-n.left+i.width/2,u={},c={};u.y=l/t,u.x=s/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[N]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function x(){function e(e,t){var n=d.elements.preview.getBoundingClientRect(),i=p.y+t,o=p.x+e;d.options.enforceBoundary?(h.top>n.top+t&&h.bottomn.left+e&&h.right1){var f=t.touches[0],g=t.touches[1],w=Math.sqrt((f.pageX-g.pageX)*(f.pageX-g.pageX)+(f.pageY-g.pageY)*(f.pageY-g.pageY));c||(c=w/d._currentZoom);var y=w/c;return v.call(d,y),void i(d.elements.zoomer)}e(l,h),m[P]=p.toString(),o(d.elements.preview,m),C.call(d),u=r,s=n}function l(){t(m=!1),window.removeEventListener("mousemove",a),window.removeEventListener("touchmove",a),window.removeEventListener("mouseup",l),window.removeEventListener("touchend",l),document.body.style[D]="",b.call(d),E.call(d),c=0}var s,u,c,h,p,d=this,m=!1;d.elements.overlay.addEventListener("mousedown",r),d.elements.viewport.addEventListener("keydown",function(e){var t=37,i=38,o=39,r=40;if(!e.shiftKey||e.keyCode!=i&&e.keyCode!=r){if(d.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var a=function(n){switch(e.keyCode){case t:return[1,0];case i:return[0,1];case o:return[-1,0];case r:return[0,-1]}}();p=K.parse(d.elements.preview),document.body.style[D]="none",h=d.elements.viewport.getBoundingClientRect(),n(a)}}else{var l=0;l=e.keyCode==i?parseFloat(d.elements.zoomer.value,10)+parseFloat(d.elements.zoomer.step,10):parseFloat(d.elements.zoomer.value,10)-parseFloat(d.elements.zoomer.step,10),d.setZoom(l)}}),d.elements.overlay.addEventListener("touchstart",r)}function C(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function E(){var e=this,t=e.get();if(_.call(e))if(e.options.update.call(e,t),e.$&&"undefined"==typeof Prototype)e.$(e.element).trigger("update",t);else{var n;window.CustomEvent?n=new CustomEvent("update",{detail:t}):(n=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),e.element.dispatchEvent(n)}}function _(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function L(){var e=this,t={},n=e.elements.preview,i=e.elements.preview.getBoundingClientRect(),r=new K(0,0,1),a=new $;_.call(e)&&!e.data.bound&&(e.data.bound=!0,t[P]=r.toString(),t[N]=a.toString(),t.opacity=1,o(n,t),e._originalImageWidth=i.width,e._originalImageHeight=i.height,e.options.enableZoom?B.call(e,!0):e._currentZoom=1,r.scale=e._currentZoom,t[P]=r.toString(),o(n,t),e.data.points.length?R.call(e,e.data.points):I.call(e),b.call(e),C.call(e))}function B(e){var t,n,o,r,a=this,l=0,s=1.5,u=a.elements.zoomer,c=parseFloat(u.value),h=a.elements.boundary.getBoundingClientRect(),p=a.elements.preview.getBoundingClientRect(),d=a.elements.viewport.getBoundingClientRect();a.options.enforceBoundary&&(o=d.width/(e?p.width:p.width/c),r=d.height/(e?p.height:p.height/c),l=Math.max(o,r)),l>=s&&(s=l+1),u.min=F(l,4),u.max=F(s,4),e&&(n=Math.max(h.width/p.width,h.height/p.height),t=null!==a.data.boundZoom?a.data.boundZoom:n,v.call(a,t)),i(u)}function R(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},l=i.width/n,s=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,p={};p[N]=u+"px "+s+"px",p[P]=new K(h,c,l).toString(),o(t.elements.preview,p),v.call(t,l),t._currentZoom=l}function I(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,l=r-(t.width-n.width)/2,s=a-(t.height-n.height)/2,u=new K(l,s,e._currentZoom);o(e.elements.preview,P,u.toString())}function M(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=m.call(t),e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r&&!e?p(n,i,s(h(i)||0,10)):e&&p(n,i,e)}function Z(e){var t=this,n=e.points,i=s(n[0]),o=s(n[1]),r=s(n[2]),a=s(n[3]),l=r-i,u=a-o,c=e.circle,h=document.createElement("canvas"),p=h.getContext("2d"),d=l,m=u,f=0,v=0,g=d,w=m,y=1;return e.outputWidth&&e.outputHeight&&(g=e.outputWidth,w=e.outputHeight,y=g/d),h.width=g,h.height=w,e.backgroundColor&&(p.fillStyle=e.backgroundColor,p.fillRect(0,0,d,m)),t.options.enforceBoundary||(i<0&&(f=Math.abs(i),i=0),o<0&&(v=Math.abs(o),o=0),r>t._originalImageWidth&&(d=l=t._originalImageWidth-i),a>t._originalImageHeight&&(m=u=t._originalImageHeight-o)),1!==y&&(f*=y,v*=y,d*=y,m*=y),p.drawImage(this.elements.preview,i,o,Math.min(l,t._originalImageWidth),Math.min(u,t._originalImageHeight),f,v,d,m),c&&(p.fillStyle="#fff",p.globalCompositeOperation="destination-in",p.beginPath(),p.arc(d/2,m/2,d/2,0,2*Math.PI,!0),p.closePath(),p.fill()),h}function z(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],l=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:l+"px"}),n}function Y(e){return Z.call(this,e).toDataURL(e.format,e.quality)}function W(e){var t=this;return new Promise(function(n,i){Z.call(t,e).toBlob(function(e){n(e)},e.format,e.quality)})}function X(e,t){var n,i=this,o=[],r=null,a=m.call(i);if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if(void 0===e&&i.data.url)return L.call(i),E.call(i),null;n=e.url,o=e.points||[],r=void 0===e.zoom?null:e.zoom}return i.data.bound=!1,i.data.url=n||i.data.url,i.data.boundZoom=r,u(n,i.elements.img,a).then(function(n){if(o.length)i.options.relative&&(o=[o[0]*n.naturalWidth/100,o[1]*n.naturalHeight/100,o[2]*n.naturalWidth/100,o[3]*n.naturalHeight/100]);else{var r,a,l=c(n),s=i.elements.viewport.getBoundingClientRect(),u=s.width/s.height;l.width/l.height>u?r=(a=l.height)*u:a=(r=l.width)/u;var h=(l.width-r)/2,p=(l.height-a)/2,d=h+r,m=p+a;i.data.points=[h,p,d,m]}i.data.points=o.map(function(e){return parseFloat(e)}),i.options.useCanvas&&M.call(i,e.orientation||1),L.call(i),E.call(i),t&&t()})}function F(e,t){return parseFloat(e).toFixed(t||0)}function H(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=(n.width-e.elements.viewport.offsetWidth)/2,a=(n.height-e.elements.viewport.offsetHeight)/2,l=i+e.elements.viewport.offsetWidth+r,s=o+e.elements.viewport.offsetHeight+a,u=e._currentZoom;(u===1/0||isNaN(u))&&(u=1);var c=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(c,i/u),o=Math.max(c,o/u),l=Math.max(c,l/u),s=Math.max(c,s/u),{points:[F(i),F(o),F(l),F(s)],zoom:u}}function k(e){var t=this,i=H.call(t),o=n(G,n({},e)),r="string"==typeof e?e:o.type||"base64",a=o.size||"viewport",l=o.format,s=o.quality,u=o.backgroundColor,c="boolean"==typeof o.circle?o.circle:"circle"===t.options.viewport.type,h=t.elements.viewport.getBoundingClientRect(),p=h.width/h.height;return"viewport"===a?(i.outputWidth=h.width,i.outputHeight=h.height):"object"==typeof a&&(a.width&&a.height?(i.outputWidth=a.width,i.outputHeight=a.height):a.width?(i.outputWidth=a.width,i.outputHeight=a.width/p):a.height&&(i.outputWidth=a.height*p,i.outputHeight=a.height)),J.indexOf(l)>-1&&(i.format="image/"+l,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e,n){switch(r.toLowerCase()){case"rawcanvas":e(Z.call(t,i));break;case"canvas":case"base64":e(Y.call(t,i));break;case"blob":W.call(t,i).then(e);break;default:e(z.call(t,i))}})}function j(){L.call(this)}function A(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=document.createElement("canvas"),o=1;i.width=n.width,i.height=n.height,i.getContext("2d").drawImage(n,0,0),90!==e&&-270!==e||(o=6),-90!==e&&270!==e||(o=8),180!==e&&-180!==e||(o=3),p(n,i,o),w.call(t),i=null}function S(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function O(e,t){if(this.element=e,this.options=n(n({},O.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;r(i,"cr-original-image"),l(i,{"aria-hidden":"true",alt:""});var o=document.createElement("div");this.element.parentNode.appendChild(o),o.appendChild(i),this.element=o,this.options.url=this.options.url||i.src}if(d.call(this),this.options.url){var a={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,X.call(this,a)}}"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null!==n){var i;try{i=n(t._value)}catch(t){return void e.reject(t)}e.resolve(i)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void s(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function l(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function s(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(e){if(i)return;i=!0,n(e)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype.catch=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new l(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var l=a.then;if("function"==typeof l)return void l.call(a,function(e){i(r,e)},n)}e[r]=a,0==--o&&t(e)}catch(e){n(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;ri;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,n){for(var i=atob(this.toDataURL(t,n).split(",")[1]),o=i.length,r=new Uint8Array(o),a=0;a-1||e.indexOf("none")>-1?K.fromMatrix(e):K.fromString(e)},K.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new K(s(t[4]),s(t[5]),parseFloat(t[0]))},K.fromString=function(e){var t=e.split(") "),n=t[0].substring(O.globals.translate.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new K(o,r,i)},K.prototype.toString=function(){var e=U[O.globals.translate].suffix||"";return O.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var $=function(e){if(!e||!e.style[N])return this.x=0,void(this.y=0);var t=e.style[N].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};$.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Q=function(e,t,n){var i;return function(){var o=this,r=arguments,a=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||e.apply(o,r)},t),a&&e.apply(o,r)}}(C,500),G={type:"canvas",format:"png",quality:1},J=["jpeg","webp","png"];if(window.jQuery){var V=window.jQuery;V.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),n=V(this).data("croppie");return"get"===e?n.get():"result"===e?n.result.apply(n,t):"bind"===e?n.bind.apply(n,t):this.each(function(){var n=V(this).data("croppie");if(n){var i=n[e];if(!V.isFunction(i))throw"Croppie "+e+" method not found";i.apply(n,t),"destroy"===e&&V(this).removeData("croppie")}})}return this.each(function(){var t=new O(this,e);t.$=V,V(this).data("croppie",t)})}}O.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},O.globals={translate:"translate3d"},n(O.prototype,{bind:function(e,t){return X.call(this,e,t)},get:function(){var e=H.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return k.call(this,e)},refresh:function(){return j.call(this)},setZoom:function(e){v.call(this,e),i(this.elements.zoomer)},rotate:function(e){A.call(this,e)},destroy:function(){return S.call(this)}}),e.Croppie=window.Croppie=O,"object"==typeof module&&module.exports&&(module.exports=O)}); \ No newline at end of file + +!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(e){function t(e){if(e in T)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=D.length;n--;)if((e=D[n]+t)in T)return e}function n(e,t){e=e||{};for(var i in t)t[i]&&t[i].constructor&&t[i].constructor===Object?(e[i]=e[i]||{},n(e[i],t[i])):e[i]=t[i];return e}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;(t={})[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function l(e){return parseInt(e,10)}function s(e,t,n){var i=t||new Image;return i.style.opacity=0,new Promise(function(t){function o(){setTimeout(function(){t(i)},1)}i.src!==e?(i.exifdata=null,i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){n?EXIF.getData(i,function(){o()}):o()},i.src=e):o()})}function u(e){var t=e.naturalWidth,n=e.naturalHeight;if(e.exifdata&&e.exifdata.Orientation>=5){var i=t;t=n,n=i}return{width:t,height:n}}function c(e){return e.exifdata.Orientation}function h(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function p(){var e,t,n,i,a,l=this,s=l.options.viewport.type?"cr-vp-"+l.options.viewport.type:null;l.options.useCanvas=l.options.enableOrientation||d.call(l),l.data={},l.elements={},e=l.elements.boundary=document.createElement("div"),t=l.elements.viewport=document.createElement("div"),l.elements.img=document.createElement("img"),n=l.elements.overlay=document.createElement("div"),l.options.useCanvas?(l.elements.canvas=document.createElement("canvas"),l.elements.preview=l.elements.canvas):l.elements.preview=l.elements.img,r(e,"cr-boundary"),i=l.options.boundary.width,a=l.options.boundary.height,o(e,{width:i+(isNaN(i)?"":"px"),height:a+(isNaN(a)?"":"px")}),r(t,"cr-viewport"),s&&r(t,s),o(t,{width:l.options.viewport.width+"px",height:l.options.viewport.height+"px"}),t.setAttribute("tabindex",0),r(l.elements.preview,"cr-image"),r(n,"cr-overlay"),l.element.appendChild(e),e.appendChild(l.elements.preview),e.appendChild(t),e.appendChild(n),r(l.element,"croppie-container"),l.options.customClass&&r(l.element,l.options.customClass),b.call(this),l.options.enableZoom&&v.call(l),l.options.enableResize&&m.call(l)}function d(){return this.options.enableExif&&window.EXIF}function m(){function e(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){var o=p.elements.overlay.getBoundingClientRect();if(m=!0,a=e.pageX,l=e.pageY,i=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",s=o.width,u=o.height,e.touches){var r=e.touches[0];a=r.pageX,l=r.pageY}window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[A]="none"}}function t(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var r=e.touches[0];t=r.pageX,n=r.pageY}var c=t-a,h=n-l,m=p.options.viewport.height+h,v=p.options.viewport.width+c;"v"===i&&m>=f&&m<=u?(o(d,{height:m+"px"}),p.options.boundary.height+=h,o(p.elements.boundary,{height:p.options.boundary.height+"px"}),p.options.viewport.height+=h,o(p.elements.viewport,{height:p.options.viewport.height+"px"})):"h"===i&&v>=f&&v<=s&&(o(d,{width:v+"px"}),p.options.boundary.width+=c,o(p.elements.boundary,{width:p.options.boundary.width+"px"}),p.options.viewport.width+=c,o(p.elements.viewport,{width:p.options.viewport.width+"px"})),x.call(p),R.call(p),y.call(p),C.call(p),l=n,a=t}function n(){m=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[A]=""}var i,a,l,s,u,c,h,p=this,d=document.createElement("div"),m=!1,f=50;r(d,"cr-resizer"),o(d,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(r(c=document.createElement("div"),"cr-resizer-vertical"),d.appendChild(c)),this.options.resizeControls.width&&(r(h=document.createElement("div"),"cr-resizer-horisontal"),d.appendChild(h)),c&&c.addEventListener("mousedown",e),h&&h.addEventListener("mousedown",e),this.elements.boundary.appendChild(d)}function f(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=Y(e,4);t.value=Math.max(t.min,Math.min(t.max,n))}}function v(){function e(){g.call(n,{value:parseFloat(o.value),origin:new K(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:U.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i*n._currentZoom,t.preventDefault(),f.call(n,o),e.call(n)}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.0001",o.value=1,o.style.display=n.options.showZoomer?"":"none",n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function g(e){function t(){var e={};e[P]=i.toString(),e[N]=a.toString(),o(n.elements.preview,e)}var n=this,i=e?e.transform:U.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new K(n.elements.preview);if(n._currentZoom=e?e.value:n._currentZoom,i.scale=n._currentZoom,t(),n.options.enforceBoundary){var l=w.call(n,r),s=l.translate,u=l.origin;i.x>=s.maxX&&(a.x=u.minX,i.x=s.maxX),i.x<=s.minX&&(a.x=u.maxX,i.x=s.minX),i.y>=s.maxY&&(a.y=u.minY,i.y=s.maxY),i.y<=s.minY&&(a.y=u.maxY,i.y=s.minY)}t(),$.call(n),C.call(n)}function w(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.elements.boundary.clientWidth/2,a=t.elements.boundary.clientHeight/2,l=t.elements.preview.getBoundingClientRect(),s=l.width,u=l.height,c=i/2,h=o/2,p=-1*(c/n-r),d=-1*(h/n-a),m=1/n*c,f=1/n*h;return{translate:{maxX:p,minX:p-(s*(1/n)-i*(1/n)),maxY:d,minY:d-(u*(1/n)-o*(1/n))},origin:{maxX:s*(1/n)-m,minX:m,maxY:u*(1/n)-f,minY:f}}}function y(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=U.parse(e.elements.preview.style[P]),a=new K(e.elements.preview),l=i.top-n.top+i.height/2,s=i.left-n.left+i.width/2,u={},c={};u.y=l/t,u.x=s/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[N]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function b(){function e(e,t){var n=p.elements.preview.getBoundingClientRect(),i=h.y+t,o=h.x+e;p.options.enforceBoundary?(c.top>n.top+t&&c.bottomn.left+e&&c.right1){var v=t.touches[0],g=t.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));u||(u=w/p._currentZoom);var y=w/u;return f.call(p,y),void i(p.elements.zoomer)}e(c,d),m[P]=h.toString(),o(p.elements.preview,m),x.call(p),s=r,l=n}function a(){d=!1,window.removeEventListener("mousemove",r),window.removeEventListener("touchmove",r),window.removeEventListener("mouseup",a),window.removeEventListener("touchend",a),document.body.style[A]="",y.call(p),C.call(p),u=0}var l,s,u,c,h,p=this,d=!1;p.elements.overlay.addEventListener("mousedown",n),p.elements.viewport.addEventListener("keydown",function(e){var n=37,i=38,o=39,r=40;if(!e.shiftKey||e.keyCode!=i&&e.keyCode!=r){if(p.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var a=function(t){switch(e.keyCode){case n:return[1,0];case i:return[0,1];case o:return[-1,0];case r:return[0,-1]}}();h=U.parse(p.elements.preview),document.body.style[A]="none",c=p.elements.viewport.getBoundingClientRect(),t(a)}}else{var l=0;l=e.keyCode==i?parseFloat(p.elements.zoomer.value,10)+parseFloat(p.elements.zoomer.step,10):parseFloat(p.elements.zoomer.value,10)-parseFloat(p.elements.zoomer.step,10),p.setZoom(l)}}),p.elements.overlay.addEventListener("touchstart",n)}function x(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function C(){var e=this,t=e.get();if(E.call(e))if(e.options.update.call(e,t),e.$&&"undefined"==typeof Prototype)e.$(e.element).trigger("update",t);else{var n;window.CustomEvent?n=new CustomEvent("update",{detail:t}):(n=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),e.element.dispatchEvent(n)}}function E(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function _(){var e=this,t={},n=e.elements.preview,i=e.elements.preview.getBoundingClientRect(),r=new U(0,0,1),a=new K;E.call(e)&&!e.data.bound&&(e.data.bound=!0,t[P]=r.toString(),t[N]=a.toString(),t.opacity=1,o(n,t),e._originalImageWidth=i.width,e._originalImageHeight=i.height,e.options.enableZoom?R.call(e,!0):e._currentZoom=1,r.scale=e._currentZoom,t[P]=r.toString(),o(n,t),e.data.points.length?L.call(e,e.data.points):B.call(e),y.call(e),x.call(e))}function R(e){var t,n,o,r,a=this,l=0,s=1.5,u=a.elements.zoomer,c=parseFloat(u.value),h=a.elements.boundary.getBoundingClientRect(),p=a.elements.preview.getBoundingClientRect(),d=a.elements.viewport.getBoundingClientRect();a.options.enforceBoundary&&(o=d.width/(e?p.width:p.width/c),r=d.height/(e?p.height:p.height/c),l=Math.max(o,r)),l>=s&&(s=l+1),u.min=Y(l,4),u.max=Y(s,4),e&&(n=Math.max(h.width/p.width,h.height/p.height),t=null!==a.data.boundZoom?a.data.boundZoom:n,f.call(a,t)),i(u)}function L(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},l=i.width/n,s=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,p={};p[N]=u+"px "+s+"px",p[P]=new U(h,c,l).toString(),o(t.elements.preview,p),f.call(t,l),t._currentZoom=l}function B(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,l=r-(t.width-n.width)/2,s=a-(t.height-n.height)/2,u=new U(l,s,e._currentZoom);o(e.elements.preview,P,u.toString())}function I(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=d.call(t),e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r&&!e?h(n,i,l(c(i)||0,10)):e&&h(n,i,e)}function M(e){var t=this,n=e.points,i=l(n[0]),o=l(n[1]),r=l(n[2]),a=l(n[3]),s=r-i,u=a-o,c=e.circle,h=document.createElement("canvas"),p=h.getContext("2d"),d=s,m=u,f=0,v=0,g=d,w=m,y=e.outputWidth&&e.outputHeight,b=1;return outputHeightRatio=1,y&&(g=e.outputWidth,w=e.outputHeight,b=g/d,outputHeightRatio=w/outWHeight),h.width=g,h.height=w,e.backgroundColor&&(p.fillStyle=e.backgroundColor,p.fillRect(0,0,d,m)),t.options.enforceBoundary||(i<0&&(f=Math.abs(i),i=0),o<0&&(v=Math.abs(o),o=0),r>t._originalImageWidth&&(d=s=t._originalImageWidth-i),a>t._originalImageHeight&&(m=u=t._originalImageHeight-o)),1===b&&1===outputHeightRatio||(f*=b,v*=outputHeightRatio,d*=b,m*=outputHeightRatio),p.drawImage(this.elements.preview,i,o,Math.min(s,t._originalImageWidth),Math.min(u,t._originalImageHeight),f,v,d,m),c&&(p.fillStyle="#fff",p.globalCompositeOperation="destination-in",p.beginPath(),p.arc(d/2,m/2,d/2,0,2*Math.PI,!0),p.closePath(),p.fill()),h}function H(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],l=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:l+"px"}),n}function Z(e){return M.call(this,e).toDataURL(e.format,e.quality)}function z(e){var t=this;return new Promise(function(n,i){M.call(t,e).toBlob(function(e){n(e)},e.format,e.quality)})}function W(e,t){var n,i=this,o=[],r=null,a=d.call(i);if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if(void 0===e&&i.data.url)return _.call(i),C.call(i),null;n=e.url,o=e.points||[],r=void 0===e.zoom?null:e.zoom}return i.data.bound=!1,i.data.url=n||i.data.url,i.data.boundZoom=r,s(n,i.elements.img,a).then(function(n){if(o.length)i.options.relative&&(o=[o[0]*n.naturalWidth/100,o[1]*n.naturalHeight/100,o[2]*n.naturalWidth/100,o[3]*n.naturalHeight/100]);else{var r,a,l=u(n),s=i.elements.viewport.getBoundingClientRect(),c=s.width/s.height;l.width/l.height>c?r=(a=l.height)*c:a=(r=l.width)/c;var h=(l.width-r)/2,p=(l.height-a)/2,d=h+r,m=p+a;i.data.points=[h,p,d,m]}i.data.points=o.map(function(e){return parseFloat(e)}),i.options.useCanvas&&I.call(i,e.orientation||1),_.call(i),C.call(i),t&&t()})}function Y(e,t){return parseFloat(e).toFixed(t||0)}function X(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=(n.width-e.elements.viewport.offsetWidth)/2,a=(n.height-e.elements.viewport.offsetHeight)/2,l=i+e.elements.viewport.offsetWidth+r,s=o+e.elements.viewport.offsetHeight+a,u=e._currentZoom;(u===1/0||isNaN(u))&&(u=1);var c=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(c,i/u),o=Math.max(c,o/u),l=Math.max(c,l/u),s=Math.max(c,s/u),{points:[Y(i),Y(o),Y(l),Y(s)],zoom:u}}function F(e){var t=this,i=X.call(t),o=n(Q,n({},e)),r="string"==typeof e?e:o.type||"base64",a=o.size||"viewport",l=o.format,s=o.quality,u=o.backgroundColor,c="boolean"==typeof o.circle?o.circle:"circle"===t.options.viewport.type,h=t.elements.viewport.getBoundingClientRect(),p=h.width/h.height;return"viewport"===a?(i.outputWidth=h.width,i.outputHeight=h.height):"object"==typeof a&&(a.width&&a.height?(i.outputWidth=a.width,i.outputHeight=a.height):a.width?(i.outputWidth=a.width,i.outputHeight=a.width/p):a.height&&(i.outputWidth=a.height*p,i.outputHeight=a.height)),G.indexOf(l)>-1&&(i.format="image/"+l,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e,n){switch(r.toLowerCase()){case"rawcanvas":e(M.call(t,i));break;case"canvas":case"base64":e(Z.call(t,i));break;case"blob":z.call(t,i).then(e);break;default:e(H.call(t,i))}})}function k(){_.call(this)}function j(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=document.createElement("canvas"),o=1;i.width=n.width,i.height=n.height,i.getContext("2d").drawImage(n,0,0),90!==e&&-270!==e||(o=6),-90!==e&&270!==e||(o=8),180!==e&&-180!==e||(o=3),h(n,i,o),g.call(t),i=null}function S(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function O(e,t){if(this.element=e,this.options=n(n({},O.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;r(i,"cr-original-image");var o=document.createElement("div");this.element.parentNode.appendChild(o),o.appendChild(i),this.element=o,this.options.url=this.options.url||i.src}if(p.call(this),this.options.url){var a={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,W.call(this,a)}}"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null!==n){var i;try{i=n(t._value)}catch(t){return void e.reject(t)}e.resolve(i)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void s(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function l(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function s(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(e){if(i)return;i=!0,n(e)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype.catch=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new l(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var l=a.then;if("function"==typeof l)return void l.call(a,function(e){i(r,e)},n)}e[r]=a,0==--o&&t(e)}catch(e){n(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;ri;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,n){for(var i=atob(this.toDataURL(t,n).split(",")[1]),o=i.length,r=new Uint8Array(o),a=0;a-1||e.indexOf("none")>-1?U.fromMatrix(e):U.fromString(e)},U.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new U(l(t[4]),l(t[5]),parseFloat(t[0]))},U.fromString=function(e){var t=e.split(") "),n=t[0].substring(O.globals.translate.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new U(o,r,i)},U.prototype.toString=function(){var e=q[O.globals.translate].suffix||"";return O.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var K=function(e){if(!e||!e.style[N])return this.x=0,void(this.y=0);var t=e.style[N].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};K.prototype.toString=function(){return this.x+"px "+this.y+"px"};var $=function(e,t,n){var i;return function(){var o=this,r=arguments,a=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||e.apply(o,r)},t),a&&e.apply(o,r)}}(x,500),Q={type:"canvas",format:"png",quality:1},G=["jpeg","webp","png"];if(window.jQuery){var J=window.jQuery;J.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),n=J(this).data("croppie");return"get"===e?n.get():"result"===e?n.result.apply(n,t):"bind"===e?n.bind.apply(n,t):this.each(function(){var n=J(this).data("croppie");if(n){var i=n[e];if(!J.isFunction(i))throw"Croppie "+e+" method not found";i.apply(n,t),"destroy"===e&&J(this).removeData("croppie")}})}return this.each(function(){var t=new O(this,e);t.$=J,J(this).data("croppie",t)})}}O.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},O.globals={translate:"translate3d"},n(O.prototype,{bind:function(e,t){return W.call(this,e,t)},get:function(){var e=X.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return F.call(this,e)},refresh:function(){return k.call(this)},setZoom:function(e){f.call(this,e),i(this.elements.zoomer)},rotate:function(e){j.call(this,e)},destroy:function(){return S.call(this)}}),e.Croppie=window.Croppie=O,"object"==typeof module&&module.exports&&(module.exports=O)}); From f2158da6071025245e39d0e7d0b81027a642b624 Mon Sep 17 00:00:00 2001 From: Jofferson Ramirez Tiquez Date: Thu, 19 Oct 2017 20:55:37 +0800 Subject: [PATCH 09/68] Updated index.html (#358) Fixed typo. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 79773720..5383fb21 100644 --- a/index.html +++ b/index.html @@ -172,7 +172,7 @@

Methods

  • bind({ url, points, orientation, zoom })Promise -

    Bind an image the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.

    +

    Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.

    Parameters
      From 19200f993ce019e91e2ccafd77cf3988627fbdad Mon Sep 17 00:00:00 2001 From: lumer82 Date: Thu, 19 Oct 2017 14:58:30 +0200 Subject: [PATCH 10/68] Fix Issue 397 (#398) * ISSUE-397: Fix wrong imgData after zomming out. * 2.5.1 * Revert "2.5.1" This reverts commit f98da61 * Revert croppie.min.js to version 2.5.0 state * Add imgData to declaration block. --- croppie.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index 87d39337..6a26d138 100755 --- a/croppie.js +++ b/croppie.js @@ -983,7 +983,7 @@ initialZoom = 1, cssReset = {}, img = self.elements.preview, - imgData = self.elements.preview.getBoundingClientRect(), + imgData = null, transformReset = new Transform(0, 0, initialZoom), originReset = new TransformOrigin(), isVisible = _isVisible.call(self); @@ -999,6 +999,8 @@ cssReset['opacity'] = 1; css(img, cssReset); + imgData = self.elements.preview.getBoundingClientRect(); + self._originalImageWidth = imgData.width; self._originalImageHeight = imgData.height; From c70135b4c8882d723520ab3d3245cc6d9594dd7a Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Thu, 19 Oct 2017 08:03:05 -0500 Subject: [PATCH 11/68] fix error from #378 --- croppie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index 6a26d138..089c5b05 100755 --- a/croppie.js +++ b/croppie.js @@ -1151,7 +1151,7 @@ canvasWidth = data.outputWidth; canvasHeight = data.outputHeight; outputWidthRatio = canvasWidth / outWidth; - outputHeightRatio = canvasHeight / outWHeight; + outputHeightRatio = canvasHeight / outHeight; } canvas.width = canvasWidth; From 83758d15b82a8517518b7c71c2d19c9ed5d7541a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Kn=C3=B6bel?= Date: Thu, 19 Oct 2017 16:02:31 +0200 Subject: [PATCH 12/68] Fix zoom problems with enforceBoundary turned off (#405) I some situations the result image is scaled out of ratio! I tagged down the problem to: Math.min(width, self._originalImageWidth) I don't know why its needed ... but if i removed it its working ok! --- croppie.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/croppie.js b/croppie.js index 089c5b05..ebcf83b1 100755 --- a/croppie.js +++ b/croppie.js @@ -1159,9 +1159,10 @@ if (data.backgroundColor) { ctx.fillStyle = data.backgroundColor; - ctx.fillRect(0, 0, outWidth, outHeight); + ctx.fillRect(0, 0, canvasWidth, canvasHeight); } + // start fixing data to send to draw image for enforceBoundary: false if (!self.options.enforceBoundary) { if (left < 0) { @@ -1181,6 +1182,10 @@ outHeight = height; } } + else{ + width=Math.min(width, self._originalImageWidth); + height=Math.min(height, self._originalImageHeight) + } if (outputWidthRatio !== 1 || outputHeightRatio !== 1) { startX *= outputWidthRatio; @@ -1188,8 +1193,7 @@ outWidth *= outputWidthRatio; outHeight *= outputHeightRatio; } - - ctx.drawImage(this.elements.preview, left, top, Math.min(width, self._originalImageWidth), Math.min(height, self._originalImageHeight), startX, startY, outWidth, outHeight); + ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, outWidth, outHeight); if (circle) { ctx.fillStyle = '#fff'; ctx.globalCompositeOperation = 'destination-in'; From 515c7871d5e30cdee55998055b531a482865b974 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Thu, 19 Oct 2017 15:20:42 -0500 Subject: [PATCH 13/68] trying to cleanup --- croppie.js | 84 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 46 insertions(+), 38 deletions(-) diff --git a/croppie.js b/croppie.js index ebcf83b1..677ee598 100755 --- a/croppie.js +++ b/croppie.js @@ -1137,22 +1137,22 @@ circle = data.circle, canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), - outWidth = width, - outHeight = height, + // outWidth = width, + // outHeight = height, startX = 0, startY = 0, - canvasWidth = outWidth, - canvasHeight = outHeight, + canvasWidth = data.outputWidth || width, + canvasHeight = data.outputHeight || height, customDimensions = (data.outputWidth && data.outputHeight), outputWidthRatio = 1; outputHeightRatio = 1; - if (customDimensions) { - canvasWidth = data.outputWidth; - canvasHeight = data.outputHeight; - outputWidthRatio = canvasWidth / outWidth; - outputHeightRatio = canvasHeight / outHeight; - } + // if (customDimensions) { + // canvasWidth = data.outputWidth; + // canvasHeight = data.outputHeight; + // outputWidthRatio = canvasWidth / outWidth; + // outputHeightRatio = canvasHeight / outHeight; + // } canvas.width = canvasWidth; canvas.height = canvasHeight; @@ -1162,38 +1162,46 @@ ctx.fillRect(0, 0, canvasWidth, canvasHeight); } - // start fixing data to send to draw image for enforceBoundary: false - if (!self.options.enforceBoundary) { - if (left < 0) { - startX = Math.abs(left); - left = 0; - } - if (top < 0) { - startY = Math.abs(top); - top = 0; - } - if (right > self._originalImageWidth) { - width = self._originalImageWidth - left; - outWidth = width; - } - if (bottom > self._originalImageHeight) { - height = self._originalImageHeight - top; - outHeight = height; - } - } - else{ + // if (!self.options.enforceBoundary) { + // if (left < 0) { + // startX = Math.abs(left); + // left = 0; + // } + // if (top < 0) { + // startY = Math.abs(top); + // top = 0; + // } + // if (right > self._originalImageWidth) { + // width = self._originalImageWidth - left; + // canvasWidth = width; + // } + // if (bottom > self._originalImageHeight) { + // height = self._originalImageHeight - top; + // canvasHeight = height; + // } + // } + // else{ width=Math.min(width, self._originalImageWidth); height=Math.min(height, self._originalImageHeight) - } + // } - if (outputWidthRatio !== 1 || outputHeightRatio !== 1) { - startX *= outputWidthRatio; - startY *= outputHeightRatio; - outWidth *= outputWidthRatio; - outHeight *= outputHeightRatio; - } - ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, outWidth, outHeight); + // if (outputWidthRatio !== 1 || outputHeightRatio !== 1) { + // startX *= outputWidthRatio; + // startY *= outputHeightRatio; + // outWidth *= outputWidthRatio; + // outHeight *= outputHeightRatio; + // } + + console.table({ + left: left, + right: right, + top: top, + bottom: bottom, + canvasWidth: canvasWidth, + canvasHeight: canvasHeight, + }) + ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight); if (circle) { ctx.fillStyle = '#fff'; ctx.globalCompositeOperation = 'destination-in'; From 6754be1e00256e713f19c2a6c26b03ecd41fb753 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Fri, 17 Nov 2017 07:58:52 -0600 Subject: [PATCH 14/68] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 989dd36c..ffa44e5b 100755 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js * https://github.com/wem/croppie-dart * https://github.com/allenRoyston/ngCroppie * https://github.com/lpsBetty/angular-croppie - +* https://github.com/dima-kov/django-croppie ## Contributing #### Static Server From c8d203c32728244b4e0358d008310020b03dc945 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Fri, 8 Dec 2017 08:36:48 -0600 Subject: [PATCH 15/68] fixes for several issues; including #396 --- croppie.js | 61 +++++++++++++++------------------------------------- demo/demo.js | 8 +++++-- 2 files changed, 23 insertions(+), 46 deletions(-) diff --git a/croppie.js b/croppie.js index 677ee598..aef0fada 100755 --- a/croppie.js +++ b/croppie.js @@ -935,6 +935,7 @@ } function _updateOverlay() { + if (!this.elements) return; // since this is debounced, it can be fired after destroy var self = this, boundRect = self.elements.boundary.getBoundingClientRect(), imgData = self.elements.preview.getBoundingClientRect(); @@ -1053,7 +1054,11 @@ zoomer.min = fix(minZoom, 4); zoomer.max = fix(maxZoom, 4); - if (initial) { + log(scale, zoomer.min, zoomer.max); + if (!initial && (scale < zoomer.min || scale > zoomer.max)) { + _setZoomerVal.call(self, scale < zoomer.min ? zoomer.min : zoomer.max); + } + else if (initial) { defaultInitialZoom = Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height)); initialZoom = self.data.boundZoom !== null ? self.data.boundZoom : defaultInitialZoom; _setZoomerVal.call(self, initialZoom); @@ -1137,8 +1142,6 @@ circle = data.circle, canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), - // outWidth = width, - // outHeight = height, startX = 0, startY = 0, canvasWidth = data.outputWidth || width, @@ -1147,13 +1150,6 @@ outputWidthRatio = 1; outputHeightRatio = 1; - // if (customDimensions) { - // canvasWidth = data.outputWidth; - // canvasHeight = data.outputHeight; - // outputWidthRatio = canvasWidth / outWidth; - // outputHeightRatio = canvasHeight / outHeight; - // } - canvas.width = canvasWidth; canvas.height = canvasHeight; @@ -1162,37 +1158,9 @@ ctx.fillRect(0, 0, canvasWidth, canvasHeight); } - // start fixing data to send to draw image for enforceBoundary: false - // if (!self.options.enforceBoundary) { - // if (left < 0) { - // startX = Math.abs(left); - // left = 0; - // } - // if (top < 0) { - // startY = Math.abs(top); - // top = 0; - // } - // if (right > self._originalImageWidth) { - // width = self._originalImageWidth - left; - // canvasWidth = width; - // } - // if (bottom > self._originalImageHeight) { - // height = self._originalImageHeight - top; - // canvasHeight = height; - // } - // } - // else{ - width=Math.min(width, self._originalImageWidth); - height=Math.min(height, self._originalImageHeight) - // } - - // if (outputWidthRatio !== 1 || outputHeightRatio !== 1) { - // startX *= outputWidthRatio; - // startY *= outputHeightRatio; - // outWidth *= outputWidthRatio; - // outHeight *= outputHeightRatio; - // } - + width=Math.min(width, self._originalImageWidth); + height=Math.min(height, self._originalImageHeight) + console.table({ left: left, right: right, @@ -1206,7 +1174,7 @@ ctx.fillStyle = '#fff'; ctx.globalCompositeOperation = 'destination-in'; ctx.beginPath(); - ctx.arc(outWidth / 2, outHeight / 2, outWidth / 2, 0, Math.PI * 2, true); + ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); } @@ -1350,7 +1318,8 @@ return { points: [fix(x1), fix(y1), fix(x2), fix(y2)], - zoom: scale + zoom: scale, + orientation: self.data.orientation }; } @@ -1375,6 +1344,8 @@ ratio = vpRect.width / vpRect.height, prom; + console.log('result opts', opts); + if (size === 'viewport') { data.outputWidth = vpRect.width; data.outputHeight = vpRect.height; @@ -1443,8 +1414,10 @@ if (deg === 90 || deg === -270) ornt = 6; if (deg === -90 || deg === 270) ornt = 8; if (deg === 180 || deg === -180) ornt = 3; - + + self.data.orientation = ornt; drawCanvas(canvas, copy, ornt); + _updateZoomLimits.call(self); _onZoom.call(self); copy = null; } diff --git a/demo/demo.js b/demo/demo.js index f3eb2e28..a578b645 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -93,7 +93,11 @@ var Demo = (function() { } basic.croppie('result', { type: 'canvas', - size: size + size: size, + resultSize: { + width: 50, + height: 50 + } }).then(function (resp) { popupResult({ src: resp @@ -105,7 +109,7 @@ var Demo = (function() { function demoVanilla() { var vEl = document.getElementById('vanilla-demo'), vanilla = new Croppie(vEl, { - viewport: { width: 100, height: 100 }, + viewport: { width: 200, height: 100 }, boundary: { width: 300, height: 300 }, showZoomer: false, enableOrientation: true From e15877101624da79032a6717d16b9529f948fc05 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Fri, 8 Dec 2017 08:50:28 -0600 Subject: [PATCH 16/68] #383 - don't allow more than one initialized instance on element --- croppie.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index aef0fada..032fe584 100755 --- a/croppie.js +++ b/croppie.js @@ -1054,7 +1054,6 @@ zoomer.min = fix(minZoom, 4); zoomer.max = fix(maxZoom, 4); - log(scale, zoomer.min, zoomer.max); if (!initial && (scale < zoomer.min || scale > zoomer.max)) { _setZoomerVal.call(self, scale < zoomer.min ? zoomer.min : zoomer.max); } @@ -1478,6 +1477,9 @@ } function Croppie(element, opts) { + if (element.className.indexOf('croppie-container') > -1) { + throw new Error("Croppie: Can't initialize croppie more than once"); + } this.element = element; this.options = deepExtend(deepExtend({}, Croppie.defaults), opts); From 8430d4a73251700a522a7f9f53fd7236afdf612c Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Fri, 8 Dec 2017 08:53:47 -0600 Subject: [PATCH 17/68] #384 - document enableResize --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index 5383fb21..f10ba6e7 100644 --- a/index.html +++ b/index.html @@ -129,6 +129,12 @@

      Options

      Default false +
    • + enableResizeboolean +

      Enable or disable support for resizing the viewport area.

      + Default + false +
    • enableZoomboolean

      Enable zooming functionality. If set to false - scrolling and pinching would not zoom.

      From 97b9b7e88a0b2ce95bb253964c935838871d6cd4 Mon Sep 17 00:00:00 2001 From: Dani Date: Thu, 4 Jan 2018 13:03:14 +0100 Subject: [PATCH 18/68] added ctrl key required to zoom option --- croppie.js | 6 ++++-- croppie.min.js | 4 ++-- demo/demo.js | 3 ++- index.html | 7 ++++--- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/croppie.js b/croppie.js index ebcf83b1..82b748b6 100755 --- a/croppie.js +++ b/croppie.js @@ -2,7 +2,7 @@ * Croppie * Copyright 2017 * Foliotek - * Version: 2.5.1 + * Version: 2.5.2 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -618,7 +618,9 @@ function scroll(ev) { var delta, targetZoom; - if (ev.wheelDelta) { + if(self.options.mouseWheelZoom === 'ctrl' && ev.ctrlKey != true){ + return 0; + } else if (ev.wheelDelta) { delta = ev.wheelDelta / 1200; //wheelDelta min: -120 max: 120 // max x 10 x 2 } else if (ev.deltaY) { delta = ev.deltaY / 1060; //deltaY min: -53 max: 53 // max x 10 x 2 diff --git a/croppie.min.js b/croppie.min.js index de8717e1..8fcdf4f4 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1,2 +1,2 @@ - -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(e){function t(e){if(e in T)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=D.length;n--;)if((e=D[n]+t)in T)return e}function n(e,t){e=e||{};for(var i in t)t[i]&&t[i].constructor&&t[i].constructor===Object?(e[i]=e[i]||{},n(e[i],t[i])):e[i]=t[i];return e}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;(t={})[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function l(e){return parseInt(e,10)}function s(e,t,n){var i=t||new Image;return i.style.opacity=0,new Promise(function(t){function o(){setTimeout(function(){t(i)},1)}i.src!==e?(i.exifdata=null,i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){n?EXIF.getData(i,function(){o()}):o()},i.src=e):o()})}function u(e){var t=e.naturalWidth,n=e.naturalHeight;if(e.exifdata&&e.exifdata.Orientation>=5){var i=t;t=n,n=i}return{width:t,height:n}}function c(e){return e.exifdata.Orientation}function h(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function p(){var e,t,n,i,a,l=this,s=l.options.viewport.type?"cr-vp-"+l.options.viewport.type:null;l.options.useCanvas=l.options.enableOrientation||d.call(l),l.data={},l.elements={},e=l.elements.boundary=document.createElement("div"),t=l.elements.viewport=document.createElement("div"),l.elements.img=document.createElement("img"),n=l.elements.overlay=document.createElement("div"),l.options.useCanvas?(l.elements.canvas=document.createElement("canvas"),l.elements.preview=l.elements.canvas):l.elements.preview=l.elements.img,r(e,"cr-boundary"),i=l.options.boundary.width,a=l.options.boundary.height,o(e,{width:i+(isNaN(i)?"":"px"),height:a+(isNaN(a)?"":"px")}),r(t,"cr-viewport"),s&&r(t,s),o(t,{width:l.options.viewport.width+"px",height:l.options.viewport.height+"px"}),t.setAttribute("tabindex",0),r(l.elements.preview,"cr-image"),r(n,"cr-overlay"),l.element.appendChild(e),e.appendChild(l.elements.preview),e.appendChild(t),e.appendChild(n),r(l.element,"croppie-container"),l.options.customClass&&r(l.element,l.options.customClass),b.call(this),l.options.enableZoom&&v.call(l),l.options.enableResize&&m.call(l)}function d(){return this.options.enableExif&&window.EXIF}function m(){function e(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){var o=p.elements.overlay.getBoundingClientRect();if(m=!0,a=e.pageX,l=e.pageY,i=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",s=o.width,u=o.height,e.touches){var r=e.touches[0];a=r.pageX,l=r.pageY}window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[A]="none"}}function t(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var r=e.touches[0];t=r.pageX,n=r.pageY}var c=t-a,h=n-l,m=p.options.viewport.height+h,v=p.options.viewport.width+c;"v"===i&&m>=f&&m<=u?(o(d,{height:m+"px"}),p.options.boundary.height+=h,o(p.elements.boundary,{height:p.options.boundary.height+"px"}),p.options.viewport.height+=h,o(p.elements.viewport,{height:p.options.viewport.height+"px"})):"h"===i&&v>=f&&v<=s&&(o(d,{width:v+"px"}),p.options.boundary.width+=c,o(p.elements.boundary,{width:p.options.boundary.width+"px"}),p.options.viewport.width+=c,o(p.elements.viewport,{width:p.options.viewport.width+"px"})),x.call(p),R.call(p),y.call(p),C.call(p),l=n,a=t}function n(){m=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[A]=""}var i,a,l,s,u,c,h,p=this,d=document.createElement("div"),m=!1,f=50;r(d,"cr-resizer"),o(d,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(r(c=document.createElement("div"),"cr-resizer-vertical"),d.appendChild(c)),this.options.resizeControls.width&&(r(h=document.createElement("div"),"cr-resizer-horisontal"),d.appendChild(h)),c&&c.addEventListener("mousedown",e),h&&h.addEventListener("mousedown",e),this.elements.boundary.appendChild(d)}function f(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=Y(e,4);t.value=Math.max(t.min,Math.min(t.max,n))}}function v(){function e(){g.call(n,{value:parseFloat(o.value),origin:new K(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:U.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i*n._currentZoom,t.preventDefault(),f.call(n,o),e.call(n)}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.0001",o.value=1,o.style.display=n.options.showZoomer?"":"none",n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function g(e){function t(){var e={};e[P]=i.toString(),e[N]=a.toString(),o(n.elements.preview,e)}var n=this,i=e?e.transform:U.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new K(n.elements.preview);if(n._currentZoom=e?e.value:n._currentZoom,i.scale=n._currentZoom,t(),n.options.enforceBoundary){var l=w.call(n,r),s=l.translate,u=l.origin;i.x>=s.maxX&&(a.x=u.minX,i.x=s.maxX),i.x<=s.minX&&(a.x=u.maxX,i.x=s.minX),i.y>=s.maxY&&(a.y=u.minY,i.y=s.maxY),i.y<=s.minY&&(a.y=u.maxY,i.y=s.minY)}t(),$.call(n),C.call(n)}function w(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.elements.boundary.clientWidth/2,a=t.elements.boundary.clientHeight/2,l=t.elements.preview.getBoundingClientRect(),s=l.width,u=l.height,c=i/2,h=o/2,p=-1*(c/n-r),d=-1*(h/n-a),m=1/n*c,f=1/n*h;return{translate:{maxX:p,minX:p-(s*(1/n)-i*(1/n)),maxY:d,minY:d-(u*(1/n)-o*(1/n))},origin:{maxX:s*(1/n)-m,minX:m,maxY:u*(1/n)-f,minY:f}}}function y(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=U.parse(e.elements.preview.style[P]),a=new K(e.elements.preview),l=i.top-n.top+i.height/2,s=i.left-n.left+i.width/2,u={},c={};u.y=l/t,u.x=s/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[N]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function b(){function e(e,t){var n=p.elements.preview.getBoundingClientRect(),i=h.y+t,o=h.x+e;p.options.enforceBoundary?(c.top>n.top+t&&c.bottomn.left+e&&c.right1){var v=t.touches[0],g=t.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));u||(u=w/p._currentZoom);var y=w/u;return f.call(p,y),void i(p.elements.zoomer)}e(c,d),m[P]=h.toString(),o(p.elements.preview,m),x.call(p),s=r,l=n}function a(){d=!1,window.removeEventListener("mousemove",r),window.removeEventListener("touchmove",r),window.removeEventListener("mouseup",a),window.removeEventListener("touchend",a),document.body.style[A]="",y.call(p),C.call(p),u=0}var l,s,u,c,h,p=this,d=!1;p.elements.overlay.addEventListener("mousedown",n),p.elements.viewport.addEventListener("keydown",function(e){var n=37,i=38,o=39,r=40;if(!e.shiftKey||e.keyCode!=i&&e.keyCode!=r){if(p.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var a=function(t){switch(e.keyCode){case n:return[1,0];case i:return[0,1];case o:return[-1,0];case r:return[0,-1]}}();h=U.parse(p.elements.preview),document.body.style[A]="none",c=p.elements.viewport.getBoundingClientRect(),t(a)}}else{var l=0;l=e.keyCode==i?parseFloat(p.elements.zoomer.value,10)+parseFloat(p.elements.zoomer.step,10):parseFloat(p.elements.zoomer.value,10)-parseFloat(p.elements.zoomer.step,10),p.setZoom(l)}}),p.elements.overlay.addEventListener("touchstart",n)}function x(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function C(){var e=this,t=e.get();if(E.call(e))if(e.options.update.call(e,t),e.$&&"undefined"==typeof Prototype)e.$(e.element).trigger("update",t);else{var n;window.CustomEvent?n=new CustomEvent("update",{detail:t}):(n=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),e.element.dispatchEvent(n)}}function E(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function _(){var e=this,t={},n=e.elements.preview,i=e.elements.preview.getBoundingClientRect(),r=new U(0,0,1),a=new K;E.call(e)&&!e.data.bound&&(e.data.bound=!0,t[P]=r.toString(),t[N]=a.toString(),t.opacity=1,o(n,t),e._originalImageWidth=i.width,e._originalImageHeight=i.height,e.options.enableZoom?R.call(e,!0):e._currentZoom=1,r.scale=e._currentZoom,t[P]=r.toString(),o(n,t),e.data.points.length?L.call(e,e.data.points):B.call(e),y.call(e),x.call(e))}function R(e){var t,n,o,r,a=this,l=0,s=1.5,u=a.elements.zoomer,c=parseFloat(u.value),h=a.elements.boundary.getBoundingClientRect(),p=a.elements.preview.getBoundingClientRect(),d=a.elements.viewport.getBoundingClientRect();a.options.enforceBoundary&&(o=d.width/(e?p.width:p.width/c),r=d.height/(e?p.height:p.height/c),l=Math.max(o,r)),l>=s&&(s=l+1),u.min=Y(l,4),u.max=Y(s,4),e&&(n=Math.max(h.width/p.width,h.height/p.height),t=null!==a.data.boundZoom?a.data.boundZoom:n,f.call(a,t)),i(u)}function L(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},l=i.width/n,s=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,p={};p[N]=u+"px "+s+"px",p[P]=new U(h,c,l).toString(),o(t.elements.preview,p),f.call(t,l),t._currentZoom=l}function B(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,l=r-(t.width-n.width)/2,s=a-(t.height-n.height)/2,u=new U(l,s,e._currentZoom);o(e.elements.preview,P,u.toString())}function I(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=d.call(t),e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r&&!e?h(n,i,l(c(i)||0,10)):e&&h(n,i,e)}function M(e){var t=this,n=e.points,i=l(n[0]),o=l(n[1]),r=l(n[2]),a=l(n[3]),s=r-i,u=a-o,c=e.circle,h=document.createElement("canvas"),p=h.getContext("2d"),d=s,m=u,f=0,v=0,g=d,w=m,y=e.outputWidth&&e.outputHeight,b=1;return outputHeightRatio=1,y&&(g=e.outputWidth,w=e.outputHeight,b=g/d,outputHeightRatio=w/outWHeight),h.width=g,h.height=w,e.backgroundColor&&(p.fillStyle=e.backgroundColor,p.fillRect(0,0,d,m)),t.options.enforceBoundary||(i<0&&(f=Math.abs(i),i=0),o<0&&(v=Math.abs(o),o=0),r>t._originalImageWidth&&(d=s=t._originalImageWidth-i),a>t._originalImageHeight&&(m=u=t._originalImageHeight-o)),1===b&&1===outputHeightRatio||(f*=b,v*=outputHeightRatio,d*=b,m*=outputHeightRatio),p.drawImage(this.elements.preview,i,o,Math.min(s,t._originalImageWidth),Math.min(u,t._originalImageHeight),f,v,d,m),c&&(p.fillStyle="#fff",p.globalCompositeOperation="destination-in",p.beginPath(),p.arc(d/2,m/2,d/2,0,2*Math.PI,!0),p.closePath(),p.fill()),h}function H(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],l=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:l+"px"}),n}function Z(e){return M.call(this,e).toDataURL(e.format,e.quality)}function z(e){var t=this;return new Promise(function(n,i){M.call(t,e).toBlob(function(e){n(e)},e.format,e.quality)})}function W(e,t){var n,i=this,o=[],r=null,a=d.call(i);if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if(void 0===e&&i.data.url)return _.call(i),C.call(i),null;n=e.url,o=e.points||[],r=void 0===e.zoom?null:e.zoom}return i.data.bound=!1,i.data.url=n||i.data.url,i.data.boundZoom=r,s(n,i.elements.img,a).then(function(n){if(o.length)i.options.relative&&(o=[o[0]*n.naturalWidth/100,o[1]*n.naturalHeight/100,o[2]*n.naturalWidth/100,o[3]*n.naturalHeight/100]);else{var r,a,l=u(n),s=i.elements.viewport.getBoundingClientRect(),c=s.width/s.height;l.width/l.height>c?r=(a=l.height)*c:a=(r=l.width)/c;var h=(l.width-r)/2,p=(l.height-a)/2,d=h+r,m=p+a;i.data.points=[h,p,d,m]}i.data.points=o.map(function(e){return parseFloat(e)}),i.options.useCanvas&&I.call(i,e.orientation||1),_.call(i),C.call(i),t&&t()})}function Y(e,t){return parseFloat(e).toFixed(t||0)}function X(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=(n.width-e.elements.viewport.offsetWidth)/2,a=(n.height-e.elements.viewport.offsetHeight)/2,l=i+e.elements.viewport.offsetWidth+r,s=o+e.elements.viewport.offsetHeight+a,u=e._currentZoom;(u===1/0||isNaN(u))&&(u=1);var c=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(c,i/u),o=Math.max(c,o/u),l=Math.max(c,l/u),s=Math.max(c,s/u),{points:[Y(i),Y(o),Y(l),Y(s)],zoom:u}}function F(e){var t=this,i=X.call(t),o=n(Q,n({},e)),r="string"==typeof e?e:o.type||"base64",a=o.size||"viewport",l=o.format,s=o.quality,u=o.backgroundColor,c="boolean"==typeof o.circle?o.circle:"circle"===t.options.viewport.type,h=t.elements.viewport.getBoundingClientRect(),p=h.width/h.height;return"viewport"===a?(i.outputWidth=h.width,i.outputHeight=h.height):"object"==typeof a&&(a.width&&a.height?(i.outputWidth=a.width,i.outputHeight=a.height):a.width?(i.outputWidth=a.width,i.outputHeight=a.width/p):a.height&&(i.outputWidth=a.height*p,i.outputHeight=a.height)),G.indexOf(l)>-1&&(i.format="image/"+l,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e,n){switch(r.toLowerCase()){case"rawcanvas":e(M.call(t,i));break;case"canvas":case"base64":e(Z.call(t,i));break;case"blob":z.call(t,i).then(e);break;default:e(H.call(t,i))}})}function k(){_.call(this)}function j(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=document.createElement("canvas"),o=1;i.width=n.width,i.height=n.height,i.getContext("2d").drawImage(n,0,0),90!==e&&-270!==e||(o=6),-90!==e&&270!==e||(o=8),180!==e&&-180!==e||(o=3),h(n,i,o),g.call(t),i=null}function S(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function O(e,t){if(this.element=e,this.options=n(n({},O.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;r(i,"cr-original-image");var o=document.createElement("div");this.element.parentNode.appendChild(o),o.appendChild(i),this.element=o,this.options.url=this.options.url||i.src}if(p.call(this),this.options.url){var a={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,W.call(this,a)}}"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null!==n){var i;try{i=n(t._value)}catch(t){return void e.reject(t)}e.resolve(i)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void s(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function l(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function s(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(e){if(i)return;i=!0,n(e)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype.catch=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new l(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var l=a.then;if("function"==typeof l)return void l.call(a,function(e){i(r,e)},n)}e[r]=a,0==--o&&t(e)}catch(e){n(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;ri;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,n){for(var i=atob(this.toDataURL(t,n).split(",")[1]),o=i.length,r=new Uint8Array(o),a=0;a-1||e.indexOf("none")>-1?U.fromMatrix(e):U.fromString(e)},U.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new U(l(t[4]),l(t[5]),parseFloat(t[0]))},U.fromString=function(e){var t=e.split(") "),n=t[0].substring(O.globals.translate.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new U(o,r,i)},U.prototype.toString=function(){var e=q[O.globals.translate].suffix||"";return O.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var K=function(e){if(!e||!e.style[N])return this.x=0,void(this.y=0);var t=e.style[N].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};K.prototype.toString=function(){return this.x+"px "+this.y+"px"};var $=function(e,t,n){var i;return function(){var o=this,r=arguments,a=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||e.apply(o,r)},t),a&&e.apply(o,r)}}(x,500),Q={type:"canvas",format:"png",quality:1},G=["jpeg","webp","png"];if(window.jQuery){var J=window.jQuery;J.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),n=J(this).data("croppie");return"get"===e?n.get():"result"===e?n.result.apply(n,t):"bind"===e?n.bind.apply(n,t):this.each(function(){var n=J(this).data("croppie");if(n){var i=n[e];if(!J.isFunction(i))throw"Croppie "+e+" method not found";i.apply(n,t),"destroy"===e&&J(this).removeData("croppie")}})}return this.each(function(){var t=new O(this,e);t.$=J,J(this).data("croppie",t)})}}O.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},O.globals={translate:"translate3d"},n(O.prototype,{bind:function(e,t){return W.call(this,e,t)},get:function(){var e=X.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return F.call(this,e)},refresh:function(){return k.call(this)},setZoom:function(e){f.call(this,e),i(this.elements.zoomer)},rotate:function(e){j.call(this,e)},destroy:function(){return S.call(this)}}),e.Croppie=window.Croppie=O,"object"==typeof module&&module.exports&&(module.exports=O)}); +(function(root,factory){if(typeof define==="function"&&define.amd){define(["exports"],factory)}else if(typeof exports==="object"&&typeof exports.nodeName!=="string"){factory(exports)}else{factory(root.commonJsStrict={})}})(this,function(exports){if(typeof Promise!=="function"){!function(a){function b(a,b){return function(){a.apply(b,arguments)}}function c(a){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof a)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],i(a,b(e,this),b(f,this))}function d(a){var b=this;return null===this._state?void this._deferreds.push(a):void k(function(){var c=b._state?a.onFulfilled:a.onRejected;if(null===c)return void(b._state?a.resolve:a.reject)(b._value);var d;try{d=c(b._value)}catch(e){return void a.reject(e)}a.resolve(d)})}function e(a){try{if(a===this)throw new TypeError("A promise cannot be resolved with itself.");if(a&&("object"==typeof a||"function"==typeof a)){var c=a.then;if("function"==typeof c)return void i(b(c,a),b(e,this),b(f,this))}this._state=!0,this._value=a,g.call(this)}catch(d){f.call(this,d)}}function f(a){this._state=!1,this._value=a,g.call(this)}function g(){for(var a=0,b=this._deferreds.length;b>a;a++)d.call(this,this._deferreds[a]);this._deferreds=null}function h(a,b,c,d){this.onFulfilled="function"==typeof a?a:null,this.onRejected="function"==typeof b?b:null,this.resolve=c,this.reject=d}function i(a,b,c){var d=!1;try{a(function(a){d||(d=!0,b(a))},function(a){d||(d=!0,c(a))})}catch(e){if(d)return;d=!0,c(e)}}var j=setTimeout,k="function"==typeof setImmediate&&setImmediate||function(a){j(a,1)},l=Array.isArray||function(a){return"[object Array]"===Object.prototype.toString.call(a)};c.prototype["catch"]=function(a){return this.then(null,a)},c.prototype.then=function(a,b){var e=this;return new c(function(c,f){d.call(e,new h(a,b,c,f))})},c.all=function(){var a=Array.prototype.slice.call(1===arguments.length&&l(arguments[0])?arguments[0]:arguments);return new c(function(b,c){function d(f,g){try{if(g&&("object"==typeof g||"function"==typeof g)){var h=g.then;if("function"==typeof h)return void h.call(g,function(a){d(f,a)},c)}a[f]=g,0===--e&&b(a)}catch(i){c(i)}}if(0===a.length)return b([]);for(var e=a.length,f=0;fd;d++)a[d].then(b,c)})},c._setImmediateFn=function(a){k=a},"undefined"!=typeof module&&module.exports?module.exports=c:a.Promise||(a.Promise=c)}(this)}if(typeof window.CustomEvent!=="function"){(function(){function CustomEvent(event,params){params=params||{bubbles:false,cancelable:false,detail:undefined};var evt=document.createEvent("CustomEvent");evt.initCustomEvent(event,params.bubbles,params.cancelable,params.detail);return evt}CustomEvent.prototype=window.Event.prototype;window.CustomEvent=CustomEvent})()}if(!HTMLCanvasElement.prototype.toBlob){Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(callback,type,quality){var binStr=atob(this.toDataURL(type,quality).split(",")[1]),len=binStr.length,arr=new Uint8Array(len);for(var i=0;i=5){var x=w;w=h;h=x}return{width:w,height:h}}var TRANSLATE_OPTS={translate3d:{suffix:", 0px"},translate:{suffix:""}};var Transform=function(x,y,scale){this.x=parseFloat(x);this.y=parseFloat(y);this.scale=parseFloat(scale)};Transform.parse=function(v){if(v.style){return Transform.parse(v.style[CSS_TRANSFORM])}else if(v.indexOf("matrix")>-1||v.indexOf("none")>-1){return Transform.fromMatrix(v)}else{return Transform.fromString(v)}};Transform.fromMatrix=function(v){var vals=v.substring(7).split(",");if(!vals.length||v==="none"){vals=[1,0,0,1,0,0]}return new Transform(num(vals[4]),num(vals[5]),parseFloat(vals[0]))};Transform.fromString=function(v){var values=v.split(") "),translate=values[0].substring(Croppie.globals.translate.length+1).split(","),scale=values.length>1?values[1].substring(6):1,x=translate.length>1?translate[0]:0,y=translate.length>1?translate[1]:0;return new Transform(x,y,scale)};Transform.prototype.toString=function(){var suffix=TRANSLATE_OPTS[Croppie.globals.translate].suffix||"";return Croppie.globals.translate+"("+this.x+"px, "+this.y+"px"+suffix+") scale("+this.scale+")"};var TransformOrigin=function(el){if(!el||!el.style[CSS_TRANS_ORG]){this.x=0;this.y=0;return}var css=el.style[CSS_TRANS_ORG].split(" ");this.x=parseFloat(css[0]);this.y=parseFloat(css[1])};TransformOrigin.prototype.toString=function(){return this.x+"px "+this.y+"px"};function getExifOrientation(img){return img.exifdata.Orientation}function drawCanvas(canvas,img,orientation){var width=img.width,height=img.height,ctx=canvas.getContext("2d");canvas.width=img.width;canvas.height=img.height;ctx.save();switch(orientation){case 2:ctx.translate(width,0);ctx.scale(-1,1);break;case 3:ctx.translate(width,height);ctx.rotate(180*Math.PI/180);break;case 4:ctx.translate(0,height);ctx.scale(1,-1);break;case 5:canvas.width=height;canvas.height=width;ctx.rotate(90*Math.PI/180);ctx.scale(1,-1);break;case 6:canvas.width=height;canvas.height=width;ctx.rotate(90*Math.PI/180);ctx.translate(0,-height);break;case 7:canvas.width=height;canvas.height=width;ctx.rotate(-90*Math.PI/180);ctx.translate(-width,height);ctx.scale(1,-1);break;case 8:canvas.width=height;canvas.height=width;ctx.translate(0,width);ctx.rotate(-90*Math.PI/180);break}ctx.drawImage(img,0,0,width,height);ctx.restore()}function _create(){var self=this,contClass="croppie-container",customViewportClass=self.options.viewport.type?"cr-vp-"+self.options.viewport.type:null,boundary,img,viewport,overlay,bw,bh;self.options.useCanvas=self.options.enableOrientation||_hasExif.call(self);self.data={};self.elements={};boundary=self.elements.boundary=document.createElement("div");viewport=self.elements.viewport=document.createElement("div");img=self.elements.img=document.createElement("img");overlay=self.elements.overlay=document.createElement("div");if(self.options.useCanvas){self.elements.canvas=document.createElement("canvas");self.elements.preview=self.elements.canvas}else{self.elements.preview=self.elements.img}addClass(boundary,"cr-boundary");boundary.setAttribute("aria-dropeffect","none");bw=self.options.boundary.width;bh=self.options.boundary.height;css(boundary,{width:bw+(isNaN(bw)?"":"px"),height:bh+(isNaN(bh)?"":"px")});addClass(viewport,"cr-viewport");if(customViewportClass){addClass(viewport,customViewportClass)}css(viewport,{width:self.options.viewport.width+"px",height:self.options.viewport.height+"px"});viewport.setAttribute("tabindex",0);addClass(self.elements.preview,"cr-image");setAttributes(self.elements.preview,{alt:"preview","aria-grabbed":"false"});addClass(overlay,"cr-overlay");self.element.appendChild(boundary);boundary.appendChild(self.elements.preview);boundary.appendChild(viewport);boundary.appendChild(overlay);addClass(self.element,contClass);if(self.options.customClass){addClass(self.element,self.options.customClass)}_initDraggable.call(this);if(self.options.enableZoom){_initializeZoom.call(self)}if(self.options.enableResize){_initializeResize.call(self)}}function _hasExif(){return this.options.enableExif&&window.EXIF}function _initializeResize(){var self=this;var wrap=document.createElement("div");var isDragging=false;var direction;var originalX;var originalY;var minSize=50;var maxWidth;var maxHeight;var vr;var hr;addClass(wrap,"cr-resizer");css(wrap,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"});if(this.options.resizeControls.height){vr=document.createElement("div");addClass(vr,"cr-resizer-vertical");wrap.appendChild(vr)}if(this.options.resizeControls.width){hr=document.createElement("div");addClass(hr,"cr-resizer-horisontal");wrap.appendChild(hr)}function mouseDown(ev){if(ev.button!==undefined&&ev.button!==0)return;ev.preventDefault();if(isDragging){return}var overlayRect=self.elements.overlay.getBoundingClientRect();isDragging=true;originalX=ev.pageX;originalY=ev.pageY;direction=ev.currentTarget.className.indexOf("vertical")!==-1?"v":"h";maxWidth=overlayRect.width;maxHeight=overlayRect.height;if(ev.touches){var touches=ev.touches[0];originalX=touches.pageX;originalY=touches.pageY}window.addEventListener("mousemove",mouseMove);window.addEventListener("touchmove",mouseMove);window.addEventListener("mouseup",mouseUp);window.addEventListener("touchend",mouseUp);document.body.style[CSS_USERSELECT]="none"}function mouseMove(ev){var pageX=ev.pageX;var pageY=ev.pageY;ev.preventDefault();if(ev.touches){var touches=ev.touches[0];pageX=touches.pageX;pageY=touches.pageY}var deltaX=pageX-originalX;var deltaY=pageY-originalY;var newHeight=self.options.viewport.height+deltaY;var newWidth=self.options.viewport.width+deltaX;if(direction==="v"&&newHeight>=minSize&&newHeight<=maxHeight){css(wrap,{height:newHeight+"px"});self.options.boundary.height+=deltaY;css(self.elements.boundary,{height:self.options.boundary.height+"px"});self.options.viewport.height+=deltaY;css(self.elements.viewport,{height:self.options.viewport.height+"px"})}else if(direction==="h"&&newWidth>=minSize&&newWidth<=maxWidth){css(wrap,{width:newWidth+"px"});self.options.boundary.width+=deltaX;css(self.elements.boundary,{width:self.options.boundary.width+"px"});self.options.viewport.width+=deltaX;css(self.elements.viewport,{width:self.options.viewport.width+"px"})}_updateOverlay.call(self);_updateZoomLimits.call(self);_updateCenterPoint.call(self);_triggerUpdate.call(self);originalY=pageY;originalX=pageX}function mouseUp(){isDragging=false;window.removeEventListener("mousemove",mouseMove);window.removeEventListener("touchmove",mouseMove);window.removeEventListener("mouseup",mouseUp);window.removeEventListener("touchend",mouseUp);document.body.style[CSS_USERSELECT]=""}if(vr){vr.addEventListener("mousedown",mouseDown)}if(hr){hr.addEventListener("mousedown",mouseDown)}this.elements.boundary.appendChild(wrap)}function _setZoomerVal(v){if(this.options.enableZoom){var z=this.elements.zoomer,val=fix(v,4);z.value=Math.max(z.min,Math.min(z.max,val))}}function _initializeZoom(){var self=this,wrap=self.elements.zoomerWrap=document.createElement("div"),zoomer=self.elements.zoomer=document.createElement("input");addClass(wrap,"cr-slider-wrap");addClass(zoomer,"cr-slider");zoomer.type="range";zoomer.step="0.0001";zoomer.value=1;zoomer.style.display=self.options.showZoomer?"":"none";zoomer.setAttribute("aria-label","zoom");self.element.appendChild(wrap);wrap.appendChild(zoomer);self._currentZoom=1;function change(){_onZoom.call(self,{value:parseFloat(zoomer.value),origin:new TransformOrigin(self.elements.preview),viewportRect:self.elements.viewport.getBoundingClientRect(),transform:Transform.parse(self.elements.preview)})}function scroll(ev){var delta,targetZoom;if(self.options.mouseWheelZoom==="ctrl"&&ev.ctrlKey!=true){return 0}else if(ev.wheelDelta){delta=ev.wheelDelta/1200}else if(ev.deltaY){delta=ev.deltaY/1060}else if(ev.detail){delta=ev.detail/-60}else{delta=0}targetZoom=self._currentZoom+delta*self._currentZoom;ev.preventDefault();_setZoomerVal.call(self,targetZoom);change.call(self)}self.elements.zoomer.addEventListener("input",change);self.elements.zoomer.addEventListener("change",change);if(self.options.mouseWheelZoom){self.elements.boundary.addEventListener("mousewheel",scroll);self.elements.boundary.addEventListener("DOMMouseScroll",scroll)}}function _onZoom(ui){var self=this,transform=ui?ui.transform:Transform.parse(self.elements.preview),vpRect=ui?ui.viewportRect:self.elements.viewport.getBoundingClientRect(),origin=ui?ui.origin:new TransformOrigin(self.elements.preview);function applyCss(){var transCss={};transCss[CSS_TRANSFORM]=transform.toString();transCss[CSS_TRANS_ORG]=origin.toString();css(self.elements.preview,transCss)}self._currentZoom=ui?ui.value:self._currentZoom;transform.scale=self._currentZoom;self.elements.zoomer.setAttribute("aria-valuenow",self._currentZoom);applyCss();if(self.options.enforceBoundary){var boundaries=_getVirtualBoundaries.call(self,vpRect),transBoundaries=boundaries.translate,oBoundaries=boundaries.origin;if(transform.x>=transBoundaries.maxX){origin.x=oBoundaries.minX;transform.x=transBoundaries.maxX}if(transform.x<=transBoundaries.minX){origin.x=oBoundaries.maxX;transform.x=transBoundaries.minX}if(transform.y>=transBoundaries.maxY){origin.y=oBoundaries.minY;transform.y=transBoundaries.maxY}if(transform.y<=transBoundaries.minY){origin.y=oBoundaries.maxY;transform.y=transBoundaries.minY}}applyCss();_debouncedOverlay.call(self);_triggerUpdate.call(self)}function _getVirtualBoundaries(viewport){var self=this,scale=self._currentZoom,vpWidth=viewport.width,vpHeight=viewport.height,centerFromBoundaryX=self.elements.boundary.clientWidth/2,centerFromBoundaryY=self.elements.boundary.clientHeight/2,imgRect=self.elements.preview.getBoundingClientRect(),curImgWidth=imgRect.width,curImgHeight=imgRect.height,halfWidth=vpWidth/2,halfHeight=vpHeight/2;var maxX=(halfWidth/scale-centerFromBoundaryX)*-1;var minX=maxX-(curImgWidth*(1/scale)-vpWidth*(1/scale));var maxY=(halfHeight/scale-centerFromBoundaryY)*-1;var minY=maxY-(curImgHeight*(1/scale)-vpHeight*(1/scale));var originMinX=1/scale*halfWidth;var originMaxX=curImgWidth*(1/scale)-originMinX;var originMinY=1/scale*halfHeight;var originMaxY=curImgHeight*(1/scale)-originMinY;return{translate:{maxX:maxX,minX:minX,maxY:maxY,minY:minY},origin:{maxX:originMaxX,minX:originMinX,maxY:originMaxY,minY:originMinY}}}function _updateCenterPoint(){var self=this,scale=self._currentZoom,data=self.elements.preview.getBoundingClientRect(),vpData=self.elements.viewport.getBoundingClientRect(),transform=Transform.parse(self.elements.preview.style[CSS_TRANSFORM]),pc=new TransformOrigin(self.elements.preview),top=vpData.top-data.top+vpData.height/2,left=vpData.left-data.left+vpData.width/2,center={},adj={};center.y=top/scale;center.x=left/scale;adj.y=(center.y-pc.y)*(1-scale);adj.x=(center.x-pc.x)*(1-scale);transform.x-=adj.x;transform.y-=adj.y;var newCss={};newCss[CSS_TRANS_ORG]=center.x+"px "+center.y+"px";newCss[CSS_TRANSFORM]=transform.toString();css(self.elements.preview,newCss)}function _initDraggable(){var self=this,isDragging=false,originalX,originalY,originalDistance,vpRect,transform;function assignTransformCoordinates(deltaX,deltaY){var imgRect=self.elements.preview.getBoundingClientRect(),top=transform.y+deltaY,left=transform.x+deltaX;if(self.options.enforceBoundary){if(vpRect.top>imgRect.top+deltaY&&vpRect.bottomimgRect.left+deltaX&&vpRect.right=37&&ev.keyCode<=40)){ev.preventDefault();var movement=parseKeyDown(ev.keyCode);transform=Transform.parse(self.elements.preview);document.body.style[CSS_USERSELECT]="none";vpRect=self.elements.viewport.getBoundingClientRect();keyMove(movement)}function parseKeyDown(key){switch(key){case LEFT_ARROW:return[1,0];case UP_ARROW:return[0,1];case RIGHT_ARROW:return[-1,0];case DOWN_ARROW:return[0,-1]}}}function keyMove(movement){var deltaX=movement[0],deltaY=movement[1],newCss={};assignTransformCoordinates(deltaX,deltaY);newCss[CSS_TRANSFORM]=transform.toString();css(self.elements.preview,newCss);_updateOverlay.call(self);document.body.style[CSS_USERSELECT]="";_updateCenterPoint.call(self);_triggerUpdate.call(self);originalDistance=0}function mouseDown(ev){if(ev.button!==undefined&&ev.button!==0)return;ev.preventDefault();if(isDragging)return;isDragging=true;originalX=ev.pageX;originalY=ev.pageY;if(ev.touches){var touches=ev.touches[0];originalX=touches.pageX;originalY=touches.pageY}toggleGrabState(isDragging);transform=Transform.parse(self.elements.preview);window.addEventListener("mousemove",mouseMove);window.addEventListener("touchmove",mouseMove);window.addEventListener("mouseup",mouseUp);window.addEventListener("touchend",mouseUp);document.body.style[CSS_USERSELECT]="none";vpRect=self.elements.viewport.getBoundingClientRect()}function mouseMove(ev){ev.preventDefault();var pageX=ev.pageX,pageY=ev.pageY;if(ev.touches){var touches=ev.touches[0];pageX=touches.pageX;pageY=touches.pageY}var deltaX=pageX-originalX,deltaY=pageY-originalY,newCss={};if(ev.type=="touchmove"){if(ev.touches.length>1){var touch1=ev.touches[0];var touch2=ev.touches[1];var dist=Math.sqrt((touch1.pageX-touch2.pageX)*(touch1.pageX-touch2.pageX)+(touch1.pageY-touch2.pageY)*(touch1.pageY-touch2.pageY));if(!originalDistance){originalDistance=dist/self._currentZoom}var scale=dist/originalDistance;_setZoomerVal.call(self,scale);dispatchChange(self.elements.zoomer);return}}assignTransformCoordinates(deltaX,deltaY);newCss[CSS_TRANSFORM]=transform.toString();css(self.elements.preview,newCss);_updateOverlay.call(self);originalY=pageY;originalX=pageX}function mouseUp(){isDragging=false;toggleGrabState(isDragging);window.removeEventListener("mousemove",mouseMove);window.removeEventListener("touchmove",mouseMove);window.removeEventListener("mouseup",mouseUp);window.removeEventListener("touchend",mouseUp);document.body.style[CSS_USERSELECT]="";_updateCenterPoint.call(self);_triggerUpdate.call(self);originalDistance=0}self.elements.overlay.addEventListener("mousedown",mouseDown);self.elements.viewport.addEventListener("keydown",keyDown);self.elements.overlay.addEventListener("touchstart",mouseDown)}function _updateOverlay(){var self=this,boundRect=self.elements.boundary.getBoundingClientRect(),imgData=self.elements.preview.getBoundingClientRect();css(self.elements.overlay,{width:imgData.width+"px",height:imgData.height+"px",top:imgData.top-boundRect.top+"px",left:imgData.left-boundRect.left+"px"})}var _debouncedOverlay=debounce(_updateOverlay,500);function _triggerUpdate(){var self=this,data=self.get(),ev;if(!_isVisible.call(self)){return}self.options.update.call(self,data);if(self.$&&typeof Prototype=="undefined"){self.$(self.element).trigger("update",data)}else{var ev;if(window.CustomEvent){ev=new CustomEvent("update",{detail:data})}else{ev=document.createEvent("CustomEvent");ev.initCustomEvent("update",true,true,data)}self.element.dispatchEvent(ev)}}function _isVisible(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function _updatePropertiesFromImage(){var self=this,initialZoom=1,cssReset={},img=self.elements.preview,imgData=null,transformReset=new Transform(0,0,initialZoom),originReset=new TransformOrigin,isVisible=_isVisible.call(self);if(!isVisible||self.data.bound){return}self.data.bound=true;cssReset[CSS_TRANSFORM]=transformReset.toString();cssReset[CSS_TRANS_ORG]=originReset.toString();cssReset["opacity"]=1;css(img,cssReset);imgData=self.elements.preview.getBoundingClientRect();self._originalImageWidth=imgData.width;self._originalImageHeight=imgData.height;if(self.options.enableZoom){_updateZoomLimits.call(self,true)}else{self._currentZoom=initialZoom}transformReset.scale=self._currentZoom;cssReset[CSS_TRANSFORM]=transformReset.toString();css(img,cssReset);if(self.data.points.length){_bindPoints.call(self,self.data.points)}else{_centerImage.call(self)}_updateCenterPoint.call(self);_updateOverlay.call(self)}function _updateZoomLimits(initial){var self=this,minZoom=0,maxZoom=1.5,initialZoom,defaultInitialZoom,zoomer=self.elements.zoomer,scale=parseFloat(zoomer.value),boundaryData=self.elements.boundary.getBoundingClientRect(),imgData=self.elements.preview.getBoundingClientRect(),vpData=self.elements.viewport.getBoundingClientRect(),minW,minH;if(self.options.enforceBoundary){minW=vpData.width/(initial?imgData.width:imgData.width/scale);minH=vpData.height/(initial?imgData.height:imgData.height/scale);minZoom=Math.max(minW,minH)}if(minZoom>=maxZoom){maxZoom=minZoom+1}zoomer.min=fix(minZoom,4);zoomer.max=fix(maxZoom,4);if(initial){defaultInitialZoom=Math.max(boundaryData.width/imgData.width,boundaryData.height/imgData.height);initialZoom=self.data.boundZoom!==null?self.data.boundZoom:defaultInitialZoom;_setZoomerVal.call(self,initialZoom)}dispatchChange(zoomer)}function _bindPoints(points){if(points.length!=4){throw"Croppie - Invalid number of points supplied: "+points}var self=this,pointsWidth=points[2]-points[0],vpData=self.elements.viewport.getBoundingClientRect(),boundRect=self.elements.boundary.getBoundingClientRect(),vpOffset={left:vpData.left-boundRect.left,top:vpData.top-boundRect.top},scale=vpData.width/pointsWidth,originTop=points[1],originLeft=points[0],transformTop=-1*points[1]+vpOffset.top,transformLeft=-1*points[0]+vpOffset.left,newCss={};newCss[CSS_TRANS_ORG]=originLeft+"px "+originTop+"px";newCss[CSS_TRANSFORM]=new Transform(transformLeft,transformTop,scale).toString();css(self.elements.preview,newCss);_setZoomerVal.call(self,scale);self._currentZoom=scale}function _centerImage(){var self=this,imgDim=self.elements.preview.getBoundingClientRect(),vpDim=self.elements.viewport.getBoundingClientRect(),boundDim=self.elements.boundary.getBoundingClientRect(),vpLeft=vpDim.left-boundDim.left,vpTop=vpDim.top-boundDim.top,w=vpLeft-(imgDim.width-vpDim.width)/2,h=vpTop-(imgDim.height-vpDim.height)/2,transform=new Transform(w,h,self._currentZoom);css(self.elements.preview,CSS_TRANSFORM,transform.toString())}function _transferImageToCanvas(customOrientation){var self=this,canvas=self.elements.canvas,img=self.elements.img,ctx=canvas.getContext("2d"),exif=_hasExif.call(self),customOrientation=self.options.enableOrientation&&customOrientation;ctx.clearRect(0,0,canvas.width,canvas.height);canvas.width=img.width;canvas.height=img.height;if(exif&&!customOrientation){var orientation=getExifOrientation(img);drawCanvas(canvas,img,num(orientation||0,10))}else if(customOrientation){drawCanvas(canvas,img,customOrientation)}}function _getCanvas(data){var self=this,points=data.points,left=num(points[0]),top=num(points[1]),right=num(points[2]),bottom=num(points[3]),width=right-left,height=bottom-top,circle=data.circle,canvas=document.createElement("canvas"),ctx=canvas.getContext("2d"),outWidth=width,outHeight=height,startX=0,startY=0,canvasWidth=outWidth,canvasHeight=outHeight,customDimensions=data.outputWidth&&data.outputHeight,outputWidthRatio=1;outputHeightRatio=1;if(customDimensions){canvasWidth=data.outputWidth;canvasHeight=data.outputHeight;outputWidthRatio=canvasWidth/outWidth;outputHeightRatio=canvasHeight/outHeight}canvas.width=canvasWidth;canvas.height=canvasHeight;if(data.backgroundColor){ctx.fillStyle=data.backgroundColor;ctx.fillRect(0,0,canvasWidth,canvasHeight)}if(!self.options.enforceBoundary){if(left<0){startX=Math.abs(left);left=0}if(top<0){startY=Math.abs(top);top=0}if(right>self._originalImageWidth){width=self._originalImageWidth-left;outWidth=width}if(bottom>self._originalImageHeight){height=self._originalImageHeight-top;outHeight=height}}else{width=Math.min(width,self._originalImageWidth);height=Math.min(height,self._originalImageHeight)}if(outputWidthRatio!==1||outputHeightRatio!==1){startX*=outputWidthRatio;startY*=outputHeightRatio;outWidth*=outputWidthRatio;outHeight*=outputHeightRatio}ctx.drawImage(this.elements.preview,left,top,width,height,startX,startY,outWidth,outHeight);if(circle){ctx.fillStyle="#fff";ctx.globalCompositeOperation="destination-in";ctx.beginPath();ctx.arc(outWidth/2,outHeight/2,outWidth/2,0,Math.PI*2,true);ctx.closePath();ctx.fill()}return canvas}function _getHtmlResult(data){var points=data.points,div=document.createElement("div"),img=document.createElement("img"),width=points[2]-points[0],height=points[3]-points[1];addClass(div,"croppie-result");div.appendChild(img);css(img,{left:-1*points[0]+"px",top:-1*points[1]+"px"});img.src=data.url;css(div,{width:width+"px",height:height+"px"});return div}function _getBase64Result(data){return _getCanvas.call(this,data).toDataURL(data.format,data.quality)}function _getBlobResult(data){var self=this;return new Promise(function(resolve,reject){_getCanvas.call(self,data).toBlob(function(blob){resolve(blob)},data.format,data.quality)})}function _bind(options,cb){var self=this,url,points=[],zoom=null,hasExif=_hasExif.call(self);if(typeof options==="string"){url=options;options={}}else if(Array.isArray(options)){points=options.slice()}else if(typeof options=="undefined"&&self.data.url){_updatePropertiesFromImage.call(self);_triggerUpdate.call(self);return null}else{url=options.url;points=options.points||[];zoom=typeof options.zoom==="undefined"?null:options.zoom}self.data.bound=false;self.data.url=url||self.data.url;self.data.boundZoom=zoom;return loadImage(url,self.elements.img,hasExif).then(function(img){if(!points.length){var natDim=naturalImageDimensions(img);var rect=self.elements.viewport.getBoundingClientRect();var aspectRatio=rect.width/rect.height;var imgAspectRatio=natDim.width/natDim.height;var width,height;if(imgAspectRatio>aspectRatio){height=natDim.height;width=height*aspectRatio}else{width=natDim.width;height=width/aspectRatio}var x0=(natDim.width-width)/2;var y0=(natDim.height-height)/2;var x1=x0+width;var y1=y0+height;self.data.points=[x0,y0,x1,y1]}else if(self.options.relative){points=[points[0]*img.naturalWidth/100,points[1]*img.naturalHeight/100,points[2]*img.naturalWidth/100,points[3]*img.naturalHeight/100]}self.data.points=points.map(function(p){return parseFloat(p)});if(self.options.useCanvas){_transferImageToCanvas.call(self,options.orientation||1)}_updatePropertiesFromImage.call(self);_triggerUpdate.call(self);cb&&cb()})}function fix(v,decimalPoints){return parseFloat(v).toFixed(decimalPoints||0)}function _get(){var self=this,imgData=self.elements.preview.getBoundingClientRect(),vpData=self.elements.viewport.getBoundingClientRect(),x1=vpData.left-imgData.left,y1=vpData.top-imgData.top,widthDiff=(vpData.width-self.elements.viewport.offsetWidth)/2,heightDiff=(vpData.height-self.elements.viewport.offsetHeight)/2,x2=x1+self.elements.viewport.offsetWidth+widthDiff,y2=y1+self.elements.viewport.offsetHeight+heightDiff,scale=self._currentZoom;if(scale===Infinity||isNaN(scale)){scale=1}var max=self.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;x1=Math.max(max,x1/scale);y1=Math.max(max,y1/scale);x2=Math.max(max,x2/scale);y2=Math.max(max,y2/scale);return{points:[fix(x1),fix(y1),fix(x2),fix(y2)],zoom:scale}}var RESULT_DEFAULTS={type:"canvas",format:"png",quality:1},RESULT_FORMATS=["jpeg","webp","png"];function _result(options){var self=this,data=_get.call(self),opts=deepExtend(RESULT_DEFAULTS,deepExtend({},options)),resultType=typeof options==="string"?options:opts.type||"base64",size=opts.size||"viewport",format=opts.format,quality=opts.quality,backgroundColor=opts.backgroundColor,circle=typeof opts.circle==="boolean"?opts.circle:self.options.viewport.type==="circle",vpRect=self.elements.viewport.getBoundingClientRect(),ratio=vpRect.width/vpRect.height,prom;if(size==="viewport"){data.outputWidth=vpRect.width;data.outputHeight=vpRect.height}else if(typeof size==="object"){if(size.width&&size.height){data.outputWidth=size.width;data.outputHeight=size.height}else if(size.width){data.outputWidth=size.width;data.outputHeight=size.width/ratio}else if(size.height){data.outputWidth=size.height*ratio;data.outputHeight=size.height}}if(RESULT_FORMATS.indexOf(format)>-1){data.format="image/"+format;data.quality=quality}data.circle=circle;data.url=self.data.url;data.backgroundColor=backgroundColor;prom=new Promise(function(resolve,reject){switch(resultType.toLowerCase()){case"rawcanvas":resolve(_getCanvas.call(self,data));break;case"canvas":case"base64":resolve(_getBase64Result.call(self,data));break;case"blob":_getBlobResult.call(self,data).then(resolve);break;default:resolve(_getHtmlResult.call(self,data));break}});return prom}function _refresh(){_updatePropertiesFromImage.call(this)}function _rotate(deg){if(!this.options.useCanvas){throw"Croppie: Cannot rotate without enableOrientation"}var self=this,canvas=self.elements.canvas,copy=document.createElement("canvas"),ornt=1;copy.width=canvas.width;copy.height=canvas.height;var ctx=copy.getContext("2d");ctx.drawImage(canvas,0,0);if(deg===90||deg===-270)ornt=6;if(deg===-90||deg===270)ornt=8;if(deg===180||deg===-180)ornt=3;drawCanvas(canvas,copy,ornt);_onZoom.call(self);copy=null}function _destroy(){var self=this;self.element.removeChild(self.elements.boundary);removeClass(self.element,"croppie-container");if(self.options.enableZoom){self.element.removeChild(self.elements.zoomerWrap)}delete self.elements}if(window.jQuery){var $=window.jQuery;$.fn.croppie=function(opts){var ot=typeof opts;if(ot==="string"){var args=Array.prototype.slice.call(arguments,1);var singleInst=$(this).data("croppie");if(opts==="get"){return singleInst.get()}else if(opts==="result"){return singleInst.result.apply(singleInst,args)}else if(opts==="bind"){return singleInst.bind.apply(singleInst,args)}return this.each(function(){var i=$(this).data("croppie");if(!i)return;var method=i[opts]; +if($.isFunction(method)){method.apply(i,args);if(opts==="destroy"){$(this).removeData("croppie")}}else{throw"Croppie "+opts+" method not found"}})}else{return this.each(function(){var i=new Croppie(this,opts);i.$=$;$(this).data("croppie",i)})}}}function Croppie(element,opts){this.element=element;this.options=deepExtend(deepExtend({},Croppie.defaults),opts);if(this.element.tagName.toLowerCase()==="img"){var origImage=this.element;addClass(origImage,"cr-original-image");setAttributes(origImage,{"aria-hidden":"true",alt:""});var replacementDiv=document.createElement("div");this.element.parentNode.appendChild(replacementDiv);replacementDiv.appendChild(origImage);this.element=replacementDiv;this.options.url=this.options.url||origImage.src}_create.call(this);if(this.options.url){var bindOpts={url:this.options.url,points:this.options.points};delete this.options["url"];delete this.options["points"];_bind.call(this,bindOpts)}}Croppie.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:true,leftClass:"",rightClass:""},resizeControls:{width:true,height:true},customClass:"",showZoomer:true,enableZoom:true,enableResize:false,mouseWheelZoom:true,enableExif:false,enforceBoundary:true,enableOrientation:false,enableKeyMovement:true,update:function(){}};Croppie.globals={translate:"translate3d"};deepExtend(Croppie.prototype,{bind:function(options,cb){return _bind.call(this,options,cb)},get:function(){var data=_get.call(this);var points=data.points;if(this.options.relative){points[0]/=this.elements.img.naturalWidth/100;points[1]/=this.elements.img.naturalHeight/100;points[2]/=this.elements.img.naturalWidth/100;points[3]/=this.elements.img.naturalHeight/100}return data},result:function(type){return _result.call(this,type)},refresh:function(){return _refresh.call(this)},setZoom:function(v){_setZoomerVal.call(this,v);dispatchChange(this.elements.zoomer)},rotate:function(deg){_rotate.call(this,deg)},destroy:function(){return _destroy.call(this)}});exports.Croppie=window.Croppie=Croppie;if(typeof module==="object"&&!!module.exports){module.exports=Croppie}}); \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js index f3eb2e28..971c4a46 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -140,7 +140,8 @@ var Demo = (function() { boundary: { width: 300, height: 300 }, showZoomer: false, enableResize: true, - enableOrientation: true + enableOrientation: true, + mouseWheelZoom: 'ctrl' }); resize.bind({ url: 'demo/demo-2.jpg', diff --git a/index.html b/index.html index 5383fb21..540efe5d 100644 --- a/index.html +++ b/index.html @@ -140,8 +140,8 @@

      Options

      Defaulttrue
    • - mouseWheelZoomboolean -

      Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance

      + mouseWheelZoomobject +

      Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. If 'ctrl' is passed mouse wheel will only work while control keyboard is pressed

      Defaulttrue
    • @@ -370,7 +370,8 @@

      Demos

      boundary: { width: 300, height: 300 }, showZoomer: false, enableResize: true, - enableOrientation: true + enableOrientation: true, + mouseWheelZoom: 'ctrl' }); resize.bind({ url: 'demo/demo-2.jpg', From 66d873eadf49abc1544b3a5d168692ba748b0bb0 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 8 Jan 2018 15:06:22 -0600 Subject: [PATCH 19/68] some exif/rotation changes --- croppie.js | 97 ++++++++++++++++++++++++++-------------------------- demo/demo.js | 7 ++-- 2 files changed, 53 insertions(+), 51 deletions(-) diff --git a/croppie.js b/croppie.js index 032fe584..9594cba9 100755 --- a/croppie.js +++ b/croppie.js @@ -55,6 +55,8 @@ var cssPrefixes = ['Webkit', 'Moz', 'ms'], emptyStyles = document.createElement('div').style, + EXIF_NORM = [1,8,3,6], + EXIF_FLIP = [2,7,4,5], CSS_TRANS_ORG, CSS_TRANSFORM, CSS_USERSELECT; @@ -79,6 +81,14 @@ CSS_TRANS_ORG = vendorPrefix('transformOrigin'); CSS_USERSELECT = vendorPrefix('userSelect'); + function getExifOffset(ornt, rotate) { + var arr = EXIF_NORM.indexOf(ornt) > -1 ? EXIF_NORM : EXIF_FLIP, + index = arr.indexOf(ornt), + offset = (rotate / 90) % arr.length;// 180 = 2%4 = 2 shift exif by 2 indexes + + return arr[(arr.length + index + (offset % arr.length)) % arr.length]; + } + // Credits to : Andrew Dupont - http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ function deepExtend(destination, source) { destination = destination || {}; @@ -93,6 +103,10 @@ return destination; } + function clone(object) { + return deepExtend({}, object); + } + function debounce(func, wait, immediate) { var timeout; return function () { @@ -161,27 +175,23 @@ } /* Utilities */ - function loadImage(src, imageEl, doExif) { - var img = imageEl || new Image(); + function loadImage(src, doExif) { + var img = new Image(); img.style.opacity = 0; return new Promise(function (resolve) { function _resolve() { - setTimeout(function(){ + img.style.opacity = 1; + setTimeout(function () { resolve(img); }, 1); } - if (img.src === src) {// If image source hasn't changed resolve immediately - _resolve(); - return; - } - - img.exifdata = null; img.removeAttribute('crossOrigin'); if (src.match(/^https?:\/\/|^\/\//)) { img.setAttribute('crossOrigin', 'anonymous'); } + img.onload = function () { if (doExif) { EXIF.getData(img, function () { @@ -196,10 +206,11 @@ }); } - function naturalImageDimensions(img) { + function naturalImageDimensions(img, ornt) { var w = img.naturalWidth; var h = img.naturalHeight; - if (img.exifdata && img.exifdata.Orientation >= 5) { + var orient = ornt || getExifOrientation(img); + if (orient && orient >= 5) { var x= w; w = h; h = x; @@ -274,7 +285,7 @@ }; function getExifOrientation (img) { - return img.exifdata.Orientation; + return img.exifdata ? img.exifdata.Orientation : 1; } function drawCanvas(canvas, img, orientation) { @@ -989,8 +1000,7 @@ originReset = new TransformOrigin(), isVisible = _isVisible.call(self); - if (!isVisible || self.data.bound) { - // if the croppie isn't visible or it doesn't need binding + if (!isVisible || self.data.bound) {// if the croppie isn't visible or it doesn't need binding return; } @@ -1004,6 +1014,7 @@ self._originalImageWidth = imgData.width; self._originalImageHeight = imgData.height; + self.data.orientation = getExifOrientation(self.elements.img); if (self.options.enableZoom) { _updateZoomLimits.call(self, true); @@ -1036,14 +1047,13 @@ zoomer = self.elements.zoomer, scale = parseFloat(zoomer.value), boundaryData = self.elements.boundary.getBoundingClientRect(), - imgData = self.elements.preview.getBoundingClientRect(), + imgData = naturalImageDimensions(self.elements.img, self.data.orientation), vpData = self.elements.viewport.getBoundingClientRect(), minW, minH; - if (self.options.enforceBoundary) { - minW = vpData.width / (initial ? imgData.width : imgData.width / scale); - minH = vpData.height / (initial ? imgData.height : imgData.height / scale); + minW = vpData.width / imgData.width; + minH = vpData.height / imgData.height; minZoom = Math.max(minW, minH); } @@ -1053,7 +1063,7 @@ zoomer.min = fix(minZoom, 4); zoomer.max = fix(maxZoom, 4); - + if (!initial && (scale < zoomer.min || scale > zoomer.max)) { _setZoomerVal.call(self, scale < zoomer.min ? zoomer.min : zoomer.max); } @@ -1160,14 +1170,7 @@ width=Math.min(width, self._originalImageWidth); height=Math.min(height, self._originalImageHeight) - console.table({ - left: left, - right: right, - top: top, - bottom: bottom, - canvasWidth: canvasWidth, - canvasHeight: canvasHeight, - }) + console.table({ left, right, top, bottom, canvasWidth, canvasHeight }); ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight); if (circle) { ctx.fillStyle = '#fff'; @@ -1215,12 +1218,20 @@ }); } + function _replaceImage(img) { + if (this.elements.img.parentNode) { + this.elements.img.parentNode.replaceChild(img, this.elements.img); + this.elements.preview = img; // if the img is attached to the DOM, they're not using the canvas + } + this.elements.img = img; + } + function _bind(options, cb) { var self = this, url, points = [], zoom = null, - hasExif = _hasExif.call(self);; + hasExif = _hasExif.call(self); if (typeof (options) === 'string') { url = options; @@ -1244,7 +1255,8 @@ self.data.url = url || self.data.url; self.data.boundZoom = zoom; - return loadImage(url, self.elements.img, hasExif).then(function (img) { + return loadImage(url, hasExif).then(function (img) { + _replaceImage.call(self, img); if (!points.length) { var natDim = naturalImageDimensions(img); var rect = self.elements.viewport.getBoundingClientRect(); @@ -1258,14 +1270,13 @@ } else { width = natDim.width; - height = width / aspectRatio; + height = natDim.height / aspectRatio; } var x0 = (natDim.width - width) / 2; var y0 = (natDim.height - height) / 2; var x1 = x0 + width; var y1 = y0 + height; - self.data.points = [x0, y0, x1, y1]; } else if (self.options.relative) { @@ -1286,6 +1297,8 @@ _updatePropertiesFromImage.call(self); _triggerUpdate.call(self); cb && cb(); + }).catch(function (err) { + console.error("Croppie:" + err); }); } @@ -1332,7 +1345,7 @@ function _result(options) { var self = this, data = _get.call(self), - opts = deepExtend(RESULT_DEFAULTS, deepExtend({}, options)), + opts = deepExtend(clone(RESULT_DEFAULTS), clone(options)), resultType = (typeof (options) === 'string' ? options : (opts.type || 'base64')), size = opts.size || 'viewport', format = opts.format, @@ -1343,8 +1356,6 @@ ratio = vpRect.width / vpRect.height, prom; - console.log('result opts', opts); - if (size === 'viewport') { data.outputWidth = vpRect.width; data.outputHeight = vpRect.height; @@ -1402,20 +1413,10 @@ var self = this, canvas = self.elements.canvas, - copy = document.createElement('canvas'), - ornt = 1; + ornt; - copy.width = canvas.width; - copy.height = canvas.height; - var ctx = copy.getContext('2d'); - ctx.drawImage(canvas, 0, 0); - - if (deg === 90 || deg === -270) ornt = 6; - if (deg === -90 || deg === 270) ornt = 8; - if (deg === 180 || deg === -180) ornt = 3; - - self.data.orientation = ornt; - drawCanvas(canvas, copy, ornt); + self.data.orientation = getExifOffset(self.data.orientation, deg); + drawCanvas(canvas, self.elements.img, self.data.orientation); _updateZoomLimits.call(self); _onZoom.call(self); copy = null; @@ -1481,7 +1482,7 @@ throw new Error("Croppie: Can't initialize croppie more than once"); } this.element = element; - this.options = deepExtend(deepExtend({}, Croppie.defaults), opts); + this.options = deepExtend(clone(Croppie.defaults), opts); if (this.element.tagName.toLowerCase() === 'img') { var origImage = this.element; diff --git a/demo/demo.js b/demo/demo.js index a578b645..283934d2 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -55,8 +55,9 @@ var Demo = (function() { }); $('.js-main-image').on('click', function (ev) { mc.croppie('result', { - type: 'rawcanvas', - // size: { width: 300, height: 300 }, + type: 'rawcanvas', + circle: true, + // size: { width: 300, height: 300 }, format: 'png' }).then(function (canvas) { popupResult({ @@ -120,7 +121,7 @@ var Demo = (function() { zoom: 0 }); vEl.addEventListener('update', function (ev) { - console.log('vanilla update', ev); + // console.log('vanilla update', ev); }); document.querySelector('.vanilla-result').addEventListener('click', function (ev) { vanilla.result({ From a6a525d14ad38b6f96b26504abb2068266d706e3 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 9 Jan 2018 08:06:50 -0600 Subject: [PATCH 20/68] Create ISSUE_TEMPLATE.md --- .github/ISSUE_TEMPLATE.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE.md diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..af81ebae --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,21 @@ +## Expected Behavior + + +## Actual Behavior + + +## Steps to Reproduce the Problem + + 1. + 1. + 1. + +## Example Link +Please recreate your issue using [JSbin](https://www.jsbin.com), [JSFiddle](https://jsfiddle.net), or [Codepen](https://codepen.io). +* Link: + + +## Specifications + + - Browser: + - Version: From 540aaadbf5bcb614dfcebb5850fa44a2bdd9470f Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 9 Jan 2018 08:08:43 -0600 Subject: [PATCH 21/68] remove note about ie9 --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index f10ba6e7..a011a332 100644 --- a/index.html +++ b/index.html @@ -471,7 +471,6 @@

      Browser Support

    • iOS
    • Android
    -

    IE9 may be supported, but it isn't tested. If you're able to test it and let us know, please do so on Github.

    From 801795e299b2e9a4025a6fbe9c02ad047f3e019e Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 9 Jan 2018 08:20:11 -0600 Subject: [PATCH 22/68] #241 don't allow rotation without orientation included --- croppie.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index 9594cba9..4e45c096 100755 --- a/croppie.js +++ b/croppie.js @@ -1407,8 +1407,8 @@ } function _rotate(deg) { - if (!this.options.useCanvas) { - throw 'Croppie: Cannot rotate without enableOrientation'; + if (!this.options.useCanvas || !this.options.enableOrientation) { + throw 'Croppie: Cannot rotate without enableOrientation && EXIF.js included'; } var self = this, From 4bf2cda294d1950f5a24307bae434434e5bf0bce Mon Sep 17 00:00:00 2001 From: Jofferson Ramirez Tiquez Date: Tue, 9 Jan 2018 22:49:04 +0800 Subject: [PATCH 23/68] Updated README (#432) I added my vuejs croppie version too. :) --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ffa44e5b..b9710833 100755 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js * https://github.com/allenRoyston/ngCroppie * https://github.com/lpsBetty/angular-croppie * https://github.com/dima-kov/django-croppie +* https://github.com/jofftiquez/vue-croppie ## Contributing #### Static Server From fce102b5e23d57f185ae5d7198fa809f6b549cab Mon Sep 17 00:00:00 2001 From: Emanuele Conti Date: Tue, 9 Jan 2018 15:50:00 +0100 Subject: [PATCH 24/68] added a maxZoom option to enable larger zoom (#391) --- croppie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index ebcf83b1..774a0045 100755 --- a/croppie.js +++ b/croppie.js @@ -1029,7 +1029,7 @@ function _updateZoomLimits (initial) { var self = this, minZoom = 0, - maxZoom = 1.5, + maxZoom = self.options.maxZoom || 1.5, initialZoom, defaultInitialZoom, zoomer = self.elements.zoomer, From 37c6ac16bf40efe0159df2640e331a13ba5551b5 Mon Sep 17 00:00:00 2001 From: arthurcannon Date: Tue, 9 Jan 2018 06:58:14 -0800 Subject: [PATCH 25/68] Update croppie.js (#425) --- croppie.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/croppie.js b/croppie.js index 774a0045..caa07d98 100755 --- a/croppie.js +++ b/croppie.js @@ -570,10 +570,12 @@ if (vr) { vr.addEventListener('mousedown', mouseDown); + vr.addEventListener('touchstart', mouseDown); } if (hr) { hr.addEventListener('mousedown', mouseDown); + hr.addEventListener('touchstart', mouseDown); } this.elements.boundary.appendChild(wrap); From 7b09372b1679e7ad273f5f08dad538fa893c47fa Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 9 Jan 2018 14:22:20 -0600 Subject: [PATCH 26/68] comment and commit min file; --- croppie.js | 2 +- croppie.min.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/croppie.js b/croppie.js index 4e45c096..490b8ad1 100755 --- a/croppie.js +++ b/croppie.js @@ -1170,7 +1170,7 @@ width=Math.min(width, self._originalImageWidth); height=Math.min(height, self._originalImageHeight) - console.table({ left, right, top, bottom, canvasWidth, canvasHeight }); + // console.table({ left, right, top, bottom, canvasWidth, canvasHeight }); ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight); if (circle) { ctx.fillStyle = '#fff'; diff --git a/croppie.min.js b/croppie.min.js index de8717e1..11d085ce 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1,2 +1 @@ - -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("object"==typeof exports&&"string"!=typeof exports.nodeName?exports:e.commonJsStrict={})}(this,function(e){function t(e){if(e in T)return e;for(var t=e[0].toUpperCase()+e.slice(1),n=D.length;n--;)if((e=D[n]+t)in T)return e}function n(e,t){e=e||{};for(var i in t)t[i]&&t[i].constructor&&t[i].constructor===Object?(e[i]=e[i]||{},n(e[i],t[i])):e[i]=t[i];return e}function i(e){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent("change",!1,!0),e.dispatchEvent(t)}else e.fireEvent("onchange")}function o(e,t,n){if("string"==typeof t){var i=t;(t={})[i]=n}for(var o in t)e.style[o]=t[o]}function r(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function a(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(t,"")}function l(e){return parseInt(e,10)}function s(e,t,n){var i=t||new Image;return i.style.opacity=0,new Promise(function(t){function o(){setTimeout(function(){t(i)},1)}i.src!==e?(i.exifdata=null,i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){n?EXIF.getData(i,function(){o()}):o()},i.src=e):o()})}function u(e){var t=e.naturalWidth,n=e.naturalHeight;if(e.exifdata&&e.exifdata.Orientation>=5){var i=t;t=n,n=i}return{width:t,height:n}}function c(e){return e.exifdata.Orientation}function h(e,t,n){var i=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),n){case 2:r.translate(i,0),r.scale(-1,1);break;case 3:r.translate(i,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=i,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=i,r.rotate(-90*Math.PI/180),r.translate(-i,o),r.scale(1,-1);break;case 8:e.width=o,e.height=i,r.translate(0,i),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,i,o),r.restore()}function p(){var e,t,n,i,a,l=this,s=l.options.viewport.type?"cr-vp-"+l.options.viewport.type:null;l.options.useCanvas=l.options.enableOrientation||d.call(l),l.data={},l.elements={},e=l.elements.boundary=document.createElement("div"),t=l.elements.viewport=document.createElement("div"),l.elements.img=document.createElement("img"),n=l.elements.overlay=document.createElement("div"),l.options.useCanvas?(l.elements.canvas=document.createElement("canvas"),l.elements.preview=l.elements.canvas):l.elements.preview=l.elements.img,r(e,"cr-boundary"),i=l.options.boundary.width,a=l.options.boundary.height,o(e,{width:i+(isNaN(i)?"":"px"),height:a+(isNaN(a)?"":"px")}),r(t,"cr-viewport"),s&&r(t,s),o(t,{width:l.options.viewport.width+"px",height:l.options.viewport.height+"px"}),t.setAttribute("tabindex",0),r(l.elements.preview,"cr-image"),r(n,"cr-overlay"),l.element.appendChild(e),e.appendChild(l.elements.preview),e.appendChild(t),e.appendChild(n),r(l.element,"croppie-container"),l.options.customClass&&r(l.element,l.options.customClass),b.call(this),l.options.enableZoom&&v.call(l),l.options.enableResize&&m.call(l)}function d(){return this.options.enableExif&&window.EXIF}function m(){function e(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!m)){var o=p.elements.overlay.getBoundingClientRect();if(m=!0,a=e.pageX,l=e.pageY,i=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",s=o.width,u=o.height,e.touches){var r=e.touches[0];a=r.pageX,l=r.pageY}window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),document.body.style[A]="none"}}function t(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var r=e.touches[0];t=r.pageX,n=r.pageY}var c=t-a,h=n-l,m=p.options.viewport.height+h,v=p.options.viewport.width+c;"v"===i&&m>=f&&m<=u?(o(d,{height:m+"px"}),p.options.boundary.height+=h,o(p.elements.boundary,{height:p.options.boundary.height+"px"}),p.options.viewport.height+=h,o(p.elements.viewport,{height:p.options.viewport.height+"px"})):"h"===i&&v>=f&&v<=s&&(o(d,{width:v+"px"}),p.options.boundary.width+=c,o(p.elements.boundary,{width:p.options.boundary.width+"px"}),p.options.viewport.width+=c,o(p.elements.viewport,{width:p.options.viewport.width+"px"})),x.call(p),R.call(p),y.call(p),C.call(p),l=n,a=t}function n(){m=!1,window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),document.body.style[A]=""}var i,a,l,s,u,c,h,p=this,d=document.createElement("div"),m=!1,f=50;r(d,"cr-resizer"),o(d,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(r(c=document.createElement("div"),"cr-resizer-vertical"),d.appendChild(c)),this.options.resizeControls.width&&(r(h=document.createElement("div"),"cr-resizer-horisontal"),d.appendChild(h)),c&&c.addEventListener("mousedown",e),h&&h.addEventListener("mousedown",e),this.elements.boundary.appendChild(d)}function f(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=Y(e,4);t.value=Math.max(t.min,Math.min(t.max,n))}}function v(){function e(){g.call(n,{value:parseFloat(o.value),origin:new K(n.elements.preview),viewportRect:n.elements.viewport.getBoundingClientRect(),transform:U.parse(n.elements.preview)})}function t(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=n._currentZoom+i*n._currentZoom,t.preventDefault(),f.call(n,o),e.call(n)}var n=this,i=n.elements.zoomerWrap=document.createElement("div"),o=n.elements.zoomer=document.createElement("input");r(i,"cr-slider-wrap"),r(o,"cr-slider"),o.type="range",o.step="0.0001",o.value=1,o.style.display=n.options.showZoomer?"":"none",n.element.appendChild(i),i.appendChild(o),n._currentZoom=1,n.elements.zoomer.addEventListener("input",e),n.elements.zoomer.addEventListener("change",e),n.options.mouseWheelZoom&&(n.elements.boundary.addEventListener("mousewheel",t),n.elements.boundary.addEventListener("DOMMouseScroll",t))}function g(e){function t(){var e={};e[P]=i.toString(),e[N]=a.toString(),o(n.elements.preview,e)}var n=this,i=e?e.transform:U.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new K(n.elements.preview);if(n._currentZoom=e?e.value:n._currentZoom,i.scale=n._currentZoom,t(),n.options.enforceBoundary){var l=w.call(n,r),s=l.translate,u=l.origin;i.x>=s.maxX&&(a.x=u.minX,i.x=s.maxX),i.x<=s.minX&&(a.x=u.maxX,i.x=s.minX),i.y>=s.maxY&&(a.y=u.minY,i.y=s.maxY),i.y<=s.minY&&(a.y=u.maxY,i.y=s.minY)}t(),$.call(n),C.call(n)}function w(e){var t=this,n=t._currentZoom,i=e.width,o=e.height,r=t.elements.boundary.clientWidth/2,a=t.elements.boundary.clientHeight/2,l=t.elements.preview.getBoundingClientRect(),s=l.width,u=l.height,c=i/2,h=o/2,p=-1*(c/n-r),d=-1*(h/n-a),m=1/n*c,f=1/n*h;return{translate:{maxX:p,minX:p-(s*(1/n)-i*(1/n)),maxY:d,minY:d-(u*(1/n)-o*(1/n))},origin:{maxX:s*(1/n)-m,minX:m,maxY:u*(1/n)-f,minY:f}}}function y(){var e=this,t=e._currentZoom,n=e.elements.preview.getBoundingClientRect(),i=e.elements.viewport.getBoundingClientRect(),r=U.parse(e.elements.preview.style[P]),a=new K(e.elements.preview),l=i.top-n.top+i.height/2,s=i.left-n.left+i.width/2,u={},c={};u.y=l/t,u.x=s/t,c.y=(u.y-a.y)*(1-t),c.x=(u.x-a.x)*(1-t),r.x-=c.x,r.y-=c.y;var h={};h[N]=u.x+"px "+u.y+"px",h[P]=r.toString(),o(e.elements.preview,h)}function b(){function e(e,t){var n=p.elements.preview.getBoundingClientRect(),i=h.y+t,o=h.x+e;p.options.enforceBoundary?(c.top>n.top+t&&c.bottomn.left+e&&c.right1){var v=t.touches[0],g=t.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));u||(u=w/p._currentZoom);var y=w/u;return f.call(p,y),void i(p.elements.zoomer)}e(c,d),m[P]=h.toString(),o(p.elements.preview,m),x.call(p),s=r,l=n}function a(){d=!1,window.removeEventListener("mousemove",r),window.removeEventListener("touchmove",r),window.removeEventListener("mouseup",a),window.removeEventListener("touchend",a),document.body.style[A]="",y.call(p),C.call(p),u=0}var l,s,u,c,h,p=this,d=!1;p.elements.overlay.addEventListener("mousedown",n),p.elements.viewport.addEventListener("keydown",function(e){var n=37,i=38,o=39,r=40;if(!e.shiftKey||e.keyCode!=i&&e.keyCode!=r){if(p.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var a=function(t){switch(e.keyCode){case n:return[1,0];case i:return[0,1];case o:return[-1,0];case r:return[0,-1]}}();h=U.parse(p.elements.preview),document.body.style[A]="none",c=p.elements.viewport.getBoundingClientRect(),t(a)}}else{var l=0;l=e.keyCode==i?parseFloat(p.elements.zoomer.value,10)+parseFloat(p.elements.zoomer.step,10):parseFloat(p.elements.zoomer.value,10)-parseFloat(p.elements.zoomer.step,10),p.setZoom(l)}}),p.elements.overlay.addEventListener("touchstart",n)}function x(){var e=this,t=e.elements.boundary.getBoundingClientRect(),n=e.elements.preview.getBoundingClientRect();o(e.elements.overlay,{width:n.width+"px",height:n.height+"px",top:n.top-t.top+"px",left:n.left-t.left+"px"})}function C(){var e=this,t=e.get();if(E.call(e))if(e.options.update.call(e,t),e.$&&"undefined"==typeof Prototype)e.$(e.element).trigger("update",t);else{var n;window.CustomEvent?n=new CustomEvent("update",{detail:t}):(n=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),e.element.dispatchEvent(n)}}function E(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function _(){var e=this,t={},n=e.elements.preview,i=e.elements.preview.getBoundingClientRect(),r=new U(0,0,1),a=new K;E.call(e)&&!e.data.bound&&(e.data.bound=!0,t[P]=r.toString(),t[N]=a.toString(),t.opacity=1,o(n,t),e._originalImageWidth=i.width,e._originalImageHeight=i.height,e.options.enableZoom?R.call(e,!0):e._currentZoom=1,r.scale=e._currentZoom,t[P]=r.toString(),o(n,t),e.data.points.length?L.call(e,e.data.points):B.call(e),y.call(e),x.call(e))}function R(e){var t,n,o,r,a=this,l=0,s=1.5,u=a.elements.zoomer,c=parseFloat(u.value),h=a.elements.boundary.getBoundingClientRect(),p=a.elements.preview.getBoundingClientRect(),d=a.elements.viewport.getBoundingClientRect();a.options.enforceBoundary&&(o=d.width/(e?p.width:p.width/c),r=d.height/(e?p.height:p.height/c),l=Math.max(o,r)),l>=s&&(s=l+1),u.min=Y(l,4),u.max=Y(s,4),e&&(n=Math.max(h.width/p.width,h.height/p.height),t=null!==a.data.boundZoom?a.data.boundZoom:n,f.call(a,t)),i(u)}function L(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var t=this,n=e[2]-e[0],i=t.elements.viewport.getBoundingClientRect(),r=t.elements.boundary.getBoundingClientRect(),a={left:i.left-r.left,top:i.top-r.top},l=i.width/n,s=e[1],u=e[0],c=-1*e[1]+a.top,h=-1*e[0]+a.left,p={};p[N]=u+"px "+s+"px",p[P]=new U(h,c,l).toString(),o(t.elements.preview,p),f.call(t,l),t._currentZoom=l}function B(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=e.elements.boundary.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,l=r-(t.width-n.width)/2,s=a-(t.height-n.height)/2,u=new U(l,s,e._currentZoom);o(e.elements.preview,P,u.toString())}function I(e){var t=this,n=t.elements.canvas,i=t.elements.img,o=n.getContext("2d"),r=d.call(t),e=t.options.enableOrientation&&e;o.clearRect(0,0,n.width,n.height),n.width=i.width,n.height=i.height,r&&!e?h(n,i,l(c(i)||0,10)):e&&h(n,i,e)}function M(e){var t=this,n=e.points,i=l(n[0]),o=l(n[1]),r=l(n[2]),a=l(n[3]),s=r-i,u=a-o,c=e.circle,h=document.createElement("canvas"),p=h.getContext("2d"),d=s,m=u,f=0,v=0,g=d,w=m,y=e.outputWidth&&e.outputHeight,b=1;return outputHeightRatio=1,y&&(g=e.outputWidth,w=e.outputHeight,b=g/d,outputHeightRatio=w/outWHeight),h.width=g,h.height=w,e.backgroundColor&&(p.fillStyle=e.backgroundColor,p.fillRect(0,0,d,m)),t.options.enforceBoundary||(i<0&&(f=Math.abs(i),i=0),o<0&&(v=Math.abs(o),o=0),r>t._originalImageWidth&&(d=s=t._originalImageWidth-i),a>t._originalImageHeight&&(m=u=t._originalImageHeight-o)),1===b&&1===outputHeightRatio||(f*=b,v*=outputHeightRatio,d*=b,m*=outputHeightRatio),p.drawImage(this.elements.preview,i,o,Math.min(s,t._originalImageWidth),Math.min(u,t._originalImageHeight),f,v,d,m),c&&(p.fillStyle="#fff",p.globalCompositeOperation="destination-in",p.beginPath(),p.arc(d/2,m/2,d/2,0,2*Math.PI,!0),p.closePath(),p.fill()),h}function H(e){var t=e.points,n=document.createElement("div"),i=document.createElement("img"),a=t[2]-t[0],l=t[3]-t[1];return r(n,"croppie-result"),n.appendChild(i),o(i,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),i.src=e.url,o(n,{width:a+"px",height:l+"px"}),n}function Z(e){return M.call(this,e).toDataURL(e.format,e.quality)}function z(e){var t=this;return new Promise(function(n,i){M.call(t,e).toBlob(function(e){n(e)},e.format,e.quality)})}function W(e,t){var n,i=this,o=[],r=null,a=d.call(i);if("string"==typeof e)n=e,e={};else if(Array.isArray(e))o=e.slice();else{if(void 0===e&&i.data.url)return _.call(i),C.call(i),null;n=e.url,o=e.points||[],r=void 0===e.zoom?null:e.zoom}return i.data.bound=!1,i.data.url=n||i.data.url,i.data.boundZoom=r,s(n,i.elements.img,a).then(function(n){if(o.length)i.options.relative&&(o=[o[0]*n.naturalWidth/100,o[1]*n.naturalHeight/100,o[2]*n.naturalWidth/100,o[3]*n.naturalHeight/100]);else{var r,a,l=u(n),s=i.elements.viewport.getBoundingClientRect(),c=s.width/s.height;l.width/l.height>c?r=(a=l.height)*c:a=(r=l.width)/c;var h=(l.width-r)/2,p=(l.height-a)/2,d=h+r,m=p+a;i.data.points=[h,p,d,m]}i.data.points=o.map(function(e){return parseFloat(e)}),i.options.useCanvas&&I.call(i,e.orientation||1),_.call(i),C.call(i),t&&t()})}function Y(e,t){return parseFloat(e).toFixed(t||0)}function X(){var e=this,t=e.elements.preview.getBoundingClientRect(),n=e.elements.viewport.getBoundingClientRect(),i=n.left-t.left,o=n.top-t.top,r=(n.width-e.elements.viewport.offsetWidth)/2,a=(n.height-e.elements.viewport.offsetHeight)/2,l=i+e.elements.viewport.offsetWidth+r,s=o+e.elements.viewport.offsetHeight+a,u=e._currentZoom;(u===1/0||isNaN(u))&&(u=1);var c=e.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(c,i/u),o=Math.max(c,o/u),l=Math.max(c,l/u),s=Math.max(c,s/u),{points:[Y(i),Y(o),Y(l),Y(s)],zoom:u}}function F(e){var t=this,i=X.call(t),o=n(Q,n({},e)),r="string"==typeof e?e:o.type||"base64",a=o.size||"viewport",l=o.format,s=o.quality,u=o.backgroundColor,c="boolean"==typeof o.circle?o.circle:"circle"===t.options.viewport.type,h=t.elements.viewport.getBoundingClientRect(),p=h.width/h.height;return"viewport"===a?(i.outputWidth=h.width,i.outputHeight=h.height):"object"==typeof a&&(a.width&&a.height?(i.outputWidth=a.width,i.outputHeight=a.height):a.width?(i.outputWidth=a.width,i.outputHeight=a.width/p):a.height&&(i.outputWidth=a.height*p,i.outputHeight=a.height)),G.indexOf(l)>-1&&(i.format="image/"+l,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e,n){switch(r.toLowerCase()){case"rawcanvas":e(M.call(t,i));break;case"canvas":case"base64":e(Z.call(t,i));break;case"blob":z.call(t,i).then(e);break;default:e(H.call(t,i))}})}function k(){_.call(this)}function j(e){if(!this.options.useCanvas)throw"Croppie: Cannot rotate without enableOrientation";var t=this,n=t.elements.canvas,i=document.createElement("canvas"),o=1;i.width=n.width,i.height=n.height,i.getContext("2d").drawImage(n,0,0),90!==e&&-270!==e||(o=6),-90!==e&&270!==e||(o=8),180!==e&&-180!==e||(o=3),h(n,i,o),g.call(t),i=null}function S(){var e=this;e.element.removeChild(e.elements.boundary),a(e.element,"croppie-container"),e.options.enableZoom&&e.element.removeChild(e.elements.zoomerWrap),delete e.elements}function O(e,t){if(this.element=e,this.options=n(n({},O.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;r(i,"cr-original-image");var o=document.createElement("div");this.element.parentNode.appendChild(o),o.appendChild(i),this.element=o,this.options.url=this.options.url||i.src}if(p.call(this),this.options.url){var a={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,W.call(this,a)}}"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function n(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function i(e){var t=this;return null===this._state?void this._deferreds.push(e):void c(function(){var n=t._state?e.onFulfilled:e.onRejected;if(null!==n){var i;try{i=n(t._value)}catch(t){return void e.reject(t)}e.resolve(i)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void s(t(n,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)i.call(this,this._deferreds[e]);this._deferreds=null}function l(e,t,n,i){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=i}function s(e,t,n){var i=!1;try{e(function(e){i||(i=!0,t(e))},function(e){i||(i=!0,n(e))})}catch(e){if(i)return;i=!0,n(e)}}var u=setTimeout,c="function"==typeof setImmediate&&setImmediate||function(e){u(e,1)},h=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};n.prototype.catch=function(e){return this.then(null,e)},n.prototype.then=function(e,t){var o=this;return new n(function(n,r){i.call(o,new l(e,t,n,r))})},n.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&h(arguments[0])?arguments[0]:arguments);return new n(function(t,n){function i(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var l=a.then;if("function"==typeof l)return void l.call(a,function(e){i(r,e)},n)}e[r]=a,0==--o&&t(e)}catch(e){n(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;ri;i++)e[i].then(t,n)})},n._setImmediateFn=function(e){c=e},"undefined"!=typeof module&&module.exports?module.exports=n:e.Promise||(e.Promise=n)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,n){for(var i=atob(this.toDataURL(t,n).split(",")[1]),o=i.length,r=new Uint8Array(o),a=0;a-1||e.indexOf("none")>-1?U.fromMatrix(e):U.fromString(e)},U.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new U(l(t[4]),l(t[5]),parseFloat(t[0]))},U.fromString=function(e){var t=e.split(") "),n=t[0].substring(O.globals.translate.length+1).split(","),i=t.length>1?t[1].substring(6):1,o=n.length>1?n[0]:0,r=n.length>1?n[1]:0;return new U(o,r,i)},U.prototype.toString=function(){var e=q[O.globals.translate].suffix||"";return O.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var K=function(e){if(!e||!e.style[N])return this.x=0,void(this.y=0);var t=e.style[N].split(" ");this.x=parseFloat(t[0]),this.y=parseFloat(t[1])};K.prototype.toString=function(){return this.x+"px "+this.y+"px"};var $=function(e,t,n){var i;return function(){var o=this,r=arguments,a=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||e.apply(o,r)},t),a&&e.apply(o,r)}}(x,500),Q={type:"canvas",format:"png",quality:1},G=["jpeg","webp","png"];if(window.jQuery){var J=window.jQuery;J.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),n=J(this).data("croppie");return"get"===e?n.get():"result"===e?n.result.apply(n,t):"bind"===e?n.bind.apply(n,t):this.each(function(){var n=J(this).data("croppie");if(n){var i=n[e];if(!J.isFunction(i))throw"Croppie "+e+" method not found";i.apply(n,t),"destroy"===e&&J(this).removeData("croppie")}})}return this.each(function(){var t=new O(this,e);t.$=J,J(this).data("croppie",t)})}}O.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},O.globals={translate:"translate3d"},n(O.prototype,{bind:function(e,t){return W.call(this,e,t)},get:function(){var e=X.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return F.call(this,e)},refresh:function(){return k.call(this)},setZoom:function(e){f.call(this,e),i(this.elements.zoomer)},rotate:function(e){j.call(this,e)},destroy:function(){return S.call(this)}}),e.Croppie=window.Croppie=O,"object"==typeof module&&module.exports&&(module.exports=O)}); +!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return _.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),B.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",R.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!=l&&e.keyCode!=c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),B.call(s),document.body.style[n]="",R.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode==l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){L.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),_.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),B.call(l),j.call(l),R.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&a.addEventListener("mousedown",m);s&&s.addEventListener("mousedown",m);this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function _(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function L(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function R(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function B(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var z,Z,M,I,X=(z=B,Z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||z.apply(e,t)},Z),i&&z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?j.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),_.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),R.call(this),B.call(this))}function j(e){var t,i,n,o,r=0,a=1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=O(r,4),s.max=O(a,4),!e&&(ls.max)?_.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function O(e,t){return parseFloat(e).toFixed(t||0)}function A(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[O(i),O(n),O(a),O(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=A.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(k.call(t,i));break;case"canvas":case"base64":e(function(e){return k.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){k.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),j.call(this),L.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,H.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return H.call(this,e,t)},get:function(){var e=A.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){_.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q,"object"==typeof module&&module.exports&&(module.exports=q)}); \ No newline at end of file From 2b061ebc289dc6b519d07db817d1ca0da1acef09 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 9 Jan 2018 15:53:56 -0600 Subject: [PATCH 27/68] Some documentation updates for clarification --- demo/demo.css | 17 ++++++++++------- index.html | 23 +++++++++++++++++++++++ 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 8aba05a4..91784583 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -32,7 +32,12 @@ h1 { padding-top: 30px; margin: 15px 0; } - +h3 { + font-size: 18px; + font-weight: 400; + border-bottom: 1px solid #0C4648; + margin: 15px 0 10px; +} nav { position: absolute; top: 0; @@ -171,12 +176,6 @@ h2 { margin: 0 0 5px 0; } -.documentation h3 { - font-size: 18px; - font-weight: 400; - border-bottom: 1px solid #0C4648; - margin: 15px 0 10px; -} .documentation ul { list-style: none; padding: 0; @@ -218,6 +217,10 @@ h2 { color: #777; } +.important-notes article { + margin-bottom: 2em; +} + .upload-demo .upload-demo-wrap, .upload-demo .upload-result, .upload-demo.ready .upload-msg { diff --git a/index.html b/index.html index a011a332..1a29cf71 100644 --- a/index.html +++ b/index.html @@ -453,6 +453,29 @@

    Demos

    +
    + +

    Important Notes

    +
    +
    + +

    Image Hosting & Cross Origin Errors

    +

    Croppie uses canvas.drawImage(...) to manipulate images. Thus, images must obey the CORS policy. More info can be found here.

    +
    +
    + +

    Visibility and Binding

    +

    Croppie is dependent on it's container being visible when the bind method is called. This can be an issue when your croppie component is inside a modal that isn't shown. Let's take the bootstrap modal for example..

    + 
    
+var myCroppie = $('#my-croppie').croppie(opts);
+$('#my-modal').on('shown.bs.modal', function(){ 
+    myCroppie.bind(bindOpts);
+});
+
    +

    If you are having issues getting the correct crop result, and your croppie instance is shown inside of a modal, try taking your croppie out of the modal and see if your issues persist. If they don't, then make sure that your bind method is called after the modal is done animating.

    +
    +
    +
    From 22d7d6d9a92d5edf987715792008fb4bf3fd1dbd Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 9 Jan 2018 16:12:16 -0600 Subject: [PATCH 28/68] fix typo in documentation --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1a29cf71..a099f39e 100644 --- a/index.html +++ b/index.html @@ -469,7 +469,7 @@

    Visibility and Binding

    
 var myCroppie = $('#my-croppie').croppie(opts);
 $('#my-modal').on('shown.bs.modal', function(){ 
-    myCroppie.bind(bindOpts);
+    myCroppie.croppie('bind', bindOpts);
 });

    If you are having issues getting the correct crop result, and your croppie instance is shown inside of a modal, try taking your croppie out of the modal and see if your issues persist. If they don't, then make sure that your bind method is called after the modal is done animating.

    From cd08407d9ad8467903ab7bd424d18af994769ef9 Mon Sep 17 00:00:00 2001 From: Sarun Intaralawan Date: Mon, 29 Jan 2018 21:02:16 +0700 Subject: [PATCH 29/68] Remove unnecessary export (#452) --- croppie.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/croppie.js b/croppie.js index caa07d98..04bf0082 100755 --- a/croppie.js +++ b/croppie.js @@ -1591,8 +1591,4 @@ }); exports.Croppie = window.Croppie = Croppie; - - if (typeof module === 'object' && !!module.exports) { - module.exports = Croppie; - } })); From add10fbb7cd465377333c658a976db1076717d3e Mon Sep 17 00:00:00 2001 From: jkeedy <31319994+jkeedy@users.noreply.github.com> Date: Mon, 5 Feb 2018 07:50:20 -0600 Subject: [PATCH 30/68] Add namespace to update event (#458) * adding namespace to update event * adding namespace to correct event --- croppie.js | 2 +- demo/demo.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index f52dacd7..aba7b27d 100755 --- a/croppie.js +++ b/croppie.js @@ -973,7 +973,7 @@ self.options.update.call(self, data); if (self.$ && typeof Prototype == 'undefined') { - self.$(self.element).trigger('update', data); + self.$(self.element).trigger('update.croppie', data); } else { var ev; diff --git a/demo/demo.js b/demo/demo.js index 283934d2..084fca93 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -50,7 +50,7 @@ var Demo = (function() { enforceBoundary: false // mouseWheelZoom: false }); - mc.on('update', function (ev, data) { + mc.on('update.croppie', function (ev, data) { // console.log('jquery update', ev, data); }); $('.js-main-image').on('click', function (ev) { From 3effe09dde183cd08383d5445eed3fad13cac9d6 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:07:36 -0600 Subject: [PATCH 31/68] cleanup documentation/demo html --- demo/demo.css | 1 + demo/demo.js | 4 ++-- index.html | 21 ++++++++++++--------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 91784583..9807bb87 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -42,6 +42,7 @@ nav { position: absolute; top: 0; right: 0; + padding:15px; } nav a { diff --git a/demo/demo.js b/demo/demo.js index 13913cce..8b4e0343 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -234,13 +234,13 @@ var Demo = (function() { } function bindNavigation () { - var $body = $('body'); + var $html = $('html'); $('nav a').on('click', function (ev) { var lnk = $(ev.currentTarget), href = lnk.attr('href'), targetTop = $('a[name=' + href.substring(1) + ']').offset().top; - $body.animate({ scrollTop: targetTop }); + $html.animate({ scrollTop: targetTop }); ev.preventDefault(); }); } diff --git a/index.html b/index.html index 157ea3d4..29ad7ec1 100644 --- a/index.html +++ b/index.html @@ -25,12 +25,10 @@
    @@ -184,7 +182,7 @@

    Methods

    • url URL to image
    • points Array of points that translate into [topLeftX, topLeftY, bottomRightX, bottomRightY]
      • - zoom Apply zoom after image has been bound +
    • zoom Apply zoom after image has been bound
    • orientation Custom orientation, applied after exif orientation (if enabled). Only works with enableOrientation option enabled (see 'Options').
      @@ -198,7 +196,6 @@

      Methods

    • 6 rotated clockwise by 90 degrees
    • 7 flipped horizontally, then rotated right by 90 degrees
    • 8 rotated counter-clockwise by 90 degrees
      • -
    • @@ -281,13 +278,19 @@

    Methods

    +

    Events

    • - update(croppe)Croppie + update(croppie)Croppie

      Triggered when a drag or zoom occurs

      + 
      
+$('.my-croppie').on('update.croppie', function(ev, cropData) {});
+// or
+document.getElementById('another-croppie').addEventListener('update', function(ev) { var cropData = ev.detail; });
+
    From e914ec5f0f70df1932220ed13d815a2570aeb803 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:09:34 -0600 Subject: [PATCH 32/68] clarifying documentation on new option --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 29ad7ec1..928a04b5 100644 --- a/index.html +++ b/index.html @@ -144,7 +144,7 @@

    Options

    Defaulttrue
  • - mouseWheelZoomobject + mouseWheelZoombool/string

    Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. If 'ctrl' is passed mouse wheel will only work while control keyboard is pressed

    Defaulttrue
    • From 7e96d5c4725852ecf308f0bcee120f5e1b9b413e Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:20:18 -0600 Subject: [PATCH 33/68] update readme --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b9710833..f906d0b3 100755 --- a/README.md +++ b/README.md @@ -34,13 +34,18 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js * https://github.com/jofftiquez/vue-croppie ## Contributing -#### Static Server -`live-server` +First, thanks for contributing. This project is difficult to maintain with one person. Here's a "checklist" of things to remember when contributing to croppie. +* Don't forget to update the documentation. +* If you're adding a new option/event/method, try adding to an example on the documentation. Or create a new example, if you feel the need. +* We don't have tests for Croppie :( (if you want to create tests I'd be forever grateful), so please try to test the functionality you're changing on the demo page. I've tried to add as many use-cases as I can think of on there. Compare the functionality in your branch to the one on the official page. If they all still work, then great! + +If you're looking for a simple server to load the demo page, I use https://github.com/tapio/live-server. #### Minifying `uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js` #### Releasing a new version +For the most part, you shouldn't worry about these steps unless you're the one handling the release. Please don't bump the release and don't minify/uglify in a PR. That just creates merge conflicts when merging. Those steps will be peformed when the release is created. 1. Bump version in croppie.js 2. Minify/Uglify 3. Commit From a89bda0e81169b749106907b2d179143f1df0506 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:21:26 -0600 Subject: [PATCH 34/68] prep for 2.6.0 --- croppie.js | 2 +- croppie.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index 6baee6dc..e18c8bf8 100755 --- a/croppie.js +++ b/croppie.js @@ -2,7 +2,7 @@ * Croppie * Copyright 2017 * Foliotek - * Version: 2.5.2 + * Version: 2.6.0 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/croppie.min.js b/croppie.min.js index 11d085ce..8a39da76 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return _.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),B.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",R.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!=l&&e.keyCode!=c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),B.call(s),document.body.style[n]="",R.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode==l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){L.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),_.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),B.call(l),j.call(l),R.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&a.addEventListener("mousedown",m);s&&s.addEventListener("mousedown",m);this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function _(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function L(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function R(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function B(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var z,Z,M,I,X=(z=B,Z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||z.apply(e,t)},Z),i&&z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?j.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),_.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),R.call(this),B.call(this))}function j(e){var t,i,n,o,r=0,a=1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=O(r,4),s.max=O(a,4),!e&&(ls.max)?_.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function O(e,t){return parseFloat(e).toFixed(t||0)}function A(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[O(i),O(n),O(a),O(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=A.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(k.call(t,i));break;case"canvas":case"base64":e(function(e){return k.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){k.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),j.call(this),L.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,H.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return H.call(this,e,t)},get:function(){var e=A.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){_.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q,"object"==typeof module&&module.exports&&(module.exports=q)}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return L.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),B.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",R.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!=l&&e.keyCode!=c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),B.call(s),document.body.style[n]="",R.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode==l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){_.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;if("ctrl"===e.options.mouseWheelZoom&&1!=t.ctrlKey)return 0;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),L.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),B.call(l),k.call(l),R.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function L(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=j(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function _(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function R(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function B(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Z,z,M,I,X=(Z=B,z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||Z.apply(e,t)},z),i&&Z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?k.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),L.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),R.call(this),B.call(this))}function k(e){var t,i,n,o,r=0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=j(r,4),s.max=j(a,4),!e&&(ls.max)?L.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function j(e,t){return parseFloat(e).toFixed(t||0)}function A(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[j(i),j(n),j(a),j(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=A.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(H.call(t,i));break;case"canvas":case"base64":e(function(e){return H.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){H.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),k.call(this),_.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,O.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return O.call(this,e,t)},get:function(){var e=A.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){L.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q}); \ No newline at end of file From 315de4a5d64064de8913d9e4debd530dd8882d00 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:21:38 -0600 Subject: [PATCH 35/68] 2.6.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9ab9ccbd..2fa44a9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.5.1", + "version": "2.6.0", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From 71f637d5df26b53fa8a3a7af7364b8f9bc7f3030 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:32:10 -0600 Subject: [PATCH 36/68] I like this setup for a demo better --- demo/demo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/demo.js b/demo/demo.js index 8b4e0343..c7a066b8 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -40,14 +40,14 @@ var Demo = (function() { viewport: { width: 150, height: 150, - type: 'square' + type: 'circle' }, boundary: { width: 300, height: 300 }, // url: 'demo/demo-1.jpg', - enforceBoundary: false + // enforceBoundary: false // mouseWheelZoom: false }); mc.on('update.croppie', function (ev, data) { From 12ab62e83e2a424eb5a62b11fa259a116206db37 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 08:59:37 -0600 Subject: [PATCH 37/68] remember to copy the class list over when replacing the image --- croppie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index e18c8bf8..15333b73 100755 --- a/croppie.js +++ b/croppie.js @@ -178,7 +178,6 @@ function loadImage(src, doExif) { var img = new Image(); img.style.opacity = 0; - return new Promise(function (resolve) { function _resolve() { img.style.opacity = 1; @@ -1224,6 +1223,7 @@ function _replaceImage(img) { if (this.elements.img.parentNode) { + Array.prototype.forEach.call(this.elements.img.classList, function(c) { img.classList.add(c); }); this.elements.img.parentNode.replaceChild(img, this.elements.img); this.elements.preview = img; // if the img is attached to the DOM, they're not using the canvas } From e5eea26e047c57e1606ae6a7998b92a6af32fd0d Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 09:00:45 -0600 Subject: [PATCH 38/68] prep for 2.6.1 --- croppie.js | 2 +- croppie.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index 15333b73..00d891a6 100755 --- a/croppie.js +++ b/croppie.js @@ -2,7 +2,7 @@ * Croppie * Copyright 2017 * Foliotek - * Version: 2.6.0 + * Version: 2.6.1 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/croppie.min.js b/croppie.min.js index 8a39da76..4d8f1acb 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return L.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),B.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",R.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!=l&&e.keyCode!=c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),B.call(s),document.body.style[n]="",R.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode==l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){_.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;if("ctrl"===e.options.mouseWheelZoom&&1!=t.ctrlKey)return 0;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),L.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),B.call(l),k.call(l),R.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function L(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=j(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function _(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function R(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function B(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Z,z,M,I,X=(Z=B,z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||Z.apply(e,t)},z),i&&Z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?k.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),L.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),R.call(this),B.call(this))}function k(e){var t,i,n,o,r=0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=j(r,4),s.max=j(a,4),!e&&(ls.max)?L.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function j(e,t){return parseFloat(e).toFixed(t||0)}function A(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[j(i),j(n),j(a),j(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=A.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(H.call(t,i));break;case"canvas":case"base64":e(function(e){return H.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){H.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),k.call(this),_.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,O.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return O.call(this,e,t)},get:function(){var e=A.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){L.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return L.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),B.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",R.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!=l&&e.keyCode!=c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),B.call(s),document.body.style[n]="",R.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode==l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){_.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;if("ctrl"===e.options.mouseWheelZoom&&1!=t.ctrlKey)return 0;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),L.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),B.call(l),k.call(l),R.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function L(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function _(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function R(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function B(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Z,z,M,I,X=(Z=B,z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||Z.apply(e,t)},z),i&&Z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?k.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),L.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),R.call(this),B.call(this))}function k(e){var t,i,n,o,r=0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=O(r,4),s.max=O(a,4),!e&&(ls.max)?L.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function O(e,t){return parseFloat(e).toFixed(t||0)}function j(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[O(i),O(n),O(a),O(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=j.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(A.call(t,i));break;case"canvas":case"base64":e(function(e){return A.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){A.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),k.call(this),_.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,H.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return H.call(this,e,t)},get:function(){var e=j.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){L.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q}); \ No newline at end of file From 1c67a9b86ac205cbf41c54b1dea7d38db32c8f6a Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 5 Feb 2018 09:00:51 -0600 Subject: [PATCH 39/68] 2.6.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2fa44a9a..e4213aac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.6.0", + "version": "2.6.1", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From 32b4f596622118b3ead737d86372cdd704cfae6f Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Wed, 21 Feb 2018 17:17:45 +0300 Subject: [PATCH 40/68] Fix typo that makes it unusable in strict mode (#481) This typo makes it unusable in strict mode because it doesn't allow to create global variables in this way, and i believe you didn't want it too https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Converting_mistakes_into_errors --- croppie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index 00d891a6..521c0d4e 100755 --- a/croppie.js +++ b/croppie.js @@ -1159,7 +1159,7 @@ canvasWidth = data.outputWidth || width, canvasHeight = data.outputHeight || height, customDimensions = (data.outputWidth && data.outputHeight), - outputWidthRatio = 1; + outputWidthRatio = 1, outputHeightRatio = 1; canvas.width = canvasWidth; From 3a61566e4296fa5bad7248b86e18a4a960d9c11f Mon Sep 17 00:00:00 2001 From: John Lane Date: Fri, 16 Mar 2018 07:52:28 -0500 Subject: [PATCH 41/68] Fix enforce boundary (#484) * Linting - avoid type coercion * Linting - remove unncessary semi colons * Fix issue with enforceBoundary = false Whenvever enforceBoundary is set to false, the image cannot get smaller the original image size. Adding conditional that will skip this check if enforceBoundary = false --- croppie.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/croppie.js b/croppie.js index 521c0d4e..9dc3033d 100755 --- a/croppie.js +++ b/croppie.js @@ -20,7 +20,7 @@ /* Polyfills */ if (typeof Promise !== 'function') { /*! promise-polyfill 3.1.0 */ - !function(a){function b(a,b){return function(){a.apply(b,arguments)}}function c(a){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof a)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],i(a,b(e,this),b(f,this))}function d(a){var b=this;return null===this._state?void this._deferreds.push(a):void k(function(){var c=b._state?a.onFulfilled:a.onRejected;if(null===c)return void(b._state?a.resolve:a.reject)(b._value);var d;try{d=c(b._value)}catch(e){return void a.reject(e)}a.resolve(d)})}function e(a){try{if(a===this)throw new TypeError("A promise cannot be resolved with itself.");if(a&&("object"==typeof a||"function"==typeof a)){var c=a.then;if("function"==typeof c)return void i(b(c,a),b(e,this),b(f,this))}this._state=!0,this._value=a,g.call(this)}catch(d){f.call(this,d)}}function f(a){this._state=!1,this._value=a,g.call(this)}function g(){for(var a=0,b=this._deferreds.length;b>a;a++)d.call(this,this._deferreds[a]);this._deferreds=null}function h(a,b,c,d){this.onFulfilled="function"==typeof a?a:null,this.onRejected="function"==typeof b?b:null,this.resolve=c,this.reject=d}function i(a,b,c){var d=!1;try{a(function(a){d||(d=!0,b(a))},function(a){d||(d=!0,c(a))})}catch(e){if(d)return;d=!0,c(e)}}var j=setTimeout,k="function"==typeof setImmediate&&setImmediate||function(a){j(a,1)},l=Array.isArray||function(a){return"[object Array]"===Object.prototype.toString.call(a)};c.prototype["catch"]=function(a){return this.then(null,a)},c.prototype.then=function(a,b){var e=this;return new c(function(c,f){d.call(e,new h(a,b,c,f))})},c.all=function(){var a=Array.prototype.slice.call(1===arguments.length&&l(arguments[0])?arguments[0]:arguments);return new c(function(b,c){function d(f,g){try{if(g&&("object"==typeof g||"function"==typeof g)){var h=g.then;if("function"==typeof h)return void h.call(g,function(a){d(f,a)},c)}a[f]=g,0===--e&&b(a)}catch(i){c(i)}}if(0===a.length)return b([]);for(var e=a.length,f=0;fd;d++)a[d].then(b,c)})},c._setImmediateFn=function(a){k=a},"undefined"!=typeof module&&module.exports?module.exports=c:a.Promise||(a.Promise=c)}(this); + !function(a){function b(a,b){return function(){a.apply(b,arguments)}}function c(a){if("object"!==typeof this)throw new TypeError("Promises must be constructed via new");if("function"!==typeof a)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],i(a,b(e,this),b(f,this))}function d(a){var b=this;return null===this._state?void this._deferreds.push(a):void k(function(){var c=b._state?a.onFulfilled:a.onRejected;if(null===c)return void(b._state?a.resolve:a.reject)(b._value);var d;try{d=c(b._value)}catch(e){return void a.reject(e)}a.resolve(d)})}function e(a){try{if(a===this)throw new TypeError("A promise cannot be resolved with itself.");if(a&&("object"===typeof a||"function"===typeof a)){var c=a.then;if("function"===typeof c)return void i(b(c,a),b(e,this),b(f,this))}this._state=!0,this._value=a,g.call(this)}catch(d){f.call(this,d)}}function f(a){this._state=!1,this._value=a,g.call(this)}function g(){for(var a=0,b=this._deferreds.length;b>a;a++)d.call(this,this._deferreds[a]);this._deferreds=null}function h(a,b,c,d){this.onFulfilled="function"===typeof a?a:null,this.onRejected="function"===typeof b?b:null,this.resolve=c,this.reject=d}function i(a,b,c){var d=!1;try{a(function(a){d||(d=!0,b(a))},function(a){d||(d=!0,c(a))})}catch(e){if(d)return;d=!0,c(e)}}var j=setTimeout,k="function"===typeof setImmediate&&setImmediate||function(a){j(a,1)},l=Array.isArray||function(a){return"[object Array]"===Object.prototype.toString.call(a)};c.prototype["catch"]=function(a){return this.then(null,a)},c.prototype.then=function(a,b){var e=this;return new c(function(c,f){d.call(e,new h(a,b,c,f))})},c.all=function(){var a=Array.prototype.slice.call(1===arguments.length&&l(arguments[0])?arguments[0]:arguments);return new c(function(b,c){function d(f,g){try{if(g&&("object"===typeof g||"function"===typeof g)){var h=g.then;if("function"===typeof h)return void h.call(g,function(a){d(f,a)},c)}a[f]=g,0===--e&&b(a)}catch(i){c(i)}}if(0===a.length)return b([]);for(var e=a.length,f=0;fd;d++)a[d].then(b,c)})},c._setImmediateFn=function(a){k=a},"undefined"!==typeof module&&module.exports?module.exports=c:a.Promise||(a.Promise=c)}(this); } if ( typeof window.CustomEvent !== "function" ) { @@ -630,7 +630,7 @@ function scroll(ev) { var delta, targetZoom; - if(self.options.mouseWheelZoom === 'ctrl' && ev.ctrlKey != true){ + if(self.options.mouseWheelZoom === 'ctrl' && ev.ctrlKey !== true){ return 0; } else if (ev.wheelDelta) { delta = ev.wheelDelta / 1200; //wheelDelta min: -120 max: 120 // max x 10 x 2 @@ -814,9 +814,9 @@ RIGHT_ARROW = 39, DOWN_ARROW = 40; - if (ev.shiftKey && (ev.keyCode == UP_ARROW || ev.keyCode == DOWN_ARROW)) { + if (ev.shiftKey && (ev.keyCode === UP_ARROW || ev.keyCode === DOWN_ARROW)) { var zoom = 0.0; - if (ev.keyCode == UP_ARROW) { + if (ev.keyCode === UP_ARROW) { zoom = parseFloat(self.elements.zoomer.value, 10) + parseFloat(self.elements.zoomer.step, 10) } else { @@ -832,7 +832,7 @@ document.body.style[CSS_USERSELECT] = 'none'; vpRect = self.elements.viewport.getBoundingClientRect(); keyMove(movement); - }; + } function parseKeyDown(key) { switch (key) { @@ -844,8 +844,8 @@ return [-1, 0]; case DOWN_ARROW: return [0, -1]; - }; - }; + } + } } function keyMove(movement) { @@ -903,7 +903,7 @@ deltaY = pageY - originalY, newCss = {}; - if (ev.type == 'touchmove') { + if (ev.type === 'touchmove') { if (ev.touches.length > 1) { var touch1 = ev.touches[0]; var touch2 = ev.touches[1]; @@ -973,7 +973,7 @@ } self.options.update.call(self, data); - if (self.$ && typeof Prototype == 'undefined') { + if (self.$ && typeof Prototype === 'undefined') { self.$(self.element).trigger('update.croppie', data); } else { @@ -1080,7 +1080,7 @@ } function _bindPoints(points) { - if (points.length != 4) { + if (points.length !== 4) { throw "Croppie - Invalid number of points supplied: " + points; } var self = this, @@ -1170,8 +1170,10 @@ ctx.fillRect(0, 0, canvasWidth, canvasHeight); } - width=Math.min(width, self._originalImageWidth); - height=Math.min(height, self._originalImageHeight) + if (self.options.enforceBoundary !== false) { + width = Math.min(width, self._originalImageWidth); + height = Math.min(height, self._originalImageHeight); + } // console.table({ left, right, top, bottom, canvasWidth, canvasHeight }); ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight); @@ -1244,7 +1246,7 @@ else if (Array.isArray(options)) { points = options.slice(); } - else if (typeof (options) == 'undefined' && self.data.url) { //refreshing + else if (typeof (options) === 'undefined' && self.data.url) { //refreshing _updatePropertiesFromImage.call(self); _triggerUpdate.call(self); return null; From 6cee78e63acf079c2f25f69af92ce63aac6ce5ea Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Fri, 16 Mar 2018 08:06:41 -0500 Subject: [PATCH 42/68] prep for 2.6.2 --- croppie.js | 4 ++-- croppie.min.js | 2 +- package.json | 6 ++++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/croppie.js b/croppie.js index 9dc3033d..825d50e1 100755 --- a/croppie.js +++ b/croppie.js @@ -1,8 +1,8 @@ /************************* * Croppie - * Copyright 2017 + * Copyright 2018 * Foliotek - * Version: 2.6.1 + * Version: 2.6.2 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/croppie.min.js b/croppie.min.js index 4d8f1acb..adb8d40c 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return L.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),B.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",R.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!=l&&e.keyCode!=c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),B.call(s),document.body.style[n]="",R.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode==l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){_.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;if("ctrl"===e.options.mouseWheelZoom&&1!=t.ctrlKey)return 0;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),L.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),B.call(l),k.call(l),R.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function L(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function _(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function R(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function B(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Z,z,M,I,X=(Z=B,z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||Z.apply(e,t)},z),i&&Z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?k.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!=e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),L.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),R.call(this),B.call(this))}function k(e){var t,i,n,o,r=0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=O(r,4),s.max=O(a,4),!e&&(ls.max)?L.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function O(e,t){return parseFloat(e).toFixed(t||0)}function j(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[O(i),O(n),O(a),O(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=j.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(A.call(t,i));break;case"canvas":case"base64":e(function(e){return A.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){A.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),k.call(this),_.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,H.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return H.call(this,e,t)},get:function(){var e=j.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){L.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return L.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),R.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",B.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!==l&&e.keyCode!==c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),R.call(s),document.body.style[n]="",B.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode===l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){_.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;if("ctrl"===e.options.mouseWheelZoom&&!0!==t.ctrlKey)return 0;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),L.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),R.call(l),k.call(l),B.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function L(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=j(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function _(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function B(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function R(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Z,z,M,I,X=(Z=R,z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||Z.apply(e,t)},z),i&&Z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?k.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!==e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),L.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),B.call(this),R.call(this))}function k(e){var t,i,n,o,r=0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=j(r,4),s.max=j(a,4),!e&&(ls.max)?L.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function j(e,t){return parseFloat(e).toFixed(t||0)}function H(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[j(i),j(n),j(a),j(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=H.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(A.call(t,i));break;case"canvas":case"base64":e(function(e){return A.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){A.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),k.call(this),_.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,O.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return O.call(this,e,t)},get:function(){var e=H.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){L.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q}); \ No newline at end of file diff --git a/package.json b/package.json index e4213aac..77d8aa53 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,13 @@ "main": "croppie.js", "devDependencies": { "gh-pages": "^0.11.0", - "mocha": "2.4.5" + "mocha": "2.4.5", + "uglify-js": "3.3.15" }, "scripts": { "test": "mocha test/unit", - "deploy": "node deploy.js" + "deploy": "node deploy.js", + "uglify": "uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js" }, "repository": { "type": "git", From c2ac6335a74254b6e17d00449c6f3c30201de734 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Fri, 16 Mar 2018 08:06:54 -0500 Subject: [PATCH 43/68] 2.6.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 77d8aa53..80e19655 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.6.1", + "version": "2.6.2", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From 6a6bc79410214cd23d9b35d6d4a1d11891c45e06 Mon Sep 17 00:00:00 2001 From: Urs Wolfer Date: Mon, 26 Mar 2018 14:51:08 +0200 Subject: [PATCH 44/68] Fix reading EXIF orientation when 'enableOrientation' is true (#499) EXIF orientation data got ignored because of commit 018d30c (which fixed displaying image when exif-js is not available). This only happens when 'enableOrientation' is true and you do not pass an orientation to 'bind'. This is for example the case when you want to add a button to rotate the image. You can reproduce this issue in the demo 'upload-demo' when you set 'enableOrientation' to true. --- croppie.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/croppie.js b/croppie.js index 825d50e1..8346a378 100755 --- a/croppie.js +++ b/croppie.js @@ -284,7 +284,7 @@ }; function getExifOrientation (img) { - return img.exifdata ? img.exifdata.Orientation : 1; + return img.exifdata && img.exifdata.Orientation ? num(img.exifdata.Orientation) : 1; } function drawCanvas(canvas, img, orientation) { @@ -1125,21 +1125,14 @@ var self = this, canvas = self.elements.canvas, img = self.elements.img, - ctx = canvas.getContext('2d'), - exif = _hasExif.call(self), - customOrientation = self.options.enableOrientation && customOrientation; + ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.width = img.width; canvas.height = img.height; - if (exif && !customOrientation) { - var orientation = getExifOrientation(img); - drawCanvas(canvas, img, num(orientation || 0, 10)); - } - else if (customOrientation) { - drawCanvas(canvas, img, customOrientation); - } + var orientation = self.options.enableOrientation && customOrientation || getExifOrientation(img); + drawCanvas(canvas, img, orientation); } function _getCanvas(data) { @@ -1298,7 +1291,7 @@ return parseFloat(p); }); if (self.options.useCanvas) { - _transferImageToCanvas.call(self, options.orientation || 1); + _transferImageToCanvas.call(self, options.orientation); } _updatePropertiesFromImage.call(self); _triggerUpdate.call(self); From 9aefc6e828fd7b0fea42c36e82ac9cbaff6eb860 Mon Sep 17 00:00:00 2001 From: Sarun Intaralawan Date: Tue, 22 May 2018 20:01:39 +0700 Subject: [PATCH 45/68] Fix UMD, export the whole Croppie class (#479) --- croppie.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/croppie.js b/croppie.js index 8346a378..da2b4ce9 100755 --- a/croppie.js +++ b/croppie.js @@ -13,9 +13,9 @@ factory(exports); } else { // Browser globals - factory((root.commonJsStrict = {})); + factory((root.Croppie = {})); } -}(this, function (exports) { +}(typeof self !== 'undefined' ? self : this, function (exports) { /* Polyfills */ if (typeof Promise !== 'function') { @@ -1571,5 +1571,5 @@ } }); - exports.Croppie = window.Croppie = Croppie; + exports = Croppie; })); From 39e648e49e57622511e70dba0ec4d281e9d989f2 Mon Sep 17 00:00:00 2001 From: Urs Wolfer Date: Tue, 22 May 2018 15:04:38 +0200 Subject: [PATCH 46/68] Fix linting issues (#500) --- croppie.js | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/croppie.js b/croppie.js index da2b4ce9..f8a6886b 100755 --- a/croppie.js +++ b/croppie.js @@ -177,10 +177,10 @@ /* Utilities */ function loadImage(src, doExif) { var img = new Image(); - img.style.opacity = 0; + img.style.opacity = '0'; return new Promise(function (resolve) { function _resolve() { - img.style.opacity = 1; + img.style.opacity = '1'; setTimeout(function () { resolve(img); }, 1); @@ -367,7 +367,7 @@ self.elements.preview = self.elements.canvas; } else { - self.elements.preview = self.elements.img; + self.elements.preview = img; } addClass(boundary, 'cr-boundary'); @@ -596,7 +596,7 @@ var z = this.elements.zoomer, val = fix(v, 4); - z.value = Math.max(z.min, Math.min(z.max, val)); + z.value = Math.max(parseFloat(z.min), Math.min(parseFloat(z.max), val)).toString(); } } @@ -609,7 +609,7 @@ addClass(zoomer, 'cr-slider'); zoomer.type = 'range'; zoomer.step = '0.0001'; - zoomer.value = 1; + zoomer.value = '1'; zoomer.style.display = self.options.showZoomer ? '' : 'none'; zoomer.setAttribute('aria-label', 'zoom'); @@ -815,12 +815,12 @@ DOWN_ARROW = 40; if (ev.shiftKey && (ev.keyCode === UP_ARROW || ev.keyCode === DOWN_ARROW)) { - var zoom = 0.0; + var zoom; if (ev.keyCode === UP_ARROW) { - zoom = parseFloat(self.elements.zoomer.value, 10) + parseFloat(self.elements.zoomer.step, 10) + zoom = parseFloat(self.elements.zoomer.value) + parseFloat(self.elements.zoomer.step) } else { - zoom = parseFloat(self.elements.zoomer.value, 10) - parseFloat(self.elements.zoomer.step, 10) + zoom = parseFloat(self.elements.zoomer.value) - parseFloat(self.elements.zoomer.step) } self.setZoom(zoom); } @@ -965,8 +965,7 @@ function _triggerUpdate() { var self = this, - data = self.get(), - ev; + data = self.get(); if (!_isVisible.call(self)) { return; @@ -998,7 +997,7 @@ initialZoom = 1, cssReset = {}, img = self.elements.preview, - imgData = null, + imgData, transformReset = new Transform(0, 0, initialZoom), originReset = new TransformOrigin(), isVisible = _isVisible.call(self); @@ -1150,10 +1149,7 @@ startX = 0, startY = 0, canvasWidth = data.outputWidth || width, - canvasHeight = data.outputHeight || height, - customDimensions = (data.outputWidth && data.outputHeight), - outputWidthRatio = 1, - outputHeightRatio = 1; + canvasHeight = data.outputHeight || height; canvas.width = canvasWidth; canvas.height = canvasHeight; @@ -1209,7 +1205,7 @@ function _getBlobResult(data) { var self = this; - return new Promise(function (resolve, reject) { + return new Promise(function (resolve) { _getCanvas.call(self, data).toBlob(function (blob) { resolve(blob); }, data.format, data.quality); @@ -1380,7 +1376,7 @@ data.url = self.data.url; data.backgroundColor = backgroundColor; - prom = new Promise(function (resolve, reject) { + prom = new Promise(function (resolve) { switch(resultType.toLowerCase()) { case 'rawcanvas': @@ -1411,14 +1407,12 @@ } var self = this, - canvas = self.elements.canvas, - ornt; + canvas = self.elements.canvas; self.data.orientation = getExifOffset(self.data.orientation, deg); drawCanvas(canvas, self.elements.img, self.data.orientation); _updateZoomLimits.call(self); _onZoom.call(self); - copy = null; } function _destroy() { From 4bb6c7a3bb002830766bfccce9f064fec793abd0 Mon Sep 17 00:00:00 2001 From: Muhammad Fikri Date: Tue, 22 May 2018 20:09:00 +0700 Subject: [PATCH 47/68] Fix rotate (#504) * fix _onZoom called twice when rotate * keep center point after rotate --- croppie.js | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/croppie.js b/croppie.js index f8a6886b..9e5affad 100755 --- a/croppie.js +++ b/croppie.js @@ -747,7 +747,7 @@ }; } - function _updateCenterPoint() { + function _updateCenterPoint(rotate) { var self = this, scale = self._currentZoom, data = self.elements.preview.getBoundingClientRect(), @@ -759,14 +759,27 @@ center = {}, adj = {}; - center.y = top / scale; - center.x = left / scale; + if (rotate) { + var cx = pc.x; + var cy = pc.y; + var tx = transform.x; + var ty = transform.y; - adj.y = (center.y - pc.y) * (1 - scale); - adj.x = (center.x - pc.x) * (1 - scale); + center.y = cx; + center.x = cy; + transform.y = tx; + transform.x = ty; + } + else { + center.y = top / scale; + center.x = left / scale; - transform.x -= adj.x; - transform.y -= adj.y; + adj.y = (center.y - pc.y) * (1 - scale); + adj.x = (center.x - pc.x) * (1 - scale); + + transform.x -= adj.x; + transform.y -= adj.y; + } var newCss = {}; newCss[CSS_TRANS_ORG] = center.x + 'px ' + center.y + 'px'; @@ -1411,8 +1424,8 @@ self.data.orientation = getExifOffset(self.data.orientation, deg); drawCanvas(canvas, self.elements.img, self.data.orientation); + _updateCenterPoint.call(self, true); _updateZoomLimits.call(self); - _onZoom.call(self); } function _destroy() { From 8f90ab4f65e91fa758e2dce09dab842ce5d3fc35 Mon Sep 17 00:00:00 2001 From: Frode Danielsen Date: Tue, 22 May 2018 15:10:21 +0200 Subject: [PATCH 48/68] Don't silently discard image loading errors (#511) The `bind` method returns a promise which mainly awaits loading the image URL. If an error happened within the image loader, then the `bind` method would simply log it to the console and the caller's promise handling would continue as if everything was fine. In addition, network issues or otherwise errors in the browser's loading of the image was not caught and propagated back up to the `bind` method. This implements a simple `onerror` handler for loading the image which rejects the loading promise. The `catch` handler in the `bind` method which swallowed any rejections have also been removed, which enables the caller to handle this properly on their side. --- croppie.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/croppie.js b/croppie.js index 9e5affad..f72dd081 100755 --- a/croppie.js +++ b/croppie.js @@ -178,7 +178,7 @@ function loadImage(src, doExif) { var img = new Image(); img.style.opacity = '0'; - return new Promise(function (resolve) { + return new Promise(function (resolve, reject) { function _resolve() { img.style.opacity = '1'; setTimeout(function () { @@ -201,6 +201,12 @@ _resolve(); } }; + img.onerror = function (ev) { + img.style.opacity = 1; + setTimeout(function () { + reject(ev); + }, 1); + }; img.src = src; }); } @@ -1305,8 +1311,6 @@ _updatePropertiesFromImage.call(self); _triggerUpdate.call(self); cb && cb(); - }).catch(function (err) { - console.error("Croppie:" + err); }); } From 8dc634af8189a134269b074b883ddb78ee3b190d Mon Sep 17 00:00:00 2001 From: Sarun Intaralawan Date: Wed, 23 May 2018 19:38:03 +0700 Subject: [PATCH 49/68] Fix global, AMD and CommonJS definition (#532) * #479, #470 - fix global definition * Fix AMD and CommonJS definition --- croppie.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/croppie.js b/croppie.js index f72dd081..a18e2c72 100755 --- a/croppie.js +++ b/croppie.js @@ -7,15 +7,15 @@ (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. - define(['exports'], factory); + define(factory); } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { // CommonJS - factory(exports); + module.exports = factory(); } else { // Browser globals - factory((root.Croppie = {})); + root.Croppie = factory(); } -}(typeof self !== 'undefined' ? self : this, function (exports) { +}(typeof self !== 'undefined' ? self : this, function () { /* Polyfills */ if (typeof Promise !== 'function') { @@ -1581,6 +1581,5 @@ return _destroy.call(this); } }); - - exports = Croppie; + return Croppie; })); From 959a0a162a2e2c6a1571576855831775864372eb Mon Sep 17 00:00:00 2001 From: Cassiano Montanari Date: Fri, 27 Jul 2018 10:04:02 -0300 Subject: [PATCH 50/68] Updated croppie-dart link (#538) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f906d0b3..dba7e7b7 100755 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js [Documentation](http://foliotek.github.io/Croppie#documentation) ## Related Libraries -* https://github.com/wem/croppie-dart +* https://gitlab.com/michel.werren/croppie-dart * https://github.com/allenRoyston/ngCroppie * https://github.com/lpsBetty/angular-croppie * https://github.com/dima-kov/django-croppie From f5746a61ad6577eef99ea30b39a2ce334f115b4e Mon Sep 17 00:00:00 2001 From: Jofferson Ramirez Tiquez Date: Sat, 19 Jan 2019 23:22:10 +0800 Subject: [PATCH 51/68] Update README.md (#577) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dba7e7b7..a02c016a 100755 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Download: [croppie.js](croppie.js) & [croppie.css](croppie.css) ## Adding croppie to your site -``` +```html ``` From d69eef58a2550c17f17ce04ba5f6785d7b1a6e75 Mon Sep 17 00:00:00 2001 From: Jofferson Ramirez Tiquez Date: Sat, 19 Jan 2019 23:22:27 +0800 Subject: [PATCH 52/68] Update README.md (#578) --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a02c016a..abfbe910 100755 --- a/README.md +++ b/README.md @@ -27,11 +27,11 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js [Documentation](http://foliotek.github.io/Croppie#documentation) ## Related Libraries -* https://gitlab.com/michel.werren/croppie-dart -* https://github.com/allenRoyston/ngCroppie -* https://github.com/lpsBetty/angular-croppie -* https://github.com/dima-kov/django-croppie -* https://github.com/jofftiquez/vue-croppie +* [croppie-dart](https://gitlab.com/michel.werren/croppie-dart) +* [ngCroppie](https://github.com/allenRoyston/ngCroppie) +* [angular-croppie](https://github.com/lpsBetty/angular-croppie) +* [django-croppie](https://github.com/dima-kov/django-croppie) +* [vue-croppie](https://github.com/jofftiquez/vue-croppie) ## Contributing First, thanks for contributing. This project is difficult to maintain with one person. Here's a "checklist" of things to remember when contributing to croppie. From 9857faad50ae8048a2474024edfbdaf37c9f10bc Mon Sep 17 00:00:00 2001 From: Alice Brosey Date: Sat, 19 Jan 2019 10:22:47 -0500 Subject: [PATCH 53/68] Fix docs typo (#582) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index abfbe910..9de01f9a 100755 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ If you're looking for a simple server to load the demo page, I use https://githu `uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js` #### Releasing a new version -For the most part, you shouldn't worry about these steps unless you're the one handling the release. Please don't bump the release and don't minify/uglify in a PR. That just creates merge conflicts when merging. Those steps will be peformed when the release is created. +For the most part, you shouldn't worry about these steps unless you're the one handling the release. Please don't bump the release and don't minify/uglify in a PR. That just creates merge conflicts when merging. Those steps will be performed when the release is created. 1. Bump version in croppie.js 2. Minify/Uglify 3. Commit From 018df4823fae98469139f2f1b5326c499d59a911 Mon Sep 17 00:00:00 2001 From: snstrauss Date: Sat, 19 Jan 2019 17:24:13 +0200 Subject: [PATCH 54/68] Add the option to set a minimum zoom ratio. (#583) --- croppie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppie.js b/croppie.js index a18e2c72..f7c9d801 100755 --- a/croppie.js +++ b/croppie.js @@ -1061,7 +1061,7 @@ function _updateZoomLimits (initial) { var self = this, - minZoom = 0, + minZoom = Math.max(self.options.minZoom, 0) || 0, maxZoom = self.options.maxZoom || 1.5, initialZoom, defaultInitialZoom, From 175903b128d2704c92e103c17927897ba39d32bf Mon Sep 17 00:00:00 2001 From: Zach Dennis Date: Sat, 19 Jan 2019 10:26:06 -0500 Subject: [PATCH 55/68] Resolve cropping issues when enforceBoundary is set to false (#592) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change-set ensures Croppie does not attempt to use image data outside of an image’s bounds. This also ensures that the destination x/y and width/height are scaled appropriately so the image is placed where one would expect. --- croppie.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/croppie.js b/croppie.js index f7c9d801..fa5be68d 100755 --- a/croppie.js +++ b/croppie.js @@ -1178,13 +1178,53 @@ ctx.fillRect(0, 0, canvasWidth, canvasHeight); } - if (self.options.enforceBoundary !== false) { - width = Math.min(width, self._originalImageWidth); - height = Math.min(height, self._originalImageHeight); + // By default assume we're going to draw the entire + // source image onto the destination canvas. + sx = left; + sy = top; + sWidth = width; + sHeight = height; + dx = 0; + dy = 0; + dWidth = canvasWidth; + dHeight = canvasHeight; + + // + // Do not go outside of the original image's bounds along the x-axis. + // Handle translations when projecting onto the destination canvas. + // + + // The smallest possible source x-position is 0. + if (left < 0) { + sx = 0; + dx = (Math.abs(left) / width) * canvasWidth; + } + + // The largest possible source width is the original image's width. + if (sWidth + sx > self._originalImageWidth) { + sWidth = self._originalImageWidth - sx; + dWidth = (sWidth / width) * canvasWidth; } - - // console.table({ left, right, top, bottom, canvasWidth, canvasHeight }); - ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight); + + // + // Do not go outside of the original image's bounds along the y-axis. + // + + // The smallest possible source y-position is 0. + if (top < 0) { + sy = 0; + dy = (Math.abs(top) / height) * canvasHeight; + } + + // The largest possible source height is the original image's height. + if (sHeight + sy > self._originalImageHeight) { + sHeight = self._originalImageHeight - sy; + dHeight = (sHeight / height) * canvasHeight; + } + + // console.table({ left, right, top, bottom, canvasWidth, canvasHeight, width, height, startX, startY, circle, sx, sy, dx, dy, sWidth, sHeight, dWidth, dHeight }); + + ctx.drawImage(this.elements.preview, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); if (circle) { ctx.fillStyle = '#fff'; ctx.globalCompositeOperation = 'destination-in'; From 70cdc4bddd1ee601a22790d43312b9ba47853c65 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 21 Jan 2019 09:46:33 -0600 Subject: [PATCH 56/68] 2.6.3 prep --- croppie.js | 2 +- croppie.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index fa5be68d..b7c75288 100755 --- a/croppie.js +++ b/croppie.js @@ -2,7 +2,7 @@ * Croppie * Copyright 2018 * Foliotek - * Version: 2.6.2 + * Version: 2.6.3 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/croppie.min.js b/croppie.min.js index adb8d40c..8ac96f4e 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"==typeof exports&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}(this,function(e){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],s(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void s(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,a.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,a.call(this)}function a(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}i=l("transform"),t=l("transformOrigin"),n=l("userSelect");var g={translate3d:{suffix:", 0px"},translate:{suffix:""}},w=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};w.parse=function(e){return e.style?w.parse(e.style[i]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?w.fromMatrix(e):w.fromString(e)},w.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new w(f(t[4]),f(t[5]),parseFloat(t[0]))},w.fromString=function(e){var t=e.split(") "),i=t[0].substring(q.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new w(o,r,n)},w.prototype.toString=function(){var e=g[q.globals.translate].suffix||"";return q.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var y=function(e){if(!e||!e.style[t])return this.x=0,void(this.y=0);var i=e.style[t].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function b(e){return e.exifdata?e.exifdata.Orientation:1}function x(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function C(){var e,t,o,r,a,s=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||E.call(this),this.data={},this.elements={},e=this.elements.boundary=document.createElement("div"),t=this.elements.viewport=document.createElement("div"),this.elements.img=document.createElement("img"),o=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=this.elements.img,d(e,"cr-boundary"),e.setAttribute("aria-dropeffect","none"),r=this.options.boundary.width,a=this.options.boundary.height,p(e,{width:r+(isNaN(r)?"":"px"),height:a+(isNaN(a)?"":"px")}),d(t,"cr-viewport"),s&&d(t,s),p(t,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),t.setAttribute("tabindex",0),d(this.elements.preview,"cr-image"),m(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),d(o,"cr-overlay"),this.element.appendChild(e),e.appendChild(this.elements.preview),e.appendChild(t),e.appendChild(o),d(this.element,"croppie-container"),this.options.customClass&&d(this.element,this.options.customClass),function(){var e,t,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=n.touches[0],g=n.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return L.call(s,y),void c(s.elements.zoomer)}h(d,m),f[i]=a.toString(),p(s.elements.preview,f),R.call(s),t=l,e=r}function f(){u(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[n]="",B.call(s),Y.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var t=37,l=38,u=39,c=40;if(!e.shiftKey||e.keyCode!==l&&e.keyCode!==c){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case t:return[1,0];case l:return[0,1];case u:return[-1,0];case c:return[0,-1]}}(e.keyCode);a=w.parse(s.elements.preview),document.body.style[n]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var t=e[0],r=e[1],l={};h(t,r),l[i]=a.toString(),p(s.elements.preview,l),R.call(s),document.body.style[n]="",B.call(s),Y.call(s),o=0}(d)}}else{var m=0;m=e.keyCode===l?parseFloat(s.elements.zoomer.value,10)+parseFloat(s.elements.zoomer.step,10):parseFloat(s.elements.zoomer.value,10)-parseFloat(s.elements.zoomer.step,10),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var e=this,t=e.elements.zoomerWrap=document.createElement("div"),i=e.elements.zoomer=document.createElement("input");function n(){_.call(e,{value:parseFloat(i.value),origin:new y(e.elements.preview),viewportRect:e.elements.viewport.getBoundingClientRect(),transform:w.parse(e.elements.preview)})}function o(t){var i,o;if("ctrl"===e.options.mouseWheelZoom&&!0!==t.ctrlKey)return 0;i=t.wheelDelta?t.wheelDelta/1200:t.deltaY?t.deltaY/1060:t.detail?t.detail/-60:0,o=e._currentZoom+i*e._currentZoom,t.preventDefault(),L.call(e,o),n.call(e)}d(t,"cr-slider-wrap"),d(i,"cr-slider"),i.type="range",i.step="0.0001",i.value=1,i.style.display=e.options.showZoomer?"":"none",i.setAttribute("aria-label","zoom"),e.element.appendChild(t),t.appendChild(i),e._currentZoom=1,e.elements.zoomer.addEventListener("input",n),e.elements.zoomer.addEventListener("change",n),e.options.mouseWheelZoom&&(e.elements.boundary.addEventListener("mousewheel",o),e.elements.boundary.addEventListener("DOMMouseScroll",o))}.call(this),this.options.enableResize&&function(){var e,t,i,o,r,a,s,l=this,h=document.createElement("div"),u=!1,c=50;d(h,"cr-resizer"),p(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(d(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(d(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,i=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,i=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[n]="none"}}function f(n){var a=n.pageX,s=n.pageY;if(n.preventDefault(),n.touches){var u=n.touches[0];a=u.pageX,s=u.pageY}var d=a-t,m=s-i,f=l.options.viewport.height+m,v=l.options.viewport.width+d;"v"===e&&f>=c&&f<=r?(p(h,{height:f+"px"}),l.options.boundary.height+=m,p(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,p(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=c&&v<=o&&(p(h,{width:v+"px"}),l.options.boundary.width+=d,p(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=d,p(l.elements.viewport,{width:l.options.viewport.width+"px"})),R.call(l),k.call(l),B.call(l),Y.call(l),i=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[n]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function E(){return this.options.enableExif&&window.EXIF}function L(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=j(e,4);t.value=Math.max(t.min,Math.min(t.max,i))}}function _(e){var n=this,o=e?e.transform:w.parse(n.elements.preview),r=e?e.viewportRect:n.elements.viewport.getBoundingClientRect(),a=e?e.origin:new y(n.elements.preview);function s(){var e={};e[i]=o.toString(),e[t]=a.toString(),p(n.elements.preview,e)}if(n._currentZoom=e?e.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),X.call(n),Y.call(n)}function B(){var e=this._currentZoom,n=this.elements.preview.getBoundingClientRect(),o=this.elements.viewport.getBoundingClientRect(),r=w.parse(this.elements.preview.style[i]),a=new y(this.elements.preview),s=o.top-n.top+o.height/2,l=o.left-n.left+o.width/2,h={},u={};h.y=s/e,h.x=l/e,u.y=(h.y-a.y)*(1-e),u.x=(h.x-a.x)*(1-e),r.x-=u.x,r.y-=u.y;var c={};c[t]=h.x+"px "+h.y+"px",c[i]=r.toString(),p(this.elements.preview,c)}function R(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();p(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}y.prototype.toString=function(){return this.x+"px "+this.y+"px"};var Z,z,M,I,X=(Z=R,z=500,function(){var e=this,t=arguments,i=M&&!I;clearTimeout(I),I=setTimeout(function(){I=null,M||Z.apply(e,t)},z),i&&Z.apply(e,t)});function Y(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var e,n={},o=this.elements.preview,r=new w(0,0,1),a=new y;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[i]=r.toString(),n[t]=a.toString(),n.opacity=1,p(o,n),e=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=e.width,this._originalImageHeight=e.height,this.data.orientation=b(this.elements.img),this.options.enableZoom?k.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[i]=r.toString(),p(o,n),this.data.points.length?function(e){if(4!==e.length)throw"Croppie - Invalid number of points supplied: "+e;var n=e[2]-e[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=e[1],h=e[0],u=-1*e[1]+a.top,c=-1*e[0]+a.left,d={};d[t]=h+"px "+l+"px",d[i]=new w(c,u,s).toString(),p(this.elements.preview,d),L.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=t.left-n.left,r=t.top-n.top,a=o-(e.width-t.width)/2,s=r-(e.height-t.height)/2,l=new w(a,s,this._currentZoom);p(this.elements.preview,i,l.toString())}.call(this),B.call(this),R.call(this))}function k(e){var t,i,n,o,r=0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),u=v(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/u.width,o=p.height/u.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=j(r,4),s.max=j(a,4),!e&&(ls.max)?L.call(this,lh?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;a.data.points=[u,c,p,d]}a.data.points=s.map(function(e){return parseFloat(e)}),a.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img,n=t.getContext("2d"),o=E.call(this);e=this.options.enableOrientation&&e,n.clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,o&&!e?x(t,i,f(b(i)||0)):e&&x(t,i,e)}.call(a,e.orientation||1),W.call(a),Y.call(a),t&&t()}).catch(function(e){console.error("Croppie:"+e)})}function j(e,t){return parseFloat(e).toFixed(t||0)}function H(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[j(i),j(n),j(a),j(s)],zoom:l,orientation:this.data.orientation}}var N={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function P(e){var t=this,i=H.call(t),n=h(u(N),u(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,l=n.backgroundColor,c="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=c,i.url=t.data.url,i.backgroundColor=l,new Promise(function(e,n){switch(o.toLowerCase()){case"rawcanvas":e(A.call(t,i));break;case"canvas":case"base64":e(function(e){return A.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i,n){A.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return d(i,"croppie-result"),i.appendChild(n),p(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,p(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function D(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,r,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=a.indexOf(t)>-1?a:s,o=n.indexOf(t),r=i/90%n.length,n[(n.length+o+r%n.length)%n.length]),x(l,this.elements.img,this.data.orientation),k.call(this),_.call(this),copy=null}if(window.jQuery){var T=window.jQuery;T.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=T(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=T(this).data("croppie");if(i){var n=i[e];if(!T.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&T(this).removeData("croppie")}})}return this.each(function(){var t=new q(this,e);t.$=T,T(this).data("croppie",t)})}}function q(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=h(u(q.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;d(i,"cr-original-image"),m(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(C.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,O.call(this,o)}}q.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},q.globals={translate:"translate3d"},h(q.prototype,{bind:function(e,t){return O.call(this,e,t)},get:function(){var e=H.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return P.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){L.call(this,e),c(this.elements.zoomer)},rotate:function(e){D.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),e.Croppie=window.Croppie=q}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=t():e.Croppie=t()}("undefined"!=typeof self?self:this,function(){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],a(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void a(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,s.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,s.call(this)}function s(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function a(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,s){try{if(s&&("object"==typeof s||"function"==typeof s)){var a=s.then;if("function"==typeof a)return void a.call(s,function(e){n(r,e)},i)}e[r]=s,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),s=0;s=5){var r=i;i=n,n=r}return{width:i,height:n}}t=a("transform"),e=a("transformOrigin"),i=a("userSelect");var v={translate3d:{suffix:", 0px"},translate:{suffix:""}},g=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};g.parse=function(e){return e.style?g.parse(e.style[t]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?g.fromMatrix(e):g.fromString(e)},g.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new g(m(t[4]),m(t[5]),parseFloat(t[0]))},g.fromString=function(e){var t=e.split(") "),i=t[0].substring(T.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new g(o,r,n)},g.prototype.toString=function(){var e=v[T.globals.translate].suffix||"";return T.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var w=function(t){if(!t||!t.style[e])return this.x=0,void(this.y=0);var i=t.style[e].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function y(e){return e.exifdata&&e.exifdata.Orientation?m(e.exifdata.Orientation):1}function b(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function x(){var n,o,r,s,a,l,h=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||C.call(this),this.data={},this.elements={},n=this.elements.boundary=document.createElement("div"),r=this.elements.viewport=document.createElement("div"),o=this.elements.img=document.createElement("img"),s=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=o,p(n,"cr-boundary"),n.setAttribute("aria-dropeffect","none"),a=this.options.boundary.width,l=this.options.boundary.height,c(n,{width:a+(isNaN(a)?"":"px"),height:l+(isNaN(l)?"":"px")}),p(r,"cr-viewport"),h&&p(r,h),c(r,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),r.setAttribute("tabindex",0),p(this.elements.preview,"cr-image"),d(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),p(s,"cr-overlay"),this.element.appendChild(n),n.appendChild(this.elements.preview),n.appendChild(r),n.appendChild(s),p(this.element,"croppie-container"),this.options.customClass&&p(this.element,this.options.customClass),function(){var e,n,o,r,s,a=this,l=!1;function h(e,t){var i=a.elements.preview.getBoundingClientRect(),n=s.y+t,o=s.x+e;a.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=i.touches[0],g=i.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/a._currentZoom);var y=w/o;return E.call(a,y),void u(a.elements.zoomer)}h(d,m),f[t]=s.toString(),c(a.elements.preview,f),_.call(a),n=l,e=r}function f(){p(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[i]="",L.call(a),H.call(a),o=0}a.elements.overlay.addEventListener("mousedown",d),a.elements.viewport.addEventListener("keydown",function(e){var n=37,l=38,u=39,p=40;if(!e.shiftKey||e.keyCode!==l&&e.keyCode!==p){if(a.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case n:return[1,0];case l:return[0,1];case u:return[-1,0];case p:return[0,-1]}}(e.keyCode);s=g.parse(a.elements.preview),document.body.style[i]="none",r=a.elements.viewport.getBoundingClientRect(),function(e){var n=e[0],r=e[1],l={};h(n,r),l[t]=s.toString(),c(a.elements.preview,l),_.call(a),document.body.style[i]="",L.call(a),H.call(a),o=0}(d)}}else{var m;m=e.keyCode===l?parseFloat(a.elements.zoomer.value)+parseFloat(a.elements.zoomer.step):parseFloat(a.elements.zoomer.value)-parseFloat(a.elements.zoomer.step),a.setZoom(m)}}),a.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var i=this,n=i.elements.zoomerWrap=document.createElement("div"),o=i.elements.zoomer=document.createElement("input");function r(){(function(i){var n=this,o=i?i.transform:g.parse(n.elements.preview),r=i?i.viewportRect:n.elements.viewport.getBoundingClientRect(),s=i?i.origin:new w(n.elements.preview);function a(){var i={};i[t]=o.toString(),i[e]=s.toString(),c(n.elements.preview,i)}if(n._currentZoom=i?i.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),a(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,s=this.elements.preview.getBoundingClientRect(),a=s.width,l=s.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(a*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:a*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(s.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(s.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(s.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(s.y=u.maxY,o.y=h.minY)}a(),z.call(n),H.call(n)}).call(i,{value:parseFloat(o.value),origin:new w(i.elements.preview),viewportRect:i.elements.viewport.getBoundingClientRect(),transform:g.parse(i.elements.preview)})}function s(e){var t,n;if("ctrl"===i.options.mouseWheelZoom&&!0!==e.ctrlKey)return 0;t=e.wheelDelta?e.wheelDelta/1200:e.deltaY?e.deltaY/1060:e.detail?e.detail/-60:0,n=i._currentZoom+t*i._currentZoom,e.preventDefault(),E.call(i,n),r.call(i)}p(n,"cr-slider-wrap"),p(o,"cr-slider"),o.type="range",o.step="0.0001",o.value="1",o.style.display=i.options.showZoomer?"":"none",o.setAttribute("aria-label","zoom"),i.element.appendChild(n),n.appendChild(o),i._currentZoom=1,i.elements.zoomer.addEventListener("input",r),i.elements.zoomer.addEventListener("change",r),i.options.mouseWheelZoom&&(i.elements.boundary.addEventListener("mousewheel",s),i.elements.boundary.addEventListener("DOMMouseScroll",s))}.call(this),this.options.enableResize&&function(){var e,t,n,o,r,s,a,l=this,h=document.createElement("div"),u=!1,d=50;p(h,"cr-resizer"),c(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(p(s=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(s));this.options.resizeControls.width&&(p(a=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(a));function m(s){if((void 0===s.button||0===s.button)&&(s.preventDefault(),!u)){var a=l.elements.overlay.getBoundingClientRect();if(u=!0,t=s.pageX,n=s.pageY,e=-1!==s.currentTarget.className.indexOf("vertical")?"v":"h",o=a.width,r=a.height,s.touches){var h=s.touches[0];t=h.pageX,n=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[i]="none"}}function f(i){var s=i.pageX,a=i.pageY;if(i.preventDefault(),i.touches){var u=i.touches[0];s=u.pageX,a=u.pageY}var p=s-t,m=a-n,f=l.options.viewport.height+m,v=l.options.viewport.width+p;"v"===e&&f>=d&&f<=r?(c(h,{height:f+"px"}),l.options.boundary.height+=m,c(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,c(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=d&&v<=o&&(c(h,{width:v+"px"}),l.options.boundary.width+=p,c(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=p,c(l.elements.viewport,{width:l.options.viewport.width+"px"})),_.call(l),F.call(l),L.call(l),H.call(l),n=a,t=s}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[i]=""}s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function C(){return this.options.enableExif&&window.EXIF}function E(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(parseFloat(t.min),Math.min(parseFloat(t.max),i)).toString()}}function L(i){var n=this._currentZoom,o=this.elements.preview.getBoundingClientRect(),r=this.elements.viewport.getBoundingClientRect(),s=g.parse(this.elements.preview.style[t]),a=new w(this.elements.preview),l=r.top-o.top+r.height/2,h=r.left-o.left+r.width/2,u={},p={};if(i){var d=a.x,m=a.y,f=s.x,v=s.y;u.y=d,u.x=m,s.y=f,s.x=v}else u.y=l/n,u.x=h/n,p.y=(u.y-a.y)*(1-n),p.x=(u.x-a.x)*(1-n),s.x-=p.x,s.y-=p.y;var y={};y[e]=u.x+"px "+u.y+"px",y[t]=s.toString(),c(this.elements.preview,y)}function _(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();c(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}w.prototype.toString=function(){return this.x+"px "+this.y+"px"};var R,B,Z,W,z=(R=_,B=500,function(){var e=this,t=arguments,i=Z&&!W;clearTimeout(W),W=setTimeout(function(){W=null,Z||R.apply(e,t)},B),i&&R.apply(e,t)});function H(){var e,t=this.get();M.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function M(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function I(){var i,n={},o=this.elements.preview,r=new g(0,0,1),s=new w;M.call(this)&&!this.data.bound&&(this.data.bound=!0,n[t]=r.toString(),n[e]=s.toString(),n.opacity=1,c(o,n),i=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=i.width,this._originalImageHeight=i.height,this.data.orientation=y(this.elements.img),this.options.enableZoom?F.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[t]=r.toString(),c(o,n),this.data.points.length?function(i){if(4!==i.length)throw"Croppie - Invalid number of points supplied: "+i;var n=i[2]-i[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),s={left:o.left-r.left,top:o.top-r.top},a=o.width/n,l=i[1],h=i[0],u=-1*i[1]+s.top,p=-1*i[0]+s.left,d={};d[e]=h+"px "+l+"px",d[t]=new g(p,u,a).toString(),c(this.elements.preview,d),E.call(this,a),this._currentZoom=a}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=i.left-n.left,r=i.top-n.top,s=o-(e.width-i.width)/2,a=r-(e.height-i.height)/2,l=new g(s,a,this._currentZoom);c(this.elements.preview,t,l.toString())}.call(this),L.call(this),_.call(this))}function F(e){var t,i,n,o,r=Math.max(this.options.minZoom,0)||0,s=this.options.maxZoom||1.5,a=this.elements.zoomer,l=parseFloat(a.value),h=this.elements.boundary.getBoundingClientRect(),c=f(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/c.width,o=p.height/c.height,r=Math.max(n,o)),r>=s&&(s=r+1),a.min=O(r,4),a.max=O(s,4),!e&&(la.max)?E.call(this,lthis._originalImageWidth&&(sWidth=this._originalImageWidth-sx,dWidth=sWidth/o*h),n<0&&(sy=0,dy=Math.abs(n)/r*u),sHeight+sy>this._originalImageHeight&&(sHeight=this._originalImageHeight-sy,dHeight=sHeight/r*u),l.drawImage(this.elements.preview,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight),s&&(l.fillStyle="#fff",l.globalCompositeOperation="destination-in",l.beginPath(),l.arc(a.width/2,a.height/2,a.width/2,0,2*Math.PI,!0),l.closePath(),l.fill()),a}function Y(e,t){var i,n,o,r,s=this,a=[],l=null,h=C.call(s);if("string"==typeof e)i=e,e={};else if(Array.isArray(e))a=e.slice();else{if(void 0===e&&s.data.url)return I.call(s),H.call(s),null;i=e.url,a=e.points||[],l=void 0===e.zoom?null:e.zoom}return s.data.bound=!1,s.data.url=i||s.data.url,s.data.boundZoom=l,(n=i,o=h,r=new Image,r.style.opacity="0",new Promise(function(e,t){function i(){r.style.opacity="1",setTimeout(function(){e(r)},1)}r.removeAttribute("crossOrigin"),n.match(/^https?:\/\/|^\/\//)&&r.setAttribute("crossOrigin","anonymous"),r.onload=function(){o?EXIF.getData(r,function(){i()}):i()},r.onerror=function(e){r.style.opacity=1,setTimeout(function(){t(e)},1)},r.src=n})).then(function(i){if(function(e){this.elements.img.parentNode&&(Array.prototype.forEach.call(this.elements.img.classList,function(t){e.classList.add(t)}),this.elements.img.parentNode.replaceChild(e,this.elements.img),this.elements.preview=e),this.elements.img=e}.call(s,i),a.length)s.options.relative&&(a=[a[0]*i.naturalWidth/100,a[1]*i.naturalHeight/100,a[2]*i.naturalWidth/100,a[3]*i.naturalHeight/100]);else{var n,o,r=f(i),l=s.elements.viewport.getBoundingClientRect(),h=l.width/l.height;r.width/r.height>h?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;s.data.points=[u,c,p,d]}s.data.points=a.map(function(e){return parseFloat(e)}),s.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img;t.getContext("2d").clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,b(t,i,this.options.enableOrientation&&e||y(i))}.call(s,e.orientation),I.call(s),H.call(s),t&&t()})}function O(e,t){return parseFloat(e).toFixed(t||0)}function k(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,s=i+this.elements.viewport.offsetWidth+o,a=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),s=Math.max(h,s/l),a=Math.max(h,a/l),{points:[O(i),O(n),O(s),O(a)],zoom:l,orientation:this.data.orientation}}var A={type:"canvas",format:"png",quality:1},j=["jpeg","webp","png"];function N(e){var t=this,i=k.call(t),n=l(h(A),h(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",s=n.format,a=n.quality,u=n.backgroundColor,d="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),j.indexOf(s)>-1&&(i.format="image/"+s,i.quality=a),i.circle=d,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e){switch(o.toLowerCase()){case"rawcanvas":e(X.call(t,i));break;case"canvas":case"base64":e(function(e){return X.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i){X.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return p(i,"croppie-result"),i.appendChild(n),c(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,c(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function S(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,a,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=r.indexOf(t)>-1?r:s,o=n.indexOf(t),a=i/90%n.length,n[(n.length+o+a%n.length)%n.length]),b(l,this.elements.img,this.data.orientation),L.call(this,!0),F.call(this)}if(window.jQuery){var P=window.jQuery;P.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=P(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=P(this).data("croppie");if(i){var n=i[e];if(!P.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&P(this).removeData("croppie")}})}return this.each(function(){var t=new T(this,e);t.$=P,P(this).data("croppie",t)})}}function T(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=l(h(T.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;p(i,"cr-original-image"),d(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(x.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,Y.call(this,o)}}return T.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},T.globals={translate:"translate3d"},l(T.prototype,{bind:function(e,t){return Y.call(this,e,t)},get:function(){var e=k.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return N.call(this,e)},refresh:function(){return function(){I.call(this)}.call(this)},setZoom:function(e){E.call(this,e),u(this.elements.zoomer)},rotate:function(e){S.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),T}); \ No newline at end of file From 165ecd1366098233d6f1c680aa9f27ddb1373022 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Mon, 21 Jan 2019 09:47:10 -0600 Subject: [PATCH 57/68] 2.6.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 80e19655..c2549ee1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.6.2", + "version": "2.6.3", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From 680db73a21c43fbaef26bd3d4fbb2dbdb63c2341 Mon Sep 17 00:00:00 2001 From: Dobromir Hristov Date: Thu, 24 Jan 2019 19:16:23 +0200 Subject: [PATCH 58/68] Fix: Fix issue with unassigned variable (#617) Fixes an issue with variables not being assigned. The issue has come from #592 --- croppie.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/croppie.js b/croppie.js index b7c75288..eeeb3df3 100755 --- a/croppie.js +++ b/croppie.js @@ -1180,14 +1180,14 @@ // By default assume we're going to draw the entire // source image onto the destination canvas. - sx = left; - sy = top; - sWidth = width; - sHeight = height; - dx = 0; - dy = 0; - dWidth = canvasWidth; - dHeight = canvasHeight; + var sx = left, + sy = top, + sWidth = width, + sHeight = height, + dx = 0, + dy = 0, + dWidth = canvasWidth, + dHeight = canvasHeight; // // Do not go outside of the original image's bounds along the x-axis. From b442a7dfc6169b96e3e10960e6ef3d518a7fdea2 Mon Sep 17 00:00:00 2001 From: Andre Seibert Date: Fri, 15 Mar 2019 15:48:05 -0500 Subject: [PATCH 59/68] 2.6.4 prep --- croppie.js | 4 ++-- croppie.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/croppie.js b/croppie.js index eeeb3df3..4e4f0233 100755 --- a/croppie.js +++ b/croppie.js @@ -1,8 +1,8 @@ /************************* * Croppie - * Copyright 2018 + * Copyright 2019 * Foliotek - * Version: 2.6.3 + * Version: 2.6.4 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/croppie.min.js b/croppie.min.js index 8ac96f4e..1223fd23 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=t():e.Croppie=t()}("undefined"!=typeof self?self:this,function(){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],a(e,t(o,this),t(r,this))}function n(e){var t=this;return null===this._state?void this._deferreds.push(e):void h(function(){var i=t._state?e.onFulfilled:e.onRejected;if(null!==i){var n;try{n=i(t._value)}catch(t){return void e.reject(t)}e.resolve(n)}else(t._state?e.resolve:e.reject)(t._value)})}function o(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var i=e.then;if("function"==typeof i)return void a(t(i,e),t(o,this),t(r,this))}this._state=!0,this._value=e,s.call(this)}catch(e){r.call(this,e)}}function r(e){this._state=!1,this._value=e,s.call(this)}function s(){for(var e=0,t=this._deferreds.length;t>e;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function a(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,s){try{if(s&&("object"==typeof s||"function"==typeof s)){var a=s.then;if("function"==typeof a)return void a.call(s,function(e){n(r,e)},i)}e[r]=s,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),s=0;s=5){var r=i;i=n,n=r}return{width:i,height:n}}t=a("transform"),e=a("transformOrigin"),i=a("userSelect");var v={translate3d:{suffix:", 0px"},translate:{suffix:""}},g=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};g.parse=function(e){return e.style?g.parse(e.style[t]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?g.fromMatrix(e):g.fromString(e)},g.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new g(m(t[4]),m(t[5]),parseFloat(t[0]))},g.fromString=function(e){var t=e.split(") "),i=t[0].substring(T.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new g(o,r,n)},g.prototype.toString=function(){var e=v[T.globals.translate].suffix||"";return T.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var w=function(t){if(!t||!t.style[e])return this.x=0,void(this.y=0);var i=t.style[e].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function y(e){return e.exifdata&&e.exifdata.Orientation?m(e.exifdata.Orientation):1}function b(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function x(){var n,o,r,s,a,l,h=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||C.call(this),this.data={},this.elements={},n=this.elements.boundary=document.createElement("div"),r=this.elements.viewport=document.createElement("div"),o=this.elements.img=document.createElement("img"),s=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=o,p(n,"cr-boundary"),n.setAttribute("aria-dropeffect","none"),a=this.options.boundary.width,l=this.options.boundary.height,c(n,{width:a+(isNaN(a)?"":"px"),height:l+(isNaN(l)?"":"px")}),p(r,"cr-viewport"),h&&p(r,h),c(r,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),r.setAttribute("tabindex",0),p(this.elements.preview,"cr-image"),d(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),p(s,"cr-overlay"),this.element.appendChild(n),n.appendChild(this.elements.preview),n.appendChild(r),n.appendChild(s),p(this.element,"croppie-container"),this.options.customClass&&p(this.element,this.options.customClass),function(){var e,n,o,r,s,a=this,l=!1;function h(e,t){var i=a.elements.preview.getBoundingClientRect(),n=s.y+t,o=s.x+e;a.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=i.touches[0],g=i.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/a._currentZoom);var y=w/o;return E.call(a,y),void u(a.elements.zoomer)}h(d,m),f[t]=s.toString(),c(a.elements.preview,f),_.call(a),n=l,e=r}function f(){p(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[i]="",L.call(a),H.call(a),o=0}a.elements.overlay.addEventListener("mousedown",d),a.elements.viewport.addEventListener("keydown",function(e){var n=37,l=38,u=39,p=40;if(!e.shiftKey||e.keyCode!==l&&e.keyCode!==p){if(a.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case n:return[1,0];case l:return[0,1];case u:return[-1,0];case p:return[0,-1]}}(e.keyCode);s=g.parse(a.elements.preview),document.body.style[i]="none",r=a.elements.viewport.getBoundingClientRect(),function(e){var n=e[0],r=e[1],l={};h(n,r),l[t]=s.toString(),c(a.elements.preview,l),_.call(a),document.body.style[i]="",L.call(a),H.call(a),o=0}(d)}}else{var m;m=e.keyCode===l?parseFloat(a.elements.zoomer.value)+parseFloat(a.elements.zoomer.step):parseFloat(a.elements.zoomer.value)-parseFloat(a.elements.zoomer.step),a.setZoom(m)}}),a.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var i=this,n=i.elements.zoomerWrap=document.createElement("div"),o=i.elements.zoomer=document.createElement("input");function r(){(function(i){var n=this,o=i?i.transform:g.parse(n.elements.preview),r=i?i.viewportRect:n.elements.viewport.getBoundingClientRect(),s=i?i.origin:new w(n.elements.preview);function a(){var i={};i[t]=o.toString(),i[e]=s.toString(),c(n.elements.preview,i)}if(n._currentZoom=i?i.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),a(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,s=this.elements.preview.getBoundingClientRect(),a=s.width,l=s.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(a*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:a*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(s.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(s.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(s.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(s.y=u.maxY,o.y=h.minY)}a(),z.call(n),H.call(n)}).call(i,{value:parseFloat(o.value),origin:new w(i.elements.preview),viewportRect:i.elements.viewport.getBoundingClientRect(),transform:g.parse(i.elements.preview)})}function s(e){var t,n;if("ctrl"===i.options.mouseWheelZoom&&!0!==e.ctrlKey)return 0;t=e.wheelDelta?e.wheelDelta/1200:e.deltaY?e.deltaY/1060:e.detail?e.detail/-60:0,n=i._currentZoom+t*i._currentZoom,e.preventDefault(),E.call(i,n),r.call(i)}p(n,"cr-slider-wrap"),p(o,"cr-slider"),o.type="range",o.step="0.0001",o.value="1",o.style.display=i.options.showZoomer?"":"none",o.setAttribute("aria-label","zoom"),i.element.appendChild(n),n.appendChild(o),i._currentZoom=1,i.elements.zoomer.addEventListener("input",r),i.elements.zoomer.addEventListener("change",r),i.options.mouseWheelZoom&&(i.elements.boundary.addEventListener("mousewheel",s),i.elements.boundary.addEventListener("DOMMouseScroll",s))}.call(this),this.options.enableResize&&function(){var e,t,n,o,r,s,a,l=this,h=document.createElement("div"),u=!1,d=50;p(h,"cr-resizer"),c(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(p(s=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(s));this.options.resizeControls.width&&(p(a=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(a));function m(s){if((void 0===s.button||0===s.button)&&(s.preventDefault(),!u)){var a=l.elements.overlay.getBoundingClientRect();if(u=!0,t=s.pageX,n=s.pageY,e=-1!==s.currentTarget.className.indexOf("vertical")?"v":"h",o=a.width,r=a.height,s.touches){var h=s.touches[0];t=h.pageX,n=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[i]="none"}}function f(i){var s=i.pageX,a=i.pageY;if(i.preventDefault(),i.touches){var u=i.touches[0];s=u.pageX,a=u.pageY}var p=s-t,m=a-n,f=l.options.viewport.height+m,v=l.options.viewport.width+p;"v"===e&&f>=d&&f<=r?(c(h,{height:f+"px"}),l.options.boundary.height+=m,c(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,c(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=d&&v<=o&&(c(h,{width:v+"px"}),l.options.boundary.width+=p,c(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=p,c(l.elements.viewport,{width:l.options.viewport.width+"px"})),_.call(l),F.call(l),L.call(l),H.call(l),n=a,t=s}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[i]=""}s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function C(){return this.options.enableExif&&window.EXIF}function E(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(parseFloat(t.min),Math.min(parseFloat(t.max),i)).toString()}}function L(i){var n=this._currentZoom,o=this.elements.preview.getBoundingClientRect(),r=this.elements.viewport.getBoundingClientRect(),s=g.parse(this.elements.preview.style[t]),a=new w(this.elements.preview),l=r.top-o.top+r.height/2,h=r.left-o.left+r.width/2,u={},p={};if(i){var d=a.x,m=a.y,f=s.x,v=s.y;u.y=d,u.x=m,s.y=f,s.x=v}else u.y=l/n,u.x=h/n,p.y=(u.y-a.y)*(1-n),p.x=(u.x-a.x)*(1-n),s.x-=p.x,s.y-=p.y;var y={};y[e]=u.x+"px "+u.y+"px",y[t]=s.toString(),c(this.elements.preview,y)}function _(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();c(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}w.prototype.toString=function(){return this.x+"px "+this.y+"px"};var R,B,Z,W,z=(R=_,B=500,function(){var e=this,t=arguments,i=Z&&!W;clearTimeout(W),W=setTimeout(function(){W=null,Z||R.apply(e,t)},B),i&&R.apply(e,t)});function H(){var e,t=this.get();M.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function M(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function I(){var i,n={},o=this.elements.preview,r=new g(0,0,1),s=new w;M.call(this)&&!this.data.bound&&(this.data.bound=!0,n[t]=r.toString(),n[e]=s.toString(),n.opacity=1,c(o,n),i=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=i.width,this._originalImageHeight=i.height,this.data.orientation=y(this.elements.img),this.options.enableZoom?F.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[t]=r.toString(),c(o,n),this.data.points.length?function(i){if(4!==i.length)throw"Croppie - Invalid number of points supplied: "+i;var n=i[2]-i[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),s={left:o.left-r.left,top:o.top-r.top},a=o.width/n,l=i[1],h=i[0],u=-1*i[1]+s.top,p=-1*i[0]+s.left,d={};d[e]=h+"px "+l+"px",d[t]=new g(p,u,a).toString(),c(this.elements.preview,d),E.call(this,a),this._currentZoom=a}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=i.left-n.left,r=i.top-n.top,s=o-(e.width-i.width)/2,a=r-(e.height-i.height)/2,l=new g(s,a,this._currentZoom);c(this.elements.preview,t,l.toString())}.call(this),L.call(this),_.call(this))}function F(e){var t,i,n,o,r=Math.max(this.options.minZoom,0)||0,s=this.options.maxZoom||1.5,a=this.elements.zoomer,l=parseFloat(a.value),h=this.elements.boundary.getBoundingClientRect(),c=f(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/c.width,o=p.height/c.height,r=Math.max(n,o)),r>=s&&(s=r+1),a.min=O(r,4),a.max=O(s,4),!e&&(la.max)?E.call(this,lthis._originalImageWidth&&(sWidth=this._originalImageWidth-sx,dWidth=sWidth/o*h),n<0&&(sy=0,dy=Math.abs(n)/r*u),sHeight+sy>this._originalImageHeight&&(sHeight=this._originalImageHeight-sy,dHeight=sHeight/r*u),l.drawImage(this.elements.preview,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight),s&&(l.fillStyle="#fff",l.globalCompositeOperation="destination-in",l.beginPath(),l.arc(a.width/2,a.height/2,a.width/2,0,2*Math.PI,!0),l.closePath(),l.fill()),a}function Y(e,t){var i,n,o,r,s=this,a=[],l=null,h=C.call(s);if("string"==typeof e)i=e,e={};else if(Array.isArray(e))a=e.slice();else{if(void 0===e&&s.data.url)return I.call(s),H.call(s),null;i=e.url,a=e.points||[],l=void 0===e.zoom?null:e.zoom}return s.data.bound=!1,s.data.url=i||s.data.url,s.data.boundZoom=l,(n=i,o=h,r=new Image,r.style.opacity="0",new Promise(function(e,t){function i(){r.style.opacity="1",setTimeout(function(){e(r)},1)}r.removeAttribute("crossOrigin"),n.match(/^https?:\/\/|^\/\//)&&r.setAttribute("crossOrigin","anonymous"),r.onload=function(){o?EXIF.getData(r,function(){i()}):i()},r.onerror=function(e){r.style.opacity=1,setTimeout(function(){t(e)},1)},r.src=n})).then(function(i){if(function(e){this.elements.img.parentNode&&(Array.prototype.forEach.call(this.elements.img.classList,function(t){e.classList.add(t)}),this.elements.img.parentNode.replaceChild(e,this.elements.img),this.elements.preview=e),this.elements.img=e}.call(s,i),a.length)s.options.relative&&(a=[a[0]*i.naturalWidth/100,a[1]*i.naturalHeight/100,a[2]*i.naturalWidth/100,a[3]*i.naturalHeight/100]);else{var n,o,r=f(i),l=s.elements.viewport.getBoundingClientRect(),h=l.width/l.height;r.width/r.height>h?n=(o=r.height)*h:(n=r.width,o=r.height/h);var u=(r.width-n)/2,c=(r.height-o)/2,p=u+n,d=c+o;s.data.points=[u,c,p,d]}s.data.points=a.map(function(e){return parseFloat(e)}),s.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img;t.getContext("2d").clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,b(t,i,this.options.enableOrientation&&e||y(i))}.call(s,e.orientation),I.call(s),H.call(s),t&&t()})}function O(e,t){return parseFloat(e).toFixed(t||0)}function k(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,s=i+this.elements.viewport.offsetWidth+o,a=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),s=Math.max(h,s/l),a=Math.max(h,a/l),{points:[O(i),O(n),O(s),O(a)],zoom:l,orientation:this.data.orientation}}var A={type:"canvas",format:"png",quality:1},j=["jpeg","webp","png"];function N(e){var t=this,i=k.call(t),n=l(h(A),h(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",s=n.format,a=n.quality,u=n.backgroundColor,d="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),j.indexOf(s)>-1&&(i.format="image/"+s,i.quality=a),i.circle=d,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e){switch(o.toLowerCase()){case"rawcanvas":e(X.call(t,i));break;case"canvas":case"base64":e(function(e){return X.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i){X.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return p(i,"croppie-result"),i.appendChild(n),c(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,c(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function S(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,a,l=this.elements.canvas;this.data.orientation=(t=this.data.orientation,i=e,n=r.indexOf(t)>-1?r:s,o=n.indexOf(t),a=i/90%n.length,n[(n.length+o+a%n.length)%n.length]),b(l,this.elements.img,this.data.orientation),L.call(this,!0),F.call(this)}if(window.jQuery){var P=window.jQuery;P.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=P(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=P(this).data("croppie");if(i){var n=i[e];if(!P.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&P(this).removeData("croppie")}})}return this.each(function(){var t=new T(this,e);t.$=P,P(this).data("croppie",t)})}}function T(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=l(h(T.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;p(i,"cr-original-image"),d(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(x.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,Y.call(this,o)}}return T.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},T.globals={translate:"translate3d"},l(T.prototype,{bind:function(e,t){return Y.call(this,e,t)},get:function(){var e=k.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return N.call(this,e)},refresh:function(){return function(){I.call(this)}.call(this)},setZoom:function(e){E.call(this,e),u(this.elements.zoomer)},rotate:function(e){S.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),T}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=t():e.Croppie=t()}("undefined"!=typeof self?self:this,function(){"function"!=typeof Promise&&function(e){function n(e,t){return function(){e.apply(t,arguments)}}function r(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],u(e,n(i,this),n(o,this))}function a(n){var i=this;return null===this._state?void this._deferreds.push(n):void c(function(){var e=i._state?n.onFulfilled:n.onRejected;if(null!==e){var t;try{t=e(i._value)}catch(e){return void n.reject(e)}n.resolve(t)}else(i._state?n.resolve:n.reject)(i._value)})}function i(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var t=e.then;if("function"==typeof t)return void u(n(t,e),n(i,this),n(o,this))}this._state=!0,this._value=e,s.call(this)}catch(e){o.call(this,e)}}function o(e){this._state=!1,this._value=e,s.call(this)}function s(){for(var e=0,t=this._deferreds.length;en.top+t&&l.bottomn.left+e&&l.right=s.maxX&&(o.x=l.minX,n.x=s.maxX),n.x<=s.minX&&(o.x=l.maxX,n.x=s.minX),n.y>=s.maxY&&(o.y=l.minY,n.y=s.maxY),n.y<=s.minY&&(o.y=l.maxY,n.y=s.minY)}r(),I.call(t),F.call(t)}).call(i,{value:parseFloat(t.value),origin:new L(i.elements.preview),viewportRect:i.elements.viewport.getBoundingClientRect(),transform:E.parse(i.elements.preview)})}function n(e){var t,n;if("ctrl"===i.options.mouseWheelZoom&&!0!==e.ctrlKey)return 0;t=e.wheelDelta?e.wheelDelta/1200:e.deltaY?e.deltaY/1060:e.detail?e.detail/-60:0,n=i._currentZoom+t*i._currentZoom,e.preventDefault(),B.call(i,n),o.call(i)}x(e,"cr-slider-wrap"),x(t,"cr-slider"),t.type="range",t.step="0.0001",t.value="1",t.style.display=i.options.showZoomer?"":"none",t.setAttribute("aria-label","zoom"),i.element.appendChild(e),e.appendChild(t),i._currentZoom=1,i.elements.zoomer.addEventListener("input",o),i.elements.zoomer.addEventListener("change",o),i.options.mouseWheelZoom&&(i.elements.boundary.addEventListener("mousewheel",n),i.elements.boundary.addEventListener("DOMMouseScroll",n))}.call(a),a.options.enableResize&&function(){var l,u,c,h,p,e,t,d=this,m=document.createElement("div"),i=!1,f=50;x(m,"cr-resizer"),b(m,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(x(e=document.createElement("div"),"cr-resizer-vertical"),m.appendChild(e));this.options.resizeControls.width&&(x(t=document.createElement("div"),"cr-resizer-horisontal"),m.appendChild(t));function n(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!i)){var t=d.elements.overlay.getBoundingClientRect();if(i=!0,u=e.pageX,c=e.pageY,l=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",h=t.width,p=t.height,e.touches){var n=e.touches[0];u=n.pageX,c=n.pageY}window.addEventListener("mousemove",o),window.addEventListener("touchmove",o),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),document.body.style[w]="none"}}function o(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var i=e.touches[0];t=i.pageX,n=i.pageY}var o=t-u,r=n-c,a=d.options.viewport.height+r,s=d.options.viewport.width+o;"v"===l&&f<=a&&a<=p?(b(m,{height:a+"px"}),d.options.boundary.height+=r,b(d.elements.boundary,{height:d.options.boundary.height+"px"}),d.options.viewport.height+=r,b(d.elements.viewport,{height:d.options.viewport.height+"px"})):"h"===l&&f<=s&&s<=h&&(b(m,{width:s+"px"}),d.options.boundary.width+=o,b(d.elements.boundary,{width:d.options.boundary.width+"px"}),d.options.viewport.width+=o,b(d.elements.viewport,{width:d.options.viewport.width+"px"})),z.call(d),W.call(d),Z.call(d),F.call(d),c=n,u=t}function r(){i=!1,window.removeEventListener("mousemove",o),window.removeEventListener("touchmove",o),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),document.body.style[w]=""}e&&(e.addEventListener("mousedown",n),e.addEventListener("touchstart",n));t&&(t.addEventListener("mousedown",n),t.addEventListener("touchstart",n));this.elements.boundary.appendChild(m)}.call(a)}function R(){return this.options.enableExif&&window.EXIF}function B(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=A(e,4);t.value=Math.max(parseFloat(t.min),Math.min(parseFloat(t.max),n)).toString()}}function Z(e){var t=this,n=t._currentZoom,i=t.elements.preview.getBoundingClientRect(),o=t.elements.viewport.getBoundingClientRect(),r=E.parse(t.elements.preview.style[g]),a=new L(t.elements.preview),s=o.top-i.top+o.height/2,l=o.left-i.left+o.width/2,u={},c={};if(e){var h=a.x,p=a.y,d=r.x,m=r.y;u.y=h,u.x=p,r.y=d,r.x=m}else u.y=s/n,u.x=l/n,c.y=(u.y-a.y)*(1-n),c.x=(u.x-a.x)*(1-n),r.x-=c.x,r.y-=c.y;var f={};f[v]=u.x+"px "+u.y+"px",f[g]=r.toString(),b(t.elements.preview,f)}function z(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();b(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}L.prototype.toString=function(){return this.x+"px "+this.y+"px"};var a,s,h,M,I=(a=z,s=500,function(){var e=this,t=arguments,n=h&&!M;clearTimeout(M),M=setTimeout(function(){M=null,h||a.apply(e,t)},s),n&&a.apply(e,t)});function F(){var e,t=this,n=t.get();X.call(t)&&(t.options.update.call(t,n),t.$&&"undefined"==typeof Prototype?t.$(t.element).trigger("update.croppie",n):(window.CustomEvent?e=new CustomEvent("update",{detail:n}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,n),t.element.dispatchEvent(e)))}function X(){return 0l.max)?B.call(r,uthis._originalImageWidth&&(g=(d=this._originalImageWidth-h)/o*u),i<0&&(p=0,v=Math.abs(i)/r*c),m+p>this._originalImageHeight&&(w=(m=this._originalImageHeight-p)/r*c),l.drawImage(this.elements.preview,h,p,d,m,f,v,g,w),a&&(l.fillStyle="#fff",l.globalCompositeOperation="destination-in",l.beginPath(),l.arc(s.width/2,s.height/2,s.width/2,0,2*Math.PI,!0),l.closePath(),l.fill()),s}function k(c,h){var e,i,o,r,p=this,d=[],t=null,n=R.call(p);if("string"==typeof c)e=c,c={};else if(Array.isArray(c))d=c.slice();else{if(void 0===c&&p.data.url)return Y.call(p),F.call(p),null;e=c.url,d=c.points||[],t=void 0===c.zoom?null:c.zoom}return p.data.bound=!1,p.data.url=e||p.data.url,p.data.boundZoom=t,(i=e,o=n,r=new Image,r.style.opacity="0",new Promise(function(e,t){function n(){r.style.opacity="1",setTimeout(function(){e(r)},1)}r.removeAttribute("crossOrigin"),i.match(/^https?:\/\/|^\/\//)&&r.setAttribute("crossOrigin","anonymous"),r.onload=function(){o?EXIF.getData(r,function(){n()}):n()},r.onerror=function(e){r.style.opacity=1,setTimeout(function(){t(e)},1)},r.src=i})).then(function(e){if(function(t){this.elements.img.parentNode&&(Array.prototype.forEach.call(this.elements.img.classList,function(e){t.classList.add(e)}),this.elements.img.parentNode.replaceChild(t,this.elements.img),this.elements.preview=t),this.elements.img=t}.call(p,e),d.length)p.options.relative&&(d=[d[0]*e.naturalWidth/100,d[1]*e.naturalHeight/100,d[2]*e.naturalWidth/100,d[3]*e.naturalHeight/100]);else{var t,n,i=m(e),o=p.elements.viewport.getBoundingClientRect(),r=o.width/o.height;r Date: Fri, 15 Mar 2019 15:50:24 -0500 Subject: [PATCH 60/68] 2.6.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c2549ee1..3955864e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.6.3", + "version": "2.6.4", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From ea9b70389985729652c2b5c6a752eb6160edf7aa Mon Sep 17 00:00:00 2001 From: Andre Seibert Date: Wed, 10 Apr 2019 10:17:16 -0500 Subject: [PATCH 61/68] 2.6.4 --- package-lock.json | 424 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 424 insertions(+) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..e9959a61 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,424 @@ +{ + "name": "croppie", + "version": "2.6.4", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "dev": true, + "requires": { + "array-uniq": "^1.0.1" + } + }, + "array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "dev": true + }, + "arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", + "dev": true + }, + "async": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", + "dev": true + }, + "balanced-match": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "dev": true + }, + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "collections": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/collections/-/collections-0.2.2.tgz", + "integrity": "sha1-HyMCay7zb5J+7MkB6ZxfDUj6M04=", + "dev": true, + "requires": { + "weak-map": "1.0.0" + } + }, + "commander": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz", + "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=", + "dev": true, + "requires": { + "graceful-readlink": ">= 1.0.0" + } + }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true + }, + "debug": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz", + "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=", + "dev": true, + "requires": { + "ms": "0.7.1" + } + }, + "diff": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz", + "integrity": "sha1-fyjS657nsVqX79ic5j3P2qPMur8=", + "dev": true + }, + "escape-string-regexp": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz", + "integrity": "sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE=", + "dev": true + }, + "gh-pages": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-0.11.0.tgz", + "integrity": "sha1-kzE8bcv8dNQmvIminr/2QgrMPBs=", + "dev": true, + "requires": { + "async": "1.5.2", + "commander": "2.9.0", + "globby": "^4.0.0", + "graceful-fs": "4.1.2", + "q": "1.4.1", + "q-io": "1.13.2", + "wrench": "1.5.8" + } + }, + "glob": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz", + "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=", + "dev": true, + "requires": { + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "2 || 3", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "globby": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-4.1.0.tgz", + "integrity": "sha1-CA9UVJ7BuCpsYOYx/ILhIR2+lfg=", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "arrify": "^1.0.0", + "glob": "^6.0.1", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "graceful-fs": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz", + "integrity": "sha1-/iI5t1dJcuZ+QfgIgj+b+kqZHjc=", + "dev": true + }, + "graceful-readlink": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", + "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=", + "dev": true + }, + "growl": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/growl/-/growl-1.8.1.tgz", + "integrity": "sha1-Sy3sjZB+k9szZiTc7AGDUC+MlCg=", + "dev": true + }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "dev": true, + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "jade": { + "version": "0.26.3", + "resolved": "https://registry.npmjs.org/jade/-/jade-0.26.3.tgz", + "integrity": "sha1-jxDXl32NefL2/4YqgbBRPMslaGw=", + "dev": true, + "requires": { + "commander": "0.6.1", + "mkdirp": "0.3.0" + }, + "dependencies": { + "commander": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-0.6.1.tgz", + "integrity": "sha1-+mihT2qUXVTbvlDYzbMyDp47GgY=", + "dev": true + }, + "mkdirp": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz", + "integrity": "sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=", + "dev": true + } + } + }, + "lru-cache": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz", + "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=", + "dev": true + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + }, + "mimeparse": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/mimeparse/-/mimeparse-0.1.4.tgz", + "integrity": "sha1-2vsCdSNw/SJgk64xUsJxrwGsJUo=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + } + }, + "mocha": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/mocha/-/mocha-2.4.5.tgz", + "integrity": "sha1-FRdo3Sh161G8gpXpgAAm6fK7OY8=", + "dev": true, + "requires": { + "commander": "2.3.0", + "debug": "2.2.0", + "diff": "1.4.0", + "escape-string-regexp": "1.0.2", + "glob": "3.2.3", + "growl": "1.8.1", + "jade": "0.26.3", + "mkdirp": "0.5.1", + "supports-color": "1.2.0" + }, + "dependencies": { + "commander": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz", + "integrity": "sha1-/UMOiJgy7DU7ms0d4hfBHLPu+HM=", + "dev": true + }, + "glob": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.3.tgz", + "integrity": "sha1-4xPusknHr/qlxHUoaw4RW1mDlGc=", + "dev": true, + "requires": { + "graceful-fs": "~2.0.0", + "inherits": "2", + "minimatch": "~0.2.11" + } + }, + "graceful-fs": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz", + "integrity": "sha1-fNLNsiiko/Nule+mzBQt59GhNtA=", + "dev": true + }, + "minimatch": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz", + "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=", + "dev": true, + "requires": { + "lru-cache": "2", + "sigmund": "~1.0.0" + } + } + } + }, + "ms": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz", + "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=", + "dev": true + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, + "requires": { + "wrappy": "1" + } + }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "dev": true + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "dev": true + }, + "pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "dev": true, + "requires": { + "pinkie": "^2.0.0" + } + }, + "q": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz", + "integrity": "sha1-VXBbzZPF82c1MMLCy8DCs63cKG4=", + "dev": true + }, + "q-io": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/q-io/-/q-io-1.13.2.tgz", + "integrity": "sha1-7qEw1IHdteGqG8WmaFX3OR0G8AM=", + "dev": true, + "requires": { + "collections": "^0.2.0", + "mime": "^1.2.11", + "mimeparse": "^0.1.4", + "q": "^1.0.1", + "qs": "^1.2.1", + "url2": "^0.0.0" + } + }, + "qs": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-1.2.2.tgz", + "integrity": "sha1-GbV/8k3CqZzh+L32r82ln472H4g=", + "dev": true + }, + "sigmund": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", + "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.0.tgz", + "integrity": "sha1-/x7R5hFp0Gs88tWI4YixjYhH4X4=", + "dev": true + }, + "uglify-js": { + "version": "3.3.15", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.15.tgz", + "integrity": "sha512-bqtBCAINYXX/OkdnqMGpbXr+OPWc00hsozRpk+dAtfnbdk2jjKiLmyOkQ7zamg648lVMnzATL8JrSN6LmaVpYA==", + "dev": true, + "requires": { + "commander": "~2.15.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "commander": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", + "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", + "dev": true + } + } + }, + "url2": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/url2/-/url2-0.0.0.tgz", + "integrity": "sha1-Tqq9HVw6yQ1iq0SFyZhCKGWgSxo=", + "dev": true + }, + "weak-map": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.0.tgz", + "integrity": "sha1-tm5Wqd8L0lp2u/G1FNsSkIBhSjc=", + "dev": true + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true + }, + "wrench": { + "version": "1.5.8", + "resolved": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz", + "integrity": "sha1-ejHJf3hpJG12xc8vXJd6HEyOWrU=", + "dev": true + } + } +} From b0973358fd660a6f044c8e8bbc2450c0b898f9d2 Mon Sep 17 00:00:00 2001 From: Jedediah Smith Date: Wed, 17 Apr 2019 15:30:08 -0600 Subject: [PATCH 62/68] Fixes #515 Supersedes #519 (#647) * Fixes #515 * Added if for 180 as suggested by @bwakabats --- croppie.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index 4e4f0233..bd273568 100755 --- a/croppie.js +++ b/croppie.js @@ -637,7 +637,7 @@ var delta, targetZoom; if(self.options.mouseWheelZoom === 'ctrl' && ev.ctrlKey !== true){ - return 0; + return 0; } else if (ev.wheelDelta) { delta = ev.wheelDelta / 1200; //wheelDelta min: -120 max: 120 // max x 10 x 2 } else if (ev.deltaY) { @@ -1084,7 +1084,7 @@ zoomer.min = fix(minZoom, 4); zoomer.max = fix(maxZoom, 4); - + if (!initial && (scale < zoomer.min || scale > zoomer.max)) { _setZoomerVal.call(self, scale < zoomer.min ? zoomer.min : zoomer.max); } @@ -1470,6 +1470,14 @@ drawCanvas(canvas, self.elements.img, self.data.orientation); _updateCenterPoint.call(self, true); _updateZoomLimits.call(self); + + // Reverses image dimensions if the degrees of rotation is not divisible by 180. + if ((Math.abs(deg) / 90) % 2 === 1) { + let oldHeight = self._originalImageHeight; + let oldWidth = self._originalImageWidth; + self._originalImageWidth = oldHeight; + self._originalImageHeight = oldWidth; + } } function _destroy() { From 5142170a2e78657642032d8e967652505c342007 Mon Sep 17 00:00:00 2001 From: immondu <34095401+immondu@users.noreply.github.com> Date: Fri, 24 May 2019 19:17:05 +0200 Subject: [PATCH 63/68] cleaner fix for #552 (#654) --- croppie.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/croppie.js b/croppie.js index bd273568..a847efcc 100755 --- a/croppie.js +++ b/croppie.js @@ -1035,7 +1035,7 @@ self._originalImageWidth = imgData.width; self._originalImageHeight = imgData.height; - self.data.orientation = getExifOrientation(self.elements.img); + self.data.orientation = _hasExif.call(self) ? getExifOrientation(self.elements.img) : self.data.orientation; if (self.options.enableZoom) { _updateZoomLimits.call(self, true); @@ -1342,11 +1342,12 @@ ]; } + self.data.orientation = options.orientation || 1; self.data.points = points.map(function (p) { return parseFloat(p); }); if (self.options.useCanvas) { - _transferImageToCanvas.call(self, options.orientation); + _transferImageToCanvas.call(self, self.data.orientation); } _updatePropertiesFromImage.call(self); _triggerUpdate.call(self); From 8986e13c6c185e4b935374947c66c8c7bd50f72a Mon Sep 17 00:00:00 2001 From: Michael Letcher Date: Sat, 25 May 2019 03:17:57 +1000 Subject: [PATCH 64/68] Warning error (#623) Added a minor check to alert user that they loaded Croppie without an image. --- croppie.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/croppie.js b/croppie.js index a847efcc..d2eba566 100755 --- a/croppie.js +++ b/croppie.js @@ -176,6 +176,8 @@ /* Utilities */ function loadImage(src, doExif) { + if (!src) { throw 'Source image missing'; } + var img = new Image(); img.style.opacity = '0'; return new Promise(function (resolve, reject) { From 84a7e81772e803a757abb9dd3984dd9847b5638b Mon Sep 17 00:00:00 2001 From: ofzza Date: Tue, 4 Jun 2019 16:45:43 +0200 Subject: [PATCH 65/68] Checking for existence of environment specific features before using them during initialization to prevent breaking NodeJS by just being required/imported (#657) --- croppie.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/croppie.js b/croppie.js index d2eba566..2652d0ef 100755 --- a/croppie.js +++ b/croppie.js @@ -23,7 +23,7 @@ !function(a){function b(a,b){return function(){a.apply(b,arguments)}}function c(a){if("object"!==typeof this)throw new TypeError("Promises must be constructed via new");if("function"!==typeof a)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],i(a,b(e,this),b(f,this))}function d(a){var b=this;return null===this._state?void this._deferreds.push(a):void k(function(){var c=b._state?a.onFulfilled:a.onRejected;if(null===c)return void(b._state?a.resolve:a.reject)(b._value);var d;try{d=c(b._value)}catch(e){return void a.reject(e)}a.resolve(d)})}function e(a){try{if(a===this)throw new TypeError("A promise cannot be resolved with itself.");if(a&&("object"===typeof a||"function"===typeof a)){var c=a.then;if("function"===typeof c)return void i(b(c,a),b(e,this),b(f,this))}this._state=!0,this._value=a,g.call(this)}catch(d){f.call(this,d)}}function f(a){this._state=!1,this._value=a,g.call(this)}function g(){for(var a=0,b=this._deferreds.length;b>a;a++)d.call(this,this._deferreds[a]);this._deferreds=null}function h(a,b,c,d){this.onFulfilled="function"===typeof a?a:null,this.onRejected="function"===typeof b?b:null,this.resolve=c,this.reject=d}function i(a,b,c){var d=!1;try{a(function(a){d||(d=!0,b(a))},function(a){d||(d=!0,c(a))})}catch(e){if(d)return;d=!0,c(e)}}var j=setTimeout,k="function"===typeof setImmediate&&setImmediate||function(a){j(a,1)},l=Array.isArray||function(a){return"[object Array]"===Object.prototype.toString.call(a)};c.prototype["catch"]=function(a){return this.then(null,a)},c.prototype.then=function(a,b){var e=this;return new c(function(c,f){d.call(e,new h(a,b,c,f))})},c.all=function(){var a=Array.prototype.slice.call(1===arguments.length&&l(arguments[0])?arguments[0]:arguments);return new c(function(b,c){function d(f,g){try{if(g&&("object"===typeof g||"function"===typeof g)){var h=g.then;if("function"===typeof h)return void h.call(g,function(a){d(f,a)},c)}a[f]=g,0===--e&&b(a)}catch(i){c(i)}}if(0===a.length)return b([]);for(var e=a.length,f=0;fd;d++)a[d].then(b,c)})},c._setImmediateFn=function(a){k=a},"undefined"!==typeof module&&module.exports?module.exports=c:a.Promise||(a.Promise=c)}(this); } - if ( typeof window.CustomEvent !== "function" ) { + if (typeof window !== 'undefined' && typeof window.CustomEvent !== "function") { (function(){ function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; @@ -36,7 +36,7 @@ }()); } - if (!HTMLCanvasElement.prototype.toBlob) { + if (typeof HTMLCanvasElement !== 'undefined' && !HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { value: function (callback, type, quality) { var binStr = atob( this.toDataURL(type, quality).split(',')[1] ), @@ -54,7 +54,7 @@ /* End Polyfills */ var cssPrefixes = ['Webkit', 'Moz', 'ms'], - emptyStyles = document.createElement('div').style, + emptyStyles = typeof document !== 'undefined' ? document.createElement('div').style : {}, EXIF_NORM = [1,8,3,6], EXIF_FLIP = [2,7,4,5], CSS_TRANS_ORG, @@ -1493,7 +1493,7 @@ delete self.elements; } - if (window.jQuery) { + if (typeof window !== 'undefined' && window.jQuery) { var $ = window.jQuery; $.fn.croppie = function (opts) { var ot = typeof opts; From 9d01391b9173ad646ea69a30fbbb8548743c9dfb Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 16 Jun 2020 08:04:24 -0500 Subject: [PATCH 66/68] 2.6.5 prep --- croppie.js | 6 +++--- croppie.min.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/croppie.js b/croppie.js index 2652d0ef..5b4cf284 100755 --- a/croppie.js +++ b/croppie.js @@ -2,7 +2,7 @@ * Croppie * Copyright 2019 * Foliotek - * Version: 2.6.4 + * Version: 2.6.5 *************************/ (function (root, factory) { if (typeof define === 'function' && define.amd) { @@ -1476,8 +1476,8 @@ // Reverses image dimensions if the degrees of rotation is not divisible by 180. if ((Math.abs(deg) / 90) % 2 === 1) { - let oldHeight = self._originalImageHeight; - let oldWidth = self._originalImageWidth; + var oldHeight = self._originalImageHeight; + var oldWidth = self._originalImageWidth; self._originalImageWidth = oldHeight; self._originalImageHeight = oldWidth; } diff --git a/croppie.min.js b/croppie.min.js index 1223fd23..6afcb01a 100644 --- a/croppie.min.js +++ b/croppie.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=t():e.Croppie=t()}("undefined"!=typeof self?self:this,function(){"function"!=typeof Promise&&function(e){function n(e,t){return function(){e.apply(t,arguments)}}function r(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],u(e,n(i,this),n(o,this))}function a(n){var i=this;return null===this._state?void this._deferreds.push(n):void c(function(){var e=i._state?n.onFulfilled:n.onRejected;if(null!==e){var t;try{t=e(i._value)}catch(e){return void n.reject(e)}n.resolve(t)}else(i._state?n.resolve:n.reject)(i._value)})}function i(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var t=e.then;if("function"==typeof t)return void u(n(t,e),n(i,this),n(o,this))}this._state=!0,this._value=e,s.call(this)}catch(e){o.call(this,e)}}function o(e){this._state=!1,this._value=e,s.call(this)}function s(){for(var e=0,t=this._deferreds.length;en.top+t&&l.bottomn.left+e&&l.right=s.maxX&&(o.x=l.minX,n.x=s.maxX),n.x<=s.minX&&(o.x=l.maxX,n.x=s.minX),n.y>=s.maxY&&(o.y=l.minY,n.y=s.maxY),n.y<=s.minY&&(o.y=l.maxY,n.y=s.minY)}r(),I.call(t),F.call(t)}).call(i,{value:parseFloat(t.value),origin:new L(i.elements.preview),viewportRect:i.elements.viewport.getBoundingClientRect(),transform:E.parse(i.elements.preview)})}function n(e){var t,n;if("ctrl"===i.options.mouseWheelZoom&&!0!==e.ctrlKey)return 0;t=e.wheelDelta?e.wheelDelta/1200:e.deltaY?e.deltaY/1060:e.detail?e.detail/-60:0,n=i._currentZoom+t*i._currentZoom,e.preventDefault(),B.call(i,n),o.call(i)}x(e,"cr-slider-wrap"),x(t,"cr-slider"),t.type="range",t.step="0.0001",t.value="1",t.style.display=i.options.showZoomer?"":"none",t.setAttribute("aria-label","zoom"),i.element.appendChild(e),e.appendChild(t),i._currentZoom=1,i.elements.zoomer.addEventListener("input",o),i.elements.zoomer.addEventListener("change",o),i.options.mouseWheelZoom&&(i.elements.boundary.addEventListener("mousewheel",n),i.elements.boundary.addEventListener("DOMMouseScroll",n))}.call(a),a.options.enableResize&&function(){var l,u,c,h,p,e,t,d=this,m=document.createElement("div"),i=!1,f=50;x(m,"cr-resizer"),b(m,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(x(e=document.createElement("div"),"cr-resizer-vertical"),m.appendChild(e));this.options.resizeControls.width&&(x(t=document.createElement("div"),"cr-resizer-horisontal"),m.appendChild(t));function n(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!i)){var t=d.elements.overlay.getBoundingClientRect();if(i=!0,u=e.pageX,c=e.pageY,l=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",h=t.width,p=t.height,e.touches){var n=e.touches[0];u=n.pageX,c=n.pageY}window.addEventListener("mousemove",o),window.addEventListener("touchmove",o),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),document.body.style[w]="none"}}function o(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var i=e.touches[0];t=i.pageX,n=i.pageY}var o=t-u,r=n-c,a=d.options.viewport.height+r,s=d.options.viewport.width+o;"v"===l&&f<=a&&a<=p?(b(m,{height:a+"px"}),d.options.boundary.height+=r,b(d.elements.boundary,{height:d.options.boundary.height+"px"}),d.options.viewport.height+=r,b(d.elements.viewport,{height:d.options.viewport.height+"px"})):"h"===l&&f<=s&&s<=h&&(b(m,{width:s+"px"}),d.options.boundary.width+=o,b(d.elements.boundary,{width:d.options.boundary.width+"px"}),d.options.viewport.width+=o,b(d.elements.viewport,{width:d.options.viewport.width+"px"})),z.call(d),W.call(d),Z.call(d),F.call(d),c=n,u=t}function r(){i=!1,window.removeEventListener("mousemove",o),window.removeEventListener("touchmove",o),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),document.body.style[w]=""}e&&(e.addEventListener("mousedown",n),e.addEventListener("touchstart",n));t&&(t.addEventListener("mousedown",n),t.addEventListener("touchstart",n));this.elements.boundary.appendChild(m)}.call(a)}function R(){return this.options.enableExif&&window.EXIF}function B(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=A(e,4);t.value=Math.max(parseFloat(t.min),Math.min(parseFloat(t.max),n)).toString()}}function Z(e){var t=this,n=t._currentZoom,i=t.elements.preview.getBoundingClientRect(),o=t.elements.viewport.getBoundingClientRect(),r=E.parse(t.elements.preview.style[g]),a=new L(t.elements.preview),s=o.top-i.top+o.height/2,l=o.left-i.left+o.width/2,u={},c={};if(e){var h=a.x,p=a.y,d=r.x,m=r.y;u.y=h,u.x=p,r.y=d,r.x=m}else u.y=s/n,u.x=l/n,c.y=(u.y-a.y)*(1-n),c.x=(u.x-a.x)*(1-n),r.x-=c.x,r.y-=c.y;var f={};f[v]=u.x+"px "+u.y+"px",f[g]=r.toString(),b(t.elements.preview,f)}function z(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();b(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}L.prototype.toString=function(){return this.x+"px "+this.y+"px"};var a,s,h,M,I=(a=z,s=500,function(){var e=this,t=arguments,n=h&&!M;clearTimeout(M),M=setTimeout(function(){M=null,h||a.apply(e,t)},s),n&&a.apply(e,t)});function F(){var e,t=this,n=t.get();X.call(t)&&(t.options.update.call(t,n),t.$&&"undefined"==typeof Prototype?t.$(t.element).trigger("update.croppie",n):(window.CustomEvent?e=new CustomEvent("update",{detail:n}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,n),t.element.dispatchEvent(e)))}function X(){return 0l.max)?B.call(r,uthis._originalImageWidth&&(g=(d=this._originalImageWidth-h)/o*u),i<0&&(p=0,v=Math.abs(i)/r*c),m+p>this._originalImageHeight&&(w=(m=this._originalImageHeight-p)/r*c),l.drawImage(this.elements.preview,h,p,d,m,f,v,g,w),a&&(l.fillStyle="#fff",l.globalCompositeOperation="destination-in",l.beginPath(),l.arc(s.width/2,s.height/2,s.width/2,0,2*Math.PI,!0),l.closePath(),l.fill()),s}function k(c,h){var e,i,o,r,p=this,d=[],t=null,n=R.call(p);if("string"==typeof c)e=c,c={};else if(Array.isArray(c))d=c.slice();else{if(void 0===c&&p.data.url)return Y.call(p),F.call(p),null;e=c.url,d=c.points||[],t=void 0===c.zoom?null:c.zoom}return p.data.bound=!1,p.data.url=e||p.data.url,p.data.boundZoom=t,(i=e,o=n,r=new Image,r.style.opacity="0",new Promise(function(e,t){function n(){r.style.opacity="1",setTimeout(function(){e(r)},1)}r.removeAttribute("crossOrigin"),i.match(/^https?:\/\/|^\/\//)&&r.setAttribute("crossOrigin","anonymous"),r.onload=function(){o?EXIF.getData(r,function(){n()}):n()},r.onerror=function(e){r.style.opacity=1,setTimeout(function(){t(e)},1)},r.src=i})).then(function(e){if(function(t){this.elements.img.parentNode&&(Array.prototype.forEach.call(this.elements.img.classList,function(e){t.classList.add(e)}),this.elements.img.parentNode.replaceChild(t,this.elements.img),this.elements.preview=t),this.elements.img=t}.call(p,e),d.length)p.options.relative&&(d=[d[0]*e.naturalWidth/100,d[1]*e.naturalHeight/100,d[2]*e.naturalWidth/100,d[3]*e.naturalHeight/100]);else{var t,n,i=m(e),o=p.elements.viewport.getBoundingClientRect(),r=o.width/o.height;re;e++)n.call(this,this._deferreds[e]);this._deferreds=null}function s(e,t,i){var n=!1;try{e(function(e){n||(n=!0,t(e))},function(e){n||(n=!0,i(e))})}catch(e){if(n)return;n=!0,i(e)}}var l=setTimeout,h="function"==typeof setImmediate&&setImmediate||function(e){l(e,1)},u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var o=this;return new i(function(i,r){n.call(o,new function(e,t,i,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=i,this.reject=n}(e,t,i,r))})},i.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&u(arguments[0])?arguments[0]:arguments);return new i(function(t,i){function n(r,a){try{if(a&&("object"==typeof a||"function"==typeof a)){var s=a.then;if("function"==typeof s)return void s.call(a,function(e){n(r,e)},i)}e[r]=a,0==--o&&t(e)}catch(e){i(e)}}if(0===e.length)return t([]);for(var o=e.length,r=0;rn;n++)e[n].then(t,i)})},i._setImmediateFn=function(e){h=e},"undefined"!=typeof module&&module.exports?module.exports=i:e.Promise||(e.Promise=i)}(this),"undefined"!=typeof window&&"function"!=typeof window.CustomEvent&&function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),"undefined"==typeof HTMLCanvasElement||HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,i){for(var n=atob(this.toDataURL(t,i).split(",")[1]),o=n.length,r=new Uint8Array(o),a=0;a=5){var r=i;i=n,n=r}return{width:i,height:n}}t=s("transform"),e=s("transformOrigin"),i=s("userSelect");var v={translate3d:{suffix:", 0px"},translate:{suffix:""}},g=function(e,t,i){this.x=parseFloat(e),this.y=parseFloat(t),this.scale=parseFloat(i)};g.parse=function(e){return e.style?g.parse(e.style[t]):e.indexOf("matrix")>-1||e.indexOf("none")>-1?g.fromMatrix(e):g.fromString(e)},g.fromMatrix=function(e){var t=e.substring(7).split(",");return t.length&&"none"!==e||(t=[1,0,0,1,0,0]),new g(m(t[4]),m(t[5]),parseFloat(t[0]))},g.fromString=function(e){var t=e.split(") "),i=t[0].substring(T.globals.translate.length+1).split(","),n=t.length>1?t[1].substring(6):1,o=i.length>1?i[0]:0,r=i.length>1?i[1]:0;return new g(o,r,n)},g.prototype.toString=function(){var e=v[T.globals.translate].suffix||"";return T.globals.translate+"("+this.x+"px, "+this.y+"px"+e+") scale("+this.scale+")"};var w=function(t){if(!t||!t.style[e])return this.x=0,void(this.y=0);var i=t.style[e].split(" ");this.x=parseFloat(i[0]),this.y=parseFloat(i[1])};function y(e){return e.exifdata&&e.exifdata.Orientation?m(e.exifdata.Orientation):1}function b(e,t,i){var n=t.width,o=t.height,r=e.getContext("2d");switch(e.width=t.width,e.height=t.height,r.save(),i){case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(180*Math.PI/180);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.scale(1,-1);break;case 6:e.width=o,e.height=n,r.rotate(90*Math.PI/180),r.translate(0,-o);break;case 7:e.width=o,e.height=n,r.rotate(-90*Math.PI/180),r.translate(-n,o),r.scale(1,-1);break;case 8:e.width=o,e.height=n,r.translate(0,n),r.rotate(-90*Math.PI/180)}r.drawImage(t,0,0,n,o),r.restore()}function x(){var n,o,r,a,s,l,h=this.options.viewport.type?"cr-vp-"+this.options.viewport.type:null;this.options.useCanvas=this.options.enableOrientation||C.call(this),this.data={},this.elements={},n=this.elements.boundary=document.createElement("div"),r=this.elements.viewport=document.createElement("div"),o=this.elements.img=document.createElement("img"),a=this.elements.overlay=document.createElement("div"),this.options.useCanvas?(this.elements.canvas=document.createElement("canvas"),this.elements.preview=this.elements.canvas):this.elements.preview=o,p(n,"cr-boundary"),n.setAttribute("aria-dropeffect","none"),s=this.options.boundary.width,l=this.options.boundary.height,c(n,{width:s+(isNaN(s)?"":"px"),height:l+(isNaN(l)?"":"px")}),p(r,"cr-viewport"),h&&p(r,h),c(r,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),r.setAttribute("tabindex",0),p(this.elements.preview,"cr-image"),d(this.elements.preview,{alt:"preview","aria-grabbed":"false"}),p(a,"cr-overlay"),this.element.appendChild(n),n.appendChild(this.elements.preview),n.appendChild(r),n.appendChild(a),p(this.element,"croppie-container"),this.options.customClass&&p(this.element,this.options.customClass),function(){var e,n,o,r,a,s=this,l=!1;function h(e,t){var i=s.elements.preview.getBoundingClientRect(),n=a.y+t,o=a.x+e;s.options.enforceBoundary?(r.top>i.top+t&&r.bottomi.left+e&&r.right1){var v=i.touches[0],g=i.touches[1],w=Math.sqrt((v.pageX-g.pageX)*(v.pageX-g.pageX)+(v.pageY-g.pageY)*(v.pageY-g.pageY));o||(o=w/s._currentZoom);var y=w/o;return E.call(s,y),void u(s.elements.zoomer)}h(d,m),f[t]=a.toString(),c(s.elements.preview,f),L.call(s),n=l,e=r}function f(){p(l=!1),window.removeEventListener("mousemove",m),window.removeEventListener("touchmove",m),window.removeEventListener("mouseup",f),window.removeEventListener("touchend",f),document.body.style[i]="",_.call(s),z.call(s),o=0}s.elements.overlay.addEventListener("mousedown",d),s.elements.viewport.addEventListener("keydown",function(e){var n=37,l=38,u=39,p=40;if(!e.shiftKey||e.keyCode!==l&&e.keyCode!==p){if(s.options.enableKeyMovement&&e.keyCode>=37&&e.keyCode<=40){e.preventDefault();var d=function(e){switch(e){case n:return[1,0];case l:return[0,1];case u:return[-1,0];case p:return[0,-1]}}(e.keyCode);a=g.parse(s.elements.preview),document.body.style[i]="none",r=s.elements.viewport.getBoundingClientRect(),function(e){var n=e[0],r=e[1],l={};h(n,r),l[t]=a.toString(),c(s.elements.preview,l),L.call(s),document.body.style[i]="",_.call(s),z.call(s),o=0}(d)}}else{var m;m=e.keyCode===l?parseFloat(s.elements.zoomer.value)+parseFloat(s.elements.zoomer.step):parseFloat(s.elements.zoomer.value)-parseFloat(s.elements.zoomer.step),s.setZoom(m)}}),s.elements.overlay.addEventListener("touchstart",d)}.call(this),this.options.enableZoom&&function(){var i=this,n=i.elements.zoomerWrap=document.createElement("div"),o=i.elements.zoomer=document.createElement("input");function r(){(function(i){var n=this,o=i?i.transform:g.parse(n.elements.preview),r=i?i.viewportRect:n.elements.viewport.getBoundingClientRect(),a=i?i.origin:new w(n.elements.preview);function s(){var i={};i[t]=o.toString(),i[e]=a.toString(),c(n.elements.preview,i)}if(n._currentZoom=i?i.value:n._currentZoom,o.scale=n._currentZoom,n.elements.zoomer.setAttribute("aria-valuenow",n._currentZoom),s(),n.options.enforceBoundary){var l=function(e){var t=this._currentZoom,i=e.width,n=e.height,o=this.elements.boundary.clientWidth/2,r=this.elements.boundary.clientHeight/2,a=this.elements.preview.getBoundingClientRect(),s=a.width,l=a.height,h=i/2,u=n/2,c=-1*(h/t-o),p=-1*(u/t-r),d=1/t*h,m=1/t*u;return{translate:{maxX:c,minX:c-(s*(1/t)-i*(1/t)),maxY:p,minY:p-(l*(1/t)-n*(1/t))},origin:{maxX:s*(1/t)-d,minX:d,maxY:l*(1/t)-m,minY:m}}}.call(n,r),h=l.translate,u=l.origin;o.x>=h.maxX&&(a.x=u.minX,o.x=h.maxX),o.x<=h.minX&&(a.x=u.maxX,o.x=h.minX),o.y>=h.maxY&&(a.y=u.minY,o.y=h.maxY),o.y<=h.minY&&(a.y=u.maxY,o.y=h.minY)}s(),M.call(n),z.call(n)}).call(i,{value:parseFloat(o.value),origin:new w(i.elements.preview),viewportRect:i.elements.viewport.getBoundingClientRect(),transform:g.parse(i.elements.preview)})}function a(e){var t,n;if("ctrl"===i.options.mouseWheelZoom&&!0!==e.ctrlKey)return 0;t=e.wheelDelta?e.wheelDelta/1200:e.deltaY?e.deltaY/1060:e.detail?e.detail/-60:0,n=i._currentZoom+t*i._currentZoom,e.preventDefault(),E.call(i,n),r.call(i)}p(n,"cr-slider-wrap"),p(o,"cr-slider"),o.type="range",o.step="0.0001",o.value="1",o.style.display=i.options.showZoomer?"":"none",o.setAttribute("aria-label","zoom"),i.element.appendChild(n),n.appendChild(o),i._currentZoom=1,i.elements.zoomer.addEventListener("input",r),i.elements.zoomer.addEventListener("change",r),i.options.mouseWheelZoom&&(i.elements.boundary.addEventListener("mousewheel",a),i.elements.boundary.addEventListener("DOMMouseScroll",a))}.call(this),this.options.enableResize&&function(){var e,t,n,o,r,a,s,l=this,h=document.createElement("div"),u=!1,d=50;p(h,"cr-resizer"),c(h,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(p(a=document.createElement("div"),"cr-resizer-vertical"),h.appendChild(a));this.options.resizeControls.width&&(p(s=document.createElement("div"),"cr-resizer-horisontal"),h.appendChild(s));function m(a){if((void 0===a.button||0===a.button)&&(a.preventDefault(),!u)){var s=l.elements.overlay.getBoundingClientRect();if(u=!0,t=a.pageX,n=a.pageY,e=-1!==a.currentTarget.className.indexOf("vertical")?"v":"h",o=s.width,r=s.height,a.touches){var h=a.touches[0];t=h.pageX,n=h.pageY}window.addEventListener("mousemove",f),window.addEventListener("touchmove",f),window.addEventListener("mouseup",v),window.addEventListener("touchend",v),document.body.style[i]="none"}}function f(i){var a=i.pageX,s=i.pageY;if(i.preventDefault(),i.touches){var u=i.touches[0];a=u.pageX,s=u.pageY}var p=a-t,m=s-n,f=l.options.viewport.height+m,v=l.options.viewport.width+p;"v"===e&&f>=d&&f<=r?(c(h,{height:f+"px"}),l.options.boundary.height+=m,c(l.elements.boundary,{height:l.options.boundary.height+"px"}),l.options.viewport.height+=m,c(l.elements.viewport,{height:l.options.viewport.height+"px"})):"h"===e&&v>=d&&v<=o&&(c(h,{width:v+"px"}),l.options.boundary.width+=p,c(l.elements.boundary,{width:l.options.boundary.width+"px"}),l.options.viewport.width+=p,c(l.elements.viewport,{width:l.options.viewport.width+"px"})),L.call(l),X.call(l),_.call(l),z.call(l),n=s,t=a}function v(){u=!1,window.removeEventListener("mousemove",f),window.removeEventListener("touchmove",f),window.removeEventListener("mouseup",v),window.removeEventListener("touchend",v),document.body.style[i]=""}a&&(a.addEventListener("mousedown",m),a.addEventListener("touchstart",m));s&&(s.addEventListener("mousedown",m),s.addEventListener("touchstart",m));this.elements.boundary.appendChild(h)}.call(this)}function C(){return this.options.enableExif&&window.EXIF}function E(e){if(this.options.enableZoom){var t=this.elements.zoomer,i=O(e,4);t.value=Math.max(parseFloat(t.min),Math.min(parseFloat(t.max),i)).toString()}}function _(i){var n=this._currentZoom,o=this.elements.preview.getBoundingClientRect(),r=this.elements.viewport.getBoundingClientRect(),a=g.parse(this.elements.preview.style[t]),s=new w(this.elements.preview),l=r.top-o.top+r.height/2,h=r.left-o.left+r.width/2,u={},p={};if(i){var d=s.x,m=s.y,f=a.x,v=a.y;u.y=d,u.x=m,a.y=f,a.x=v}else u.y=l/n,u.x=h/n,p.y=(u.y-s.y)*(1-n),p.x=(u.x-s.x)*(1-n),a.x-=p.x,a.y-=p.y;var y={};y[e]=u.x+"px "+u.y+"px",y[t]=a.toString(),c(this.elements.preview,y)}function L(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();c(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}w.prototype.toString=function(){return this.x+"px "+this.y+"px"};var R,B,Z,I,M=(R=L,B=500,function(){var e=this,t=arguments,i=Z&&!I;clearTimeout(I),I=setTimeout(function(){I=null,Z||R.apply(e,t)},B),i&&R.apply(e,t)});function z(){var e,t=this.get();F.call(this)&&(this.options.update.call(this,t),this.$&&"undefined"==typeof Prototype?this.$(this.element).trigger("update.croppie",t):(window.CustomEvent?e=new CustomEvent("update",{detail:t}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,t),this.element.dispatchEvent(e)))}function F(){return this.elements.preview.offsetHeight>0&&this.elements.preview.offsetWidth>0}function W(){var i,n={},o=this.elements.preview,r=new g(0,0,1),a=new w;F.call(this)&&!this.data.bound&&(this.data.bound=!0,n[t]=r.toString(),n[e]=a.toString(),n.opacity=1,c(o,n),i=this.elements.preview.getBoundingClientRect(),this._originalImageWidth=i.width,this._originalImageHeight=i.height,this.data.orientation=C.call(this)?y(this.elements.img):this.data.orientation,this.options.enableZoom?X.call(this,!0):this._currentZoom=1,r.scale=this._currentZoom,n[t]=r.toString(),c(o,n),this.data.points.length?function(i){if(4!==i.length)throw"Croppie - Invalid number of points supplied: "+i;var n=i[2]-i[0],o=this.elements.viewport.getBoundingClientRect(),r=this.elements.boundary.getBoundingClientRect(),a={left:o.left-r.left,top:o.top-r.top},s=o.width/n,l=i[1],h=i[0],u=-1*i[1]+a.top,p=-1*i[0]+a.left,d={};d[e]=h+"px "+l+"px",d[t]=new g(p,u,s).toString(),c(this.elements.preview,d),E.call(this,s),this._currentZoom=s}.call(this,this.data.points):function(){var e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),n=this.elements.boundary.getBoundingClientRect(),o=i.left-n.left,r=i.top-n.top,a=o-(e.width-i.width)/2,s=r-(e.height-i.height)/2,l=new g(a,s,this._currentZoom);c(this.elements.preview,t,l.toString())}.call(this),_.call(this),L.call(this))}function X(e){var t,i,n,o,r=Math.max(this.options.minZoom,0)||0,a=this.options.maxZoom||1.5,s=this.elements.zoomer,l=parseFloat(s.value),h=this.elements.boundary.getBoundingClientRect(),c=f(this.elements.img,this.data.orientation),p=this.elements.viewport.getBoundingClientRect();this.options.enforceBoundary&&(n=p.width/c.width,o=p.height/c.height,r=Math.max(n,o)),r>=a&&(a=r+1),s.min=O(r,4),s.max=O(a,4),!e&&(ls.max)?E.call(this,lthis._originalImageWidth&&(w=(d=this._originalImageWidth-c)/o*h),n<0&&(p=0,g=Math.abs(n)/r*u),f+p>this._originalImageHeight&&(y=(f=this._originalImageHeight-p)/r*u),l.drawImage(this.elements.preview,c,p,d,f,v,g,w,y),a&&(l.fillStyle="#fff",l.globalCompositeOperation="destination-in",l.beginPath(),l.arc(s.width/2,s.height/2,s.width/2,0,2*Math.PI,!0),l.closePath(),l.fill()),s}function H(e,t){var i,n=this,o=[],r=null,a=C.call(n);if("string"==typeof e)i=e,e={};else if(Array.isArray(e))o=e.slice();else{if(void 0===e&&n.data.url)return W.call(n),z.call(n),null;i=e.url,o=e.points||[],r=void 0===e.zoom?null:e.zoom}return n.data.bound=!1,n.data.url=i||n.data.url,n.data.boundZoom=r,function(e,t){if(!e)throw"Source image missing";var i=new Image;return i.style.opacity="0",new Promise(function(n,o){function r(){i.style.opacity="1",setTimeout(function(){n(i)},1)}i.removeAttribute("crossOrigin"),e.match(/^https?:\/\/|^\/\//)&&i.setAttribute("crossOrigin","anonymous"),i.onload=function(){t?EXIF.getData(i,function(){r()}):r()},i.onerror=function(e){i.style.opacity=1,setTimeout(function(){o(e)},1)},i.src=e})}(i,a).then(function(i){if(function(e){this.elements.img.parentNode&&(Array.prototype.forEach.call(this.elements.img.classList,function(t){e.classList.add(t)}),this.elements.img.parentNode.replaceChild(e,this.elements.img),this.elements.preview=e),this.elements.img=e}.call(n,i),o.length)n.options.relative&&(o=[o[0]*i.naturalWidth/100,o[1]*i.naturalHeight/100,o[2]*i.naturalWidth/100,o[3]*i.naturalHeight/100]);else{var r,a,s=f(i),l=n.elements.viewport.getBoundingClientRect(),h=l.width/l.height;s.width/s.height>h?r=(a=s.height)*h:(r=s.width,a=s.height/h);var u=(s.width-r)/2,c=(s.height-a)/2,p=u+r,d=c+a;n.data.points=[u,c,p,d]}n.data.orientation=e.orientation||1,n.data.points=o.map(function(e){return parseFloat(e)}),n.options.useCanvas&&function(e){var t=this.elements.canvas,i=this.elements.img;t.getContext("2d").clearRect(0,0,t.width,t.height),t.width=i.width,t.height=i.height,b(t,i,this.options.enableOrientation&&e||y(i))}.call(n,n.data.orientation),W.call(n),z.call(n),t&&t()})}function O(e,t){return parseFloat(e).toFixed(t||0)}function k(){var e=this.elements.preview.getBoundingClientRect(),t=this.elements.viewport.getBoundingClientRect(),i=t.left-e.left,n=t.top-e.top,o=(t.width-this.elements.viewport.offsetWidth)/2,r=(t.height-this.elements.viewport.offsetHeight)/2,a=i+this.elements.viewport.offsetWidth+o,s=n+this.elements.viewport.offsetHeight+r,l=this._currentZoom;(l===1/0||isNaN(l))&&(l=1);var h=this.options.enforceBoundary?0:Number.NEGATIVE_INFINITY;return i=Math.max(h,i/l),n=Math.max(h,n/l),a=Math.max(h,a/l),s=Math.max(h,s/l),{points:[O(i),O(n),O(a),O(s)],zoom:l,orientation:this.data.orientation}}var A={type:"canvas",format:"png",quality:1},S=["jpeg","webp","png"];function j(e){var t=this,i=k.call(t),n=l(h(A),h(e)),o="string"==typeof e?e:n.type||"base64",r=n.size||"viewport",a=n.format,s=n.quality,u=n.backgroundColor,d="boolean"==typeof n.circle?n.circle:"circle"===t.options.viewport.type,m=t.elements.viewport.getBoundingClientRect(),f=m.width/m.height;return"viewport"===r?(i.outputWidth=m.width,i.outputHeight=m.height):"object"==typeof r&&(r.width&&r.height?(i.outputWidth=r.width,i.outputHeight=r.height):r.width?(i.outputWidth=r.width,i.outputHeight=r.width/f):r.height&&(i.outputWidth=r.height*f,i.outputHeight=r.height)),S.indexOf(a)>-1&&(i.format="image/"+a,i.quality=s),i.circle=d,i.url=t.data.url,i.backgroundColor=u,new Promise(function(e){switch(o.toLowerCase()){case"rawcanvas":e(Y.call(t,i));break;case"canvas":case"base64":e(function(e){return Y.call(this,e).toDataURL(e.format,e.quality)}.call(t,i));break;case"blob":(function(e){var t=this;return new Promise(function(i){Y.call(t,e).toBlob(function(e){i(e)},e.format,e.quality)})}).call(t,i).then(e);break;default:e(function(e){var t=e.points,i=document.createElement("div"),n=document.createElement("img"),o=t[2]-t[0],r=t[3]-t[1];return p(i,"croppie-result"),i.appendChild(n),c(n,{left:-1*t[0]+"px",top:-1*t[1]+"px"}),n.src=e.url,c(i,{width:o+"px",height:r+"px"}),i}.call(t,i))}})}function N(e){if(!this.options.useCanvas||!this.options.enableOrientation)throw"Croppie: Cannot rotate without enableOrientation && EXIF.js included";var t,i,n,o,s,l=this.elements.canvas;if(this.data.orientation=(t=this.data.orientation,i=e,n=r.indexOf(t)>-1?r:a,o=n.indexOf(t),s=i/90%n.length,n[(n.length+o+s%n.length)%n.length]),b(l,this.elements.img,this.data.orientation),_.call(this,!0),X.call(this),Math.abs(e)/90%2==1){var h=this._originalImageHeight,u=this._originalImageWidth;this._originalImageWidth=h,this._originalImageHeight=u}}if("undefined"!=typeof window&&window.jQuery){var P=window.jQuery;P.fn.croppie=function(e){if("string"===typeof e){var t=Array.prototype.slice.call(arguments,1),i=P(this).data("croppie");return"get"===e?i.get():"result"===e?i.result.apply(i,t):"bind"===e?i.bind.apply(i,t):this.each(function(){var i=P(this).data("croppie");if(i){var n=i[e];if(!P.isFunction(n))throw"Croppie "+e+" method not found";n.apply(i,t),"destroy"===e&&P(this).removeData("croppie")}})}return this.each(function(){var t=new T(this,e);t.$=P,P(this).data("croppie",t)})}}function T(e,t){if(e.className.indexOf("croppie-container")>-1)throw new Error("Croppie: Can't initialize croppie more than once");if(this.element=e,this.options=l(h(T.defaults),t),"img"===this.element.tagName.toLowerCase()){var i=this.element;p(i,"cr-original-image"),d(i,{"aria-hidden":"true",alt:""});var n=document.createElement("div");this.element.parentNode.appendChild(n),n.appendChild(i),this.element=n,this.options.url=this.options.url||i.src}if(x.call(this),this.options.url){var o={url:this.options.url,points:this.options.points};delete this.options.url,delete this.options.points,H.call(this,o)}}return T.defaults={viewport:{width:100,height:100,type:"square"},boundary:{},orientationControls:{enabled:!0,leftClass:"",rightClass:""},resizeControls:{width:!0,height:!0},customClass:"",showZoomer:!0,enableZoom:!0,enableResize:!1,mouseWheelZoom:!0,enableExif:!1,enforceBoundary:!0,enableOrientation:!1,enableKeyMovement:!0,update:function(){}},T.globals={translate:"translate3d"},l(T.prototype,{bind:function(e,t){return H.call(this,e,t)},get:function(){var e=k.call(this),t=e.points;return this.options.relative&&(t[0]/=this.elements.img.naturalWidth/100,t[1]/=this.elements.img.naturalHeight/100,t[2]/=this.elements.img.naturalWidth/100,t[3]/=this.elements.img.naturalHeight/100),e},result:function(e){return j.call(this,e)},refresh:function(){return function(){W.call(this)}.call(this)},setZoom:function(e){E.call(this,e),u(this.elements.zoomer)},rotate:function(e){N.call(this,e)},destroy:function(){return function(){var e,t;this.element.removeChild(this.elements.boundary),e=this.element,t="croppie-container",e.classList?e.classList.remove(t):e.className=e.className.replace(t,""),this.options.enableZoom&&this.element.removeChild(this.elements.zoomerWrap),delete this.elements}.call(this)}}),T}); \ No newline at end of file From 8998b1e35a79f5c8f920e7fa76f72523bffc8df5 Mon Sep 17 00:00:00 2001 From: Dustin Smith Date: Tue, 16 Jun 2020 08:04:36 -0500 Subject: [PATCH 67/68] 2.6.5 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e9959a61..1d78d10e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.6.4", + "version": "2.6.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3955864e..d2ac5653 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "croppie", - "version": "2.6.4", + "version": "2.6.5", "description": "A simple javascript image cropper", "main": "croppie.js", "devDependencies": { From 6d55b7bec382a2323e13088148732af2f04006ee Mon Sep 17 00:00:00 2001 From: Sergey Date: Wed, 20 Sep 2017 05:11:02 +0300 Subject: [PATCH 68/68] Use better algo for zoom slider --- croppie.js | 33 +++++++++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/croppie.js b/croppie.js index 5b4cf284..94842853 100755 --- a/croppie.js +++ b/croppie.js @@ -177,7 +177,7 @@ /* Utilities */ function loadImage(src, doExif) { if (!src) { throw 'Source image missing'; } - + var img = new Image(); img.style.opacity = '0'; return new Promise(function (resolve, reject) { @@ -599,12 +599,37 @@ this.elements.boundary.appendChild(wrap); } + function _applyEasingToZoomValue(zoomer) { + var val = parseFloat(zoomer.value), + min = parseFloat(zoomer.min), + max = parseFloat(zoomer.max); + return _calculateQuadraticEasingWithOffset(min, max, val); + } + + function _calculateQuadraticEasingWithOffset(min, max, val) { + var A = .1, + c = (val - min) / (max - min); + // quadratic IN easing with offset A + return min + (Math.pow((A + (1 - A) * c), 2) - Math.pow(A, 2)) * (max - min); + } + + function _invertQuadraticEasingWithOffset(min, max, val) { + var A = .1; + // inversion of quadratic IN easing with offset A + return min + (Math.sqrt(Math.pow(A, 2) + (val - min) / (max - min)) - A) * (max - min) / (1 - A); + } + function _setZoomerVal(v) { if (this.options.enableZoom) { var z = this.elements.zoomer, - val = fix(v, 4); + val = fix(v, 4), + min = parseFloat(z.min), + max = parseFloat(z.max); + + val = Math.max(min, Math.min(max, val)); - z.value = Math.max(parseFloat(z.min), Math.min(parseFloat(z.max), val)).toString(); + // Inverting easing function + z.value = _invertQuadraticEasingWithOffset(min, max, val); } } @@ -628,7 +653,7 @@ function change() { _onZoom.call(self, { - value: parseFloat(zoomer.value), + value: _applyEasingToZoomValue(zoomer), origin: new TransformOrigin(self.elements.preview), viewportRect: self.elements.viewport.getBoundingClientRect(), transform: Transform.parse(self.elements.preview)