1#@!#!123s

32767 1#@!#!123s
: / proc / thread-self / root / home5 / rakcha / www / app / style /
Filename : crop.js
back
/*************************

 * Croppie

 * Copyright 2018

 * Foliotek

 * Version: 2.6.2

 *************************/

(function (root, factory) {

    if (typeof define === 'function' && define.amd) {

        // AMD. Register as an anonymous module.

        define(['exports'], factory);

    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {

        // CommonJS

        factory(exports);

    } else {

        // Browser globals

        factory((root.commonJsStrict = {}));

    }

}(this, function (exports) {



    /* 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;f<a.length;f++)d(f,a[f])})},c.resolve=function(a){return a&&"object"===typeof a&&a.constructor===c?a:new c(function(b){b(a)})},c.reject=function(a){return new c(function(b,c){c(a)})},c.race=function(a){return new c(function(b,c){for(var d=0,e=a.length;e>d;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<len; i++ ) {

                    arr[i] = binStr.charCodeAt(i);

                }



                callback( new Blob( [arr], {type: type || 'image/png'} ) );

            }

        });

    }

    /* End Polyfills */



    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;



    function vendorPrefix(prop) {

        if (prop in emptyStyles) {

            return prop;

        }



        var capProp = prop[0].toUpperCase() + prop.slice(1),

            i = cssPrefixes.length;



        while (i--) {

            prop = cssPrefixes[i] + capProp;

            if (prop in emptyStyles) {

                return prop;

            }

        }

    }



    CSS_TRANSFORM = vendorPrefix('transform');

    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 || {};

        for (var property in source) {

            if (source[property] && source[property].constructor && source[property].constructor === Object) {

                destination[property] = destination[property] || {};

                deepExtend(destination[property], source[property]);

            } else {

                destination[property] = source[property];

            }

        }

        return destination;

    }



    function clone(object) {

        return deepExtend({}, object);

    }



    function debounce(func, wait, immediate) {

        var timeout;

        return function () {

            var context = this, args = arguments;

            var later = function () {

                timeout = null;

                if (!immediate) func.apply(context, args);

            };

            var callNow = immediate && !timeout;

            clearTimeout(timeout);

            timeout = setTimeout(later, wait);

            if (callNow) func.apply(context, args);

        };

    }



    function dispatchChange(element) {

        if ("createEvent" in document) {

            var evt = document.createEvent("HTMLEvents");

            evt.initEvent("change", false, true);

            element.dispatchEvent(evt);

        }

        else {

            element.fireEvent("onchange");

        }

    }



    //http://jsperf.com/vanilla-css

    function css(el, styles, val) {

        if (typeof (styles) === 'string') {

            var tmp = styles;

            styles = {};

            styles[tmp] = val;

        }



        for (var prop in styles) {

            el.style[prop] = styles[prop];

        }

    }



    function addClass(el, c) {

        if (el.classList) {

            el.classList.add(c);

        }

        else {

            el.className += ' ' + c;

        }

    }



    function removeClass(el, c) {

        if (el.classList) {

            el.classList.remove(c);

        }

        else {

            el.className = el.className.replace(c, '');

        }

    }



    function setAttributes(el, attrs) {

        for (var key in attrs) {

            el.setAttribute(key, attrs[key]);

        }

    }



    function num(v) {

        return parseInt(v, 10);

    }



    /* Utilities */

    function loadImage(src, doExif) {

        var img = new Image();

        img.style.opacity = 0;

        return new Promise(function (resolve) {

            function _resolve() {

                img.style.opacity = 1;

                setTimeout(function () {

                    resolve(img);

                }, 1);

            }



            img.removeAttribute('crossOrigin');

            if (src.match(/^https?:\/\/|^\/\//)) {

                img.setAttribute('crossOrigin', 'anonymous');

            }



            img.onload = function () {

                if (doExif) {

                    EXIF.getData(img, function () {

                        _resolve();

                    });

                }

                else {

                    _resolve();

                }

            };

            img.src = src;

        });

    }



    function naturalImageDimensions(img, ornt) {

        var w = img.naturalWidth;

        var h = img.naturalHeight;

        var orient = ornt || getExifOrientation(img);

        if (orient && orient >= 5) {

            var x= w;

            w = h;

            h = x;

        }

        return { width: w, height: h };

    }



    /* CSS Transform Prototype */

    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 ? img.exifdata.Orientation : 1;

    }



    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();

    }



    /* Private Methods */

    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);

        // Properties on class

        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.enableOrientation) {

        //     _initRotationControls.call(self);

        // }



        if (self.options.enableResize) {

            _initializeResize.call(self);

        }

    }



    // function _initRotationControls () {

    //     var self = this,

    //         wrap, btnLeft, btnRight, iLeft, iRight;



    //     wrap = document.createElement('div');

    //     self.elements.orientationBtnLeft = btnLeft = document.createElement('button');

    //     self.elements.orientationBtnRight = btnRight = document.createElement('button');



    //     wrap.appendChild(btnLeft);

    //     wrap.appendChild(btnRight);



    //     iLeft = document.createElement('i');

    //     iRight = document.createElement('i');

    //     btnLeft.appendChild(iLeft);

    //     btnRight.appendChild(iRight);



    //     addClass(wrap, 'cr-rotate-controls');

    //     addClass(btnLeft, 'cr-rotate-l');

    //     addClass(btnRight, 'cr-rotate-r');



    //     self.elements.boundary.appendChild(wrap);



    //     btnLeft.addEventListener('click', function () {

    //         self.rotate(-90);

    //     });

    //     btnRight.addEventListener('click', function () {

    //         self.rotate(90);

    //     });

    // }



    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);

            vr.addEventListener('touchstart', mouseDown);

        }



        if (hr) {

            hr.addEventListener('mousedown', mouseDown);

            hr.addEventListener('touchstart', 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; //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

            } else if (ev.detail) {

                delta = ev.detail / -60; //delta min: -3 max: 3 // max x 10 x 2

            } else {

                delta = 0;

            }



            targetZoom = self._currentZoom + (delta * self._currentZoom);



            ev.preventDefault();

            _setZoomerVal.call(self, targetZoom);

            change.call(self);

        }



        self.elements.zoomer.addEventListener('input', change);// this is being fired twice on keypress

        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.bottom < imgRect.bottom + deltaY) {

                    transform.y = top;

                }



                if (vpRect.left > imgRect.left + deltaX && vpRect.right < imgRect.right + deltaX) {

                    transform.x = left;

                }

            }

            else {

                transform.y = top;

                transform.x = left;

            }

        }



        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,

                RIGHT_ARROW = 39,

                DOWN_ARROW  = 40;



            if (ev.shiftKey && (ev.keyCode === UP_ARROW || ev.keyCode === DOWN_ARROW)) {

                var zoom = 0.0;

                if (ev.keyCode === UP_ARROW) {

                    zoom = parseFloat(self.elements.zoomer.value, 10) + parseFloat(self.elements.zoomer.step, 10)

                }

                else {

                    zoom = parseFloat(self.elements.zoomer.value, 10) - parseFloat(self.elements.zoomer.step, 10)

                }

                self.setZoom(zoom);

            }

            else if (self.options.enableKeyMovement && (ev.keyCode >= 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() {

        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();



        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.croppie', 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) {// if the croppie isn't visible or it doesn't need binding

            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;

        self.data.orientation = getExifOrientation(self.elements.img);



        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 = self.options.maxZoom || 1.5,

            initialZoom,

            defaultInitialZoom,

            zoomer = self.elements.zoomer,

            scale = parseFloat(zoomer.value),

            boundaryData = self.elements.boundary.getBoundingClientRect(),

            imgData = naturalImageDimensions(self.elements.img, self.data.orientation),

            vpData = self.elements.viewport.getBoundingClientRect(),

            minW,

            minH;

        if (self.options.enforceBoundary) {

            minW = vpData.width / imgData.width;

            minH = vpData.height / imgData.height;

            minZoom = Math.max(minW, minH);

        }



        if (minZoom >= maxZoom) {

            maxZoom = minZoom + 1;

        }



        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);

        }

        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);

        }



        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],

            // pointsHeight = points[3] - points[1],

            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'),

            startX = 0,

            startY = 0,

            canvasWidth = data.outputWidth || width,

            canvasHeight = data.outputHeight || height,

            customDimensions = (data.outputWidth && data.outputHeight),

            outputWidthRatio = 1,

            outputHeightRatio = 1;



        canvas.width = canvasWidth;

        canvas.height = canvasHeight;



        if (data.backgroundColor) {

            ctx.fillStyle = data.backgroundColor;

            ctx.fillRect(0, 0, canvasWidth, canvasHeight);

        }



        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);

        if (circle) {

            ctx.fillStyle = '#fff';

            ctx.globalCompositeOperation = 'destination-in';

            ctx.beginPath();

            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 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 _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

        }

        this.elements.img = img;

    }



    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) { //refreshing

            _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, hasExif).then(function (img) {

            _replaceImage.call(self, 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 = 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) {

                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();

        }).catch(function (err) {

            console.error("Croppie:" + err);

        });

    }



    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, //border

            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,

            orientation: self.data.orientation

        };

    }



    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(clone(RESULT_DEFAULTS), clone(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 || !this.options.enableOrientation) {

            throw 'Croppie: Cannot rotate without enableOrientation && EXIF.js included';

        }



        var self = this,

            canvas = self.elements.canvas,

            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;

    }



    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) {

        if (element.className.indexOf('croppie-container') > -1) {

            throw new Error("Croppie: Can't initialize croppie more than once");

        }

        this.element = element;

        this.options = deepExtend(clone(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;

}));