From 73b08f4739c95b16ad6345bee91fb3ba99837ba4 Mon Sep 17 00:00:00 2001 From: Chen Fengyuan Date: Sat, 21 Jan 2017 20:44:59 +0800 Subject: [PATCH] Release v1.0.0-beta.1 --- CHANGELOG.md | 6 ++ dist/cropper.css | 4 +- dist/cropper.js | 131 +++++++++++++++++++++---------------------- dist/cropper.min.css | 6 +- dist/cropper.min.js | 8 +-- docs/css/cropper.css | 4 +- docs/index.html | 12 ++-- docs/js/cropper.js | 131 +++++++++++++++++++++---------------------- package.json | 12 ++-- 9 files changed, 159 insertions(+), 155 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a8f8e895a..f3f30aa6f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ # Changelog +## 1.0.0-beta.1 (Jan 21, 2017) + +- Use CSS3 2D Transforms instead of `left` and `top` for better performance (#138). +- Set `withCredentials` attribute when read the image data by XMLHttpRequest (#141). + + ## 1.0.0-beta (Jan 1, 2017) - Supports to set an element for preview (#113). diff --git a/dist/cropper.css b/dist/cropper.css index 1f99c282f..eb8452a21 100644 --- a/dist/cropper.css +++ b/dist/cropper.css @@ -1,11 +1,11 @@ /*! - * Cropper.js v1.0.0-beta + * Cropper.js v1.0.0-beta.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2017 Fengyuan Chen * Released under the MIT license * - * Date: 2017-01-01T08:26:22.116Z + * Date: 2017-01-21T12:28:26.786Z */ .cropper-container { diff --git a/dist/cropper.js b/dist/cropper.js index 2fd66ac7a..14678f8ed 100644 --- a/dist/cropper.js +++ b/dist/cropper.js @@ -1,11 +1,11 @@ /*! - * Cropper.js v1.0.0-beta + * Cropper.js v1.0.0-beta.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2017 Fengyuan Chen * Released under the MIT license * - * Date: 2017-01-01T08:26:22.116Z + * Date: 2017-01-21T12:28:26.786Z */ (function (global, factory) { @@ -253,10 +253,10 @@ var REGEXP_SPACES = /\s+/; var REGEXP_SUFFIX = /^(width|height|left|top|marginLeft|marginTop)$/; var REGEXP_TRIM = /^\s+(.*)\s+$/; var REGEXP_USERAGENT = /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i; -var navigator = typeof window !== 'undefined' ? window.navigator : null; -var IS_SAFARI_OR_UIWEBVIEW = navigator && REGEXP_USERAGENT.test(navigator.userAgent); // Utilities +var navigator = typeof window !== 'undefined' ? window.navigator : null; +var IS_SAFARI_OR_UIWEBVIEW = navigator && REGEXP_USERAGENT.test(navigator.userAgent); var objectProto = Object.prototype; var toString = objectProto.toString; var hasOwnProperty = objectProto.hasOwnProperty; @@ -342,13 +342,8 @@ function extend() { var deep = args[0] === true; var data = deep ? args[1] : args[0]; - if (args.length > 1) { - // if (Object.assign) { - // return Object.assign.apply(Object, args); - // } - + if (isObject(data) && args.length > 1) { args.shift(); - args.forEach(function (arg) { if (isObject(arg)) { Object.keys(arg).forEach(function (key) { @@ -660,12 +655,22 @@ function getImageSize(image, callback) { newImage.src = image.src; } -function getTransform(data) { +function getTransforms(data) { var transforms = []; + var translateX = data.translateX; + var translateY = data.translateY; var rotate = data.rotate; var scaleX = data.scaleX; var scaleY = data.scaleY; + if (isNumber(translateX) && translateX !== 0) { + transforms.push('translateX(' + translateX + 'px)'); + } + + if (isNumber(translateY) && translateY !== 0) { + transforms.push('translateY(' + translateY + 'px)'); + } + // Rotate should come first before scale to match orientation transform if (isNumber(rotate) && rotate !== 0) { transforms.push('rotate(' + rotate + 'deg)'); @@ -679,7 +684,13 @@ function getTransform(data) { transforms.push('scaleY(' + scaleY + ')'); } - return transforms.length ? transforms.join(' ') : 'none'; + var transform = transforms.length ? transforms.join(' ') : 'none'; + + return { + WebkitTransform: transform, + msTransform: transform, + transform: transform + }; } function getRotatedSizes(data, reversed) { @@ -907,10 +918,11 @@ var render$1 = { var element = self.element; var container = self.container; var cropper = self.cropper; + var hidden = 'cropper-hidden'; var containerData = void 0; - addClass(cropper, 'cropper-hidden'); - removeClass(element, 'cropper-hidden'); + addClass(cropper, hidden); + removeClass(element, hidden); self.containerData = containerData = { width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200), @@ -922,8 +934,8 @@ var render$1 = { height: containerData.height }); - addClass(element, 'cropper-hidden'); - removeClass(cropper, 'cropper-hidden'); + addClass(element, hidden); + removeClass(cropper, hidden); }, @@ -978,14 +990,10 @@ var render$1 = { var aspectRatio = canvasData.aspectRatio; var cropBoxData = self.cropBoxData; var cropped = self.cropped && cropBoxData; - var minCanvasWidth = void 0; - var minCanvasHeight = void 0; - var newCanvasLeft = void 0; - var newCanvasTop = void 0; if (sizeLimited) { - minCanvasWidth = Number(options.minCanvasWidth) || 0; - minCanvasHeight = Number(options.minCanvasHeight) || 0; + var minCanvasWidth = Number(options.minCanvasWidth) || 0; + var minCanvasHeight = Number(options.minCanvasHeight) || 0; if (viewMode > 1) { minCanvasWidth = Math.max(minCanvasWidth, containerData.width); @@ -1035,8 +1043,8 @@ var render$1 = { if (positionLimited) { if (viewMode) { - newCanvasLeft = containerData.width - canvasData.width; - newCanvasTop = containerData.height - canvasData.height; + var newCanvasLeft = containerData.width - canvasData.width; + var newCanvasTop = containerData.height - canvasData.height; canvasData.minLeft = Math.min(0, newCanvasLeft); canvasData.minTop = Math.min(0, newCanvasTop); @@ -1130,12 +1138,13 @@ var render$1 = { canvasData.oldLeft = canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft); canvasData.oldTop = canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop); - setStyle(self.canvas, { + setStyle(self.canvas, extend({ width: canvasData.width, - height: canvasData.height, - left: canvasData.left, - top: canvasData.top - }); + height: canvasData.height + }, getTransforms({ + translateX: canvasData.left, + translateY: canvasData.top + }))); self.renderImage(); @@ -1182,17 +1191,13 @@ var render$1 = { top: 0 }); - var transform = getTransform(imageData); - - setStyle(self.image, { + setStyle(self.image, extend({ width: imageData.width, - height: imageData.height, - marginLeft: imageData.left, - marginTop: imageData.top, - WebkitTransform: transform, - msTransform: transform, - transform: transform - }); + height: imageData.height + }, getTransforms(extend({ + translateX: imageData.left, + translateY: imageData.top + }, imageData)))); if (changed) { self.output(); @@ -1240,20 +1245,16 @@ var render$1 = { var canvasData = self.canvasData; var cropBoxData = self.cropBoxData; var limited = self.limited; - var minCropBoxWidth = void 0; - var minCropBoxHeight = void 0; - var maxCropBoxWidth = void 0; - var maxCropBoxHeight = void 0; if (sizeLimited) { - minCropBoxWidth = Number(options.minCropBoxWidth) || 0; - minCropBoxHeight = Number(options.minCropBoxHeight) || 0; + var minCropBoxWidth = Number(options.minCropBoxWidth) || 0; + var minCropBoxHeight = Number(options.minCropBoxHeight) || 0; + var maxCropBoxWidth = Math.min(containerData.width, limited ? canvasData.width : containerData.width); + var maxCropBoxHeight = Math.min(containerData.height, limited ? canvasData.height : containerData.height); // The min/maxCropBoxWidth/Height must be less than containerWidth/Height minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width); minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height); - maxCropBoxWidth = Math.min(containerData.width, limited ? canvasData.width : containerData.width); - maxCropBoxHeight = Math.min(containerData.height, limited ? canvasData.height : containerData.height); if (aspectRatio) { if (minCropBoxWidth && minCropBoxHeight) { @@ -1323,12 +1324,13 @@ var render$1 = { setData$1(self.face, 'action', cropBoxData.width === containerData.width && cropBoxData.height === containerData.height ? 'move' : 'all'); } - setStyle(self.cropBox, { + setStyle(self.cropBox, extend({ width: cropBoxData.width, - height: cropBoxData.height, - left: cropBoxData.left, - top: cropBoxData.top - }); + height: cropBoxData.height + }, getTransforms({ + translateX: cropBoxData.left, + translateY: cropBoxData.top + }))); if (self.cropped && self.limited) { self.limitCanvas(true, true); @@ -1428,12 +1430,6 @@ var preview$1 = { var height = imageData.height; var left = cropBoxData.left - canvasData.left - imageData.left; var top = cropBoxData.top - canvasData.top - imageData.top; - var transform = getTransform(imageData); - var transforms = { - WebkitTransform: transform, - msTransform: transform, - transform: transform - }; if (!self.cropped || self.disabled) { return; @@ -1441,10 +1437,11 @@ var preview$1 = { setStyle(self.image2, extend({ width: width, - height: height, - marginLeft: -left, - marginTop: -top - }, transforms)); + height: height + }, getTransforms(extend({ + translateX: -left, + translateY: -top + }, imageData)))); each(self.previews, function (element) { var data = getData$1(element, DATA_PREVIEW); @@ -1472,10 +1469,11 @@ var preview$1 = { setStyle(getByTag(element, 'img')[0], extend({ width: width * ratio, - height: height * ratio, - marginLeft: -left * ratio, - marginTop: -top * ratio - }, transforms)); + height: height * ratio + }, getTransforms(extend({ + translateX: -left * ratio, + translateY: -top * ratio + }, imageData)))); }); } }; @@ -3220,6 +3218,7 @@ var Cropper = function () { xhr.open('get', url); xhr.responseType = 'arraybuffer'; + xhr.withCredentials = element.crossOrigin === 'use-credentials'; xhr.send(); } }, { diff --git a/dist/cropper.min.css b/dist/cropper.min.css index 2b58a3ae8..ed72abb91 100644 --- a/dist/cropper.min.css +++ b/dist/cropper.min.css @@ -1,11 +1,11 @@ /*! - * Cropper.js v1.0.0-beta + * Cropper.js v1.0.0-beta.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2017 Fengyuan Chen * Released under the MIT license * - * Date: 2017-01-01T08:26:22.116Z + * Date: 2017-01-21T12:28:26.786Z */ -.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr;-ms-touch-action:none;touch-action:none}.cropper-container img{display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;width:100%;height:100%;image-orientation:0deg}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;opacity:.5;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333%;left:0;width:100%;height:33.33333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333%;width:33.33333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:' ';background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;opacity:.1}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75;background-color:#39f}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75}}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:' ';opacity:0;background-color:#39f}.cropper-invisible{opacity:0}.cropper-bg{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC')}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed} \ No newline at end of file +.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr;-ms-touch-action:none;touch-action:none}.cropper-container img{display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;width:100%;height:100%;image-orientation:0deg}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;opacity:.5;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333%;left:0;width:100%;height:33.33333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333%;width:33.33333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:" ";background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;opacity:.1}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75;background-color:#39f}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75}}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:" ";opacity:0;background-color:#39f}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed} \ No newline at end of file diff --git a/dist/cropper.min.js b/dist/cropper.min.js index c7c75c710..66b3f474b 100644 --- a/dist/cropper.min.js +++ b/dist/cropper.min.js @@ -1,12 +1,12 @@ /*! - * Cropper.js v1.0.0-beta + * Cropper.js v1.0.0-beta.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2017 Fengyuan Chen * Released under the MIT license * - * Date: 2017-01-01T08:26:22.116Z + * Date: 2017-01-21T12:28:26.786Z */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Cropper=e()}(this,function(){"use strict";function t(t){return rt.call(t).slice(8,-1).toLowerCase()}function e(t){return"number"==typeof t&&!isNaN(t)}function a(t){return"undefined"==typeof t}function i(t){return"object"===("undefined"==typeof t?"undefined":Z(t))&&null!==t}function o(t){if(!i(t))return!1;try{var e=t.constructor,a=e.prototype;return e&&a&&ht.call(a,"isPrototypeOf")}catch(t){return!1}}function n(e){return"function"===t(e)}function r(e){return Array.isArray?Array.isArray(e):"array"===t(e)}function h(t){return"string"==typeof t&&(t=t.trim?t.trim():t.replace(et,"$1")),t}function c(t,a){if(t&&n(a)){var o=void 0;if(r(t)||e(t.length)){var h=t.length;for(o=0;o1&&(e.shift(),e.forEach(function(t){i(t)&&Object.keys(t).forEach(function(e){o&&i(n[e])?d(!0,n[e],t[e]):n[e]=t[e]})})),n}function s(t,e){for(var a=arguments.length,i=Array(a>2?a-2:0),o=2;o-1}function u(t,a){if(e(t.length))return void c(t,function(t){u(t,a)});if(t.classList)return void t.classList.add(a);var i=h(t.className);i?i.indexOf(a)<0&&(t.className=i+" "+a):t.className=a}function m(t,a){return e(t.length)?void c(t,function(t){m(t,a)}):t.classList?void t.classList.remove(a):void(t.className.indexOf(a)>=0&&(t.className=t.className.replace(a,"")))}function f(t,a,i){return e(t.length)?void c(t,function(t){f(t,a,i)}):void(i?u(t,a):m(t,a))}function g(t){return t.replace(J,"$1-$2").toLowerCase()}function v(t,e){return i(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-"+g(e))}function w(t,e,a){i(a)?t[e]=a:t.dataset?t.dataset[e]=a:t.setAttribute("data-"+g(e),a)}function b(t,e){if(i(t[e]))delete t[e];else if(t.dataset)try{delete t.dataset[e]}catch(a){t.dataset[e]=null}else t.removeAttribute("data-"+g(e))}function x(t,e,a){var i=h(e).split(_);return i.length>1?void c(i,function(e){x(t,e,a)}):void(t.removeEventListener?t.removeEventListener(e,a,!1):t.detachEvent&&t.detachEvent("on"+e,a))}function y(t,e,a,i){var o=h(e).split(_),n=a;return o.length>1?void c(o,function(e){y(t,e,a)}):(i&&(a=function(){for(var i=arguments.length,o=Array(i),r=0;r90?180-a:a)*Math.PI/180,o=Math.sin(i),n=Math.cos(i),r=t.width,h=t.height,c=t.aspectRatio,d=void 0,s=void 0;return e?(d=r/(n+o/c),s=d/c):(d=r*n+h*o,s=r*o+h*n),{width:d,height:s}}function z(t,a){var i=k("canvas"),o=i.getContext("2d"),n=0,r=0,h=a.naturalWidth,c=a.naturalHeight,d=a.rotate,s=a.scaleX,p=a.scaleY,l=e(s)&&e(p)&&(1!==s||1!==p),u=e(d)&&0!==d,m=u||l,f=h*Math.abs(s||1),g=c*Math.abs(p||1),v=void 0,w=void 0,b=void 0;return l&&(v=f/2,w=g/2),u&&(b=O({width:f,height:g,degree:d}),f=b.width,g=b.height,v=f/2,w=g/2),i.width=f,i.height=g,m&&(n=-h/2,r=-c/2,o.save(),o.translate(v,w)),u&&o.rotate(d*Math.PI/180),l&&o.scale(s,p),o.drawImage(t,Math.floor(n),Math.floor(r),Math.floor(h),Math.floor(c)),m&&o.restore(),i}function A(t,e,a){var i="",o=e;for(a+=e;o=8&&(s=n+r)))),s)for(a=e.getUint16(s,h),l=0;l
',Z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},K=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},V=function(){function t(t,e){for(var a=0;aa.width?3===e?c=a.height*h:s=a.width/h:3===e?s=a.width/h:c=a.height*h;var p={naturalWidth:n,naturalHeight:r,aspectRatio:h,width:c,height:s};p.oldLeft=p.left=(a.width-c)/2,p.oldTop=p.top=(a.height-s)/2,t.canvasData=p,t.limited=1===e||2===e,t.limitCanvas(!0,!0),t.initialImageData=d({},i),t.initialCanvasData=d({},p)},limitCanvas:function(t,e){var a=this,i=a.options,o=i.viewMode,n=a.containerData,r=a.canvasData,h=r.aspectRatio,c=a.cropBoxData,d=a.cropped&&c,s=void 0,p=void 0,l=void 0,u=void 0;t&&(s=Number(i.minCanvasWidth)||0,p=Number(i.minCanvasHeight)||0,o>1?(s=Math.max(s,n.width),p=Math.max(p,n.height),3===o&&(p*h>s?s=p*h:p=s/h)):o>0&&(s?s=Math.max(s,d?c.width:0):p?p=Math.max(p,d?c.height:0):d&&(s=c.width,p=c.height,p*h>s?s=p*h:p=s/h)),s&&p?p*h>s?p=s/h:s=p*h:s?p=s/h:p&&(s=p*h),r.minWidth=s,r.minHeight=p,r.maxWidth=1/0,r.maxHeight=1/0),e&&(o?(l=n.width-r.width,u=n.height-r.height,r.minLeft=Math.min(0,l),r.minTop=Math.min(0,u),r.maxLeft=Math.max(0,l),r.maxTop=Math.max(0,u),d&&a.limited&&(r.minLeft=Math.min(c.left,c.left+(c.width-r.width)),r.minTop=Math.min(c.top,c.top+(c.height-r.height)),r.maxLeft=c.left,r.maxTop=c.top,2===o&&(r.width>=n.width&&(r.minLeft=Math.min(0,l),r.maxLeft=Math.max(0,l)),r.height>=n.height&&(r.minTop=Math.min(0,u),r.maxTop=Math.max(0,u))))):(r.minLeft=-r.width,r.minTop=-r.height,r.maxLeft=n.width,r.maxTop=n.height))},renderCanvas:function(t){var e=this,a=e.canvasData,i=e.imageData,o=i.rotate,n=void 0,r=void 0;e.rotated&&(e.rotated=!1,r=O({width:i.width,height:i.height,degree:o}),n=r.width/r.height,n!==a.aspectRatio&&(a.left-=(r.width-a.width)/2,a.top-=(r.height-a.height)/2,a.width=r.width,a.height=r.height,a.aspectRatio=n,a.naturalWidth=i.naturalWidth,a.naturalHeight=i.naturalHeight,o%180&&(r=O({width:i.naturalWidth,height:i.naturalHeight,degree:o}),a.naturalWidth=r.width,a.naturalHeight=r.height),e.limitCanvas(!0,!1))),(a.width>a.maxWidth||a.widtha.maxHeight||a.heighto.width?n.height=n.width/a:n.width=n.height*a),t.cropBoxData=n,t.limitCropBox(!0,!0),n.width=Math.min(Math.max(n.width,n.minWidth),n.maxWidth),n.height=Math.min(Math.max(n.height,n.minHeight),n.maxHeight),n.width=Math.max(n.minWidth,n.width*i),n.height=Math.max(n.minHeight,n.height*i),n.oldLeft=n.left=o.left+(o.width-n.width)/2,n.oldTop=n.top=o.top+(o.height-n.height)/2,t.initialCropBoxData=d({},n)},limitCropBox:function(t,e){var a=this,i=a.options,o=i.aspectRatio,n=a.containerData,r=a.canvasData,h=a.cropBoxData,c=a.limited,d=void 0,s=void 0,p=void 0,l=void 0;t&&(d=Number(i.minCropBoxWidth)||0,s=Number(i.minCropBoxHeight)||0,d=Math.min(d,n.width),s=Math.min(s,n.height),p=Math.min(n.width,c?r.width:n.width),l=Math.min(n.height,c?r.height:n.height),o&&(d&&s?s*o>d?s=d/o:d=s*o:d?s=d/o:s&&(d=s*o),l*o>p?l=p/o:p=l*o),h.minWidth=Math.min(d,p),h.minHeight=Math.min(s,l),h.maxWidth=p,h.maxHeight=l),e&&(c?(h.minLeft=Math.max(0,r.left),h.minTop=Math.max(0,r.top),h.maxLeft=Math.min(n.width,r.left+r.width)-h.width,h.maxTop=Math.min(n.height,r.top+r.height)-h.height):(h.minLeft=0,h.minTop=0,h.maxLeft=n.width-h.width,h.maxTop=n.height-h.height))},renderCropBox:function(){var t=this,e=t.options,a=t.containerData,i=t.cropBoxData;(i.width>i.maxWidth||i.widthi.maxHeight||i.heighti&&(f=i/n,c=o*f,u=i),p(t,{width:c,height:u}),p(B(t,"img")[0],d({width:r*f,height:h*f,marginLeft:-s*f,marginTop:-l*f},m))}))}},lt="undefined"!=typeof window?window.PointerEvent:null,ut=lt?"pointerdown":"touchstart mousedown",mt=lt?"pointermove":"touchmove mousemove",ft=lt?" pointerup pointercancel":"touchend touchcancel mouseup",gt="wheel mousewheel DOMMouseScroll",vt="dblclick",wt="resize",bt="cropstart",xt="cropmove",yt="cropend",Mt="crop",Ct="zoom",Dt={bind:function(){var t=this,e=t.options,a=t.element,i=t.cropper;n(e.cropstart)&&y(a,bt,e.cropstart),n(e.cropmove)&&y(a,xt,e.cropmove),n(e.cropend)&&y(a,yt,e.cropend),n(e.crop)&&y(a,Mt,e.crop),n(e.zoom)&&y(a,Ct,e.zoom),y(i,ut,t.onCropStart=s(t.cropStart,t)),e.zoomable&&e.zoomOnWheel&&y(i,gt,t.onWheel=s(t.wheel,t)),e.toggleDragModeOnDblclick&&y(i,vt,t.onDblclick=s(t.dblclick,t)),y(document,mt,t.onCropMove=s(t.cropMove,t)),y(document,ft,t.onCropEnd=s(t.cropEnd,t)),e.responsive&&y(window,wt,t.onResize=s(t.resize,t))},unbind:function(){var t=this,e=t.options,a=t.element,i=t.cropper;n(e.cropstart)&&x(a,bt,e.cropstart),n(e.cropmove)&&x(a,xt,e.cropmove),n(e.cropend)&&x(a,yt,e.cropend),n(e.crop)&&x(a,Mt,e.crop),n(e.zoom)&&x(a,Ct,e.zoom),x(i,ut,t.onCropStart),e.zoomable&&e.zoomOnWheel&&x(i,gt,t.onWheel),e.toggleDragModeOnDblclick&&x(i,vt,t.onDblclick),x(document,mt,t.onCropMove),x(document,ft,t.onCropEnd),e.responsive&&x(window,wt,t.onResize)}},Bt=/^(e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/,Tt={resize:function(){var t=this,e=t.options.restore,a=t.container,i=t.containerData;if(!t.disabled&&i){var o=a.offsetWidth/i.width,n=void 0,r=void 0;1===o&&a.offsetHeight===i.height||(e&&(n=t.getCanvasData(),r=t.getCropBoxData()),t.render(),e&&(t.setCanvasData(c(n,function(t,e){n[e]=t*o})),t.setCropBoxData(c(r,function(t,e){r[e]=t*o}))))}},dblclick:function(){var t=this;t.disabled||t.setDragMode(l(t.dragBox,"cropper-crop")?"move":"crop")},wheel:function(t){var e=this,a=C(t),i=Number(e.options.wheelZoomRatio)||.1,o=1;e.disabled||(a.preventDefault(),e.wheeling||(e.wheeling=!0,setTimeout(function(){e.wheeling=!1},50),a.deltaY?o=a.deltaY>0?1:-1:a.wheelDelta?o=-a.wheelDelta/120:a.detail&&(o=a.detail>0?1:-1),e.zoom(-o*i,a)))},cropStart:function(t){var e=this;if(!e.disabled){var a=e.options,i=e.pointers,o=C(t),n=void 0;if(o.changedTouches?c(o.changedTouches,function(t){i[t.identifier]=U(t)}):i[o.pointerId||0]=U(o),n=Object.keys(i).length>1&&a.zoomable&&a.zoomOnTouch?"zoom":v(o.target,"action"),Bt.test(n)){if(M(e.element,"cropstart",{originalEvent:o,action:n})===!1)return;o.preventDefault(),e.action=n,e.cropping=!1,"crop"===n&&(e.cropping=!0,u(e.dragBox,"cropper-modal"))}}},cropMove:function(t){var e=this,a=e.action;if(!e.disabled&&a){var i=e.pointers,o=C(t);o.preventDefault(),M(e.element,"cropmove",{originalEvent:o,action:a})!==!1&&(o.changedTouches?c(o.changedTouches,function(t){d(i[t.identifier],U(t,!0))}):d(i[o.pointerId||0],U(o,!0)),e.change(o))}},cropEnd:function(t){var e=this,a=e.action;if(!e.disabled&&a){var i=e.pointers,o=C(t);o.preventDefault(),o.changedTouches?c(o.changedTouches,function(t){delete i[t.identifier]}):delete i[o.pointerId||0],Object.keys(i).length||(e.action=""),e.cropping&&(e.cropping=!1,f(e.dragBox,"cropper-modal",e.cropped&&this.options.modal)),M(e.element,"cropend",{originalEvent:o,action:a})}}},kt="e",Lt="w",Wt="s",Et="n",Ht="se",Xt="sw",Nt="ne",Yt="nw",Ot={change:function(t){var e=this,a=e.options,i=e.containerData,o=e.canvasData,n=e.cropBoxData,r=a.aspectRatio,h=e.action,d=n.width,s=n.height,p=n.left,l=n.top,u=p+d,f=l+s,g=0,v=0,w=i.width,b=i.height,x=!0,y=void 0;!r&&t.shiftKey&&(r=d&&s?d/s:1),e.limited&&(g=n.minLeft,v=n.minTop,w=g+Math.min(i.width,o.width,o.left+o.width),b=v+Math.min(i.height,o.height,o.top+o.height));var M=e.pointers,C=M[Object.keys(M)[0]],B={x:C.endX-C.startX,y:C.endY-C.startY};switch(r&&(B.X=B.y*r,B.Y=B.x/r),h){case"all":p+=B.x,l+=B.y;break;case kt:if(B.x>=0&&(u>=w||r&&(l<=v||f>=b))){x=!1;break}d+=B.x,r&&(s=d/r,l-=B.Y/2),d<0&&(h=Lt,d=0);break;case Et:if(B.y<=0&&(l<=v||r&&(p<=g||u>=w))){x=!1;break}s-=B.y,l+=B.y,r&&(d=s*r,p+=B.X/2),s<0&&(h=Wt,s=0);break;case Lt:if(B.x<=0&&(p<=g||r&&(l<=v||f>=b))){x=!1;break}d-=B.x,p+=B.x,r&&(s=d/r,l+=B.Y/2),d<0&&(h=kt,d=0);break;case Wt:if(B.y>=0&&(f>=b||r&&(p<=g||u>=w))){x=!1;break}s+=B.y,r&&(d=s*r,p-=B.X/2),s<0&&(h=Et,s=0);break;case Nt:if(r){if(B.y<=0&&(l<=v||u>=w)){x=!1;break}s-=B.y,l+=B.y,d=s*r}else B.x>=0?uv&&(s-=B.y,l+=B.y):(s-=B.y,l+=B.y);d<0&&s<0?(h=Xt,s=0,d=0):d<0?(h=Yt,d=0):s<0&&(h=Ht,s=0);break;case Yt:if(r){if(B.y<=0&&(l<=v||p<=g)){x=!1;break}s-=B.y,l+=B.y,d=s*r,p+=B.X}else B.x<=0?p>g?(d-=B.x,p+=B.x):B.y<=0&&l<=v&&(x=!1):(d-=B.x,p+=B.x),B.y<=0?l>v&&(s-=B.y,l+=B.y):(s-=B.y,l+=B.y);d<0&&s<0?(h=Ht,s=0,d=0):d<0?(h=Nt,d=0):s<0&&(h=Xt,s=0);break;case Xt:if(r){if(B.x<=0&&(p<=g||f>=b)){x=!1;break}d-=B.x,p+=B.x,s=d/r}else B.x<=0?p>g?(d-=B.x,p+=B.x):B.y>=0&&f>=b&&(x=!1):(d-=B.x,p+=B.x),B.y>=0?f=0&&(u>=w||f>=b)){x=!1;break}d+=B.x,s=d/r}else B.x>=0?u=0&&f>=b&&(x=!1):d+=B.x,B.y>=0?f0?h=B.y>0?Ht:Nt:B.x<0&&(p-=d,h=B.y>0?Xt:Yt),B.y<0&&(l-=s),e.cropped||(m(e.cropBox,"cropper-hidden"),e.cropped=!0,e.limited&&e.limitCropBox(!0,!0))}x&&(n.width=d,n.height=s,n.left=p,n.top=l,e.action=h,e.renderCropBox()),c(M,function(t){t.startX=t.endX,t.startY=t.endY})}},zt={crop:function(){var t=this;return t.ready&&!t.disabled&&(t.cropped||(t.cropped=!0,t.limitCropBox(!0,!0),t.options.modal&&u(t.dragBox,"cropper-modal"),m(t.cropBox,"cropper-hidden")),t.setCropBoxData(t.initialCropBoxData)),t},reset:function(){var t=this;return t.ready&&!t.disabled&&(t.imageData=d({},t.initialImageData),t.canvasData=d({},t.initialCanvasData),t.cropBoxData=d({},t.initialCropBoxData),t.renderCanvas(),t.cropped&&t.renderCropBox()),t},clear:function(){var t=this;return t.cropped&&!t.disabled&&(d(t.cropBoxData,{left:0,top:0,width:0,height:0}),t.cropped=!1,t.renderCropBox(),t.limitCanvas(),t.renderCanvas(),m(t.dragBox,"cropper-modal"),u(t.cropBox,"cropper-hidden")),t},replace:function(t,e){var a=this;return!a.disabled&&t&&(a.isImg&&(a.element.src=t),e?(a.url=t,a.image.src=t,a.ready&&(a.image2.src=t,c(a.previews,function(e){B(e,"img")[0].src=t}))):(a.isImg&&(a.replaced=!0),a.options.data=null,a.load(t))),a},enable:function(){var t=this;return t.ready&&(t.disabled=!1,m(t.cropper,"cropper-disabled")),t},disable:function(){var t=this;return t.ready&&(t.disabled=!0,u(t.cropper,"cropper-disabled")),t},destroy:function(){var t=this,e=t.element,a=t.image;return t.loaded?(t.isImg&&t.replaced&&(e.src=t.originalUrl),t.unbuild(),m(e,"cropper-hidden")):t.isImg?x(e,"load",t.start):a&&W(a),b(e,"cropper"),t},move:function(t,e){var i=this,o=i.canvasData;return i.moveTo(a(t)?t:o.left+Number(t),a(e)?e:o.top+Number(e))},moveTo:function(t,i){var o=this,n=o.canvasData,r=!1;return a(i)&&(i=t),t=Number(t),i=Number(i),o.ready&&!o.disabled&&o.options.movable&&(e(t)&&(n.left=t,r=!0),e(i)&&(n.top=i,r=!0),r&&o.renderCanvas(!0)),o},zoom:function(t,e){var a=this,i=a.canvasData;return t=Number(t),t=t<0?1/(1-t):1+t,a.zoomTo(i.width*t/i.naturalWidth,e)},zoomTo:function(t,e){var a=this,i=a.options,o=a.canvasData,n=o.width,r=o.height,h=o.naturalWidth,c=o.naturalHeight;if(t=Number(t),t>=0&&a.ready&&!a.disabled&&i.zoomable){var d=h*t,s=c*t;if(M(a.element,"zoom",{originalEvent:e,oldRatio:n/h,ratio:d/h})===!1)return a;if(e){var p=a.pointers,l=D(a.cropper),u=p&&Object.keys(p).length?P(p):{pageX:e.pageX,pageY:e.pageY};o.left-=(d-n)*((u.pageX-l.left-o.left)/n),o.top-=(s-r)*((u.pageY-l.top-o.top)/r)}else o.left-=(d-n)/2,o.top-=(s-r)/2;o.width=d,o.height=s,a.renderCanvas(!0)}return a},rotate:function(t){var e=this;return e.rotateTo((e.imageData.rotate||0)+Number(t))},rotateTo:function(t){var a=this;return t=Number(t),e(t)&&a.ready&&!a.disabled&&a.options.rotatable&&(a.imageData.rotate=t%360,a.rotated=!0,a.renderCanvas(!0)),a},scale:function(t,i){var o=this,n=o.imageData,r=!1;return a(i)&&(i=t),t=Number(t),i=Number(i),o.ready&&!o.disabled&&o.options.scalable&&(e(t)&&(n.scaleX=t,r=!0),e(i)&&(n.scaleY=i,r=!0),r&&o.renderImage(!0)),o},scaleX:function(t){var a=this,i=a.imageData.scaleY;return a.scale(t,e(i)?i:1)},scaleY:function(t){var a=this,i=a.imageData.scaleX;return a.scale(e(i)?i:1,t)},getData:function(t){var e=this,a=e.options,i=e.imageData,o=e.canvasData,n=e.cropBoxData,r=void 0,h=void 0;return e.ready&&e.cropped?(h={x:n.left-o.left,y:n.top-o.top,width:n.width,height:n.height},r=i.width/i.naturalWidth,c(h,function(e,a){e/=r,h[a]=t?Math.round(e):e})):h={x:0,y:0,width:0,height:0},a.rotatable&&(h.rotate=i.rotate||0),a.scalable&&(h.scaleX=i.scaleX||1,h.scaleY=i.scaleY||1),h},setData:function(t){var a=this,i=a.options,r=a.imageData,h=a.canvasData,c={},d=void 0,s=void 0,p=void 0;return n(t)&&(t=t.call(a.element)),a.ready&&!a.disabled&&o(t)&&(i.rotatable&&e(t.rotate)&&t.rotate!==r.rotate&&(r.rotate=t.rotate,a.rotated=d=!0),i.scalable&&(e(t.scaleX)&&t.scaleX!==r.scaleX&&(r.scaleX=t.scaleX,s=!0),e(t.scaleY)&&t.scaleY!==r.scaleY&&(r.scaleY=t.scaleY,s=!0)),d?a.renderCanvas():s&&a.renderImage(),p=r.width/r.naturalWidth,e(t.x)&&(c.left=t.x*p+h.left),e(t.y)&&(c.top=t.y*p+h.top),e(t.width)&&(c.width=t.width*p),e(t.height)&&(c.height=t.height*p),a.setCropBoxData(c)),a},getContainerData:function(){var t=this;return t.ready?t.containerData:{}},getImageData:function(){var t=this;return t.loaded?t.imageData:{}},getCanvasData:function(){var t=this,e=t.canvasData,a={};return t.ready&&c(["left","top","width","height","naturalWidth","naturalHeight"],function(t){a[t]=e[t]}),a},setCanvasData:function(t){var a=this,i=a.canvasData,r=i.aspectRatio;return n(t)&&(t=t.call(a.element)),a.ready&&!a.disabled&&o(t)&&(e(t.left)&&(i.left=t.left),e(t.top)&&(i.top=t.top),e(t.width)?(i.width=t.width,i.height=t.width/r):e(t.height)&&(i.height=t.height,i.width=t.height*r),a.renderCanvas(!0)),a},getCropBoxData:function(){var t=this,e=t.cropBoxData,a=void 0;return t.ready&&t.cropped&&(a={left:e.left,top:e.top,width:e.width,height:e.height}),a||{}},setCropBoxData:function(t){var a=this,i=a.cropBoxData,r=a.options.aspectRatio,h=void 0,c=void 0;return n(t)&&(t=t.call(a.element)),a.ready&&a.cropped&&!a.disabled&&o(t)&&(e(t.left)&&(i.left=t.left),e(t.top)&&(i.top=t.top),e(t.width)&&t.width!==i.width&&(h=!0,i.width=t.width),e(t.height)&&t.height!==i.height&&(c=!0,i.height=t.height),r&&(h?i.height=i.width/r:c&&(i.width=i.height*r)),a.renderCropBox()),a},getCroppedCanvas:function(t){var e=this;if(!e.ready||!window.HTMLCanvasElement)return null;if(!e.cropped)return z(e.image,e.imageData);o(t)||(t={});var a=e.getData(),i=a.width,n=a.height,r=i/n,h=void 0,c=void 0,d=void 0;o(t)&&(h=t.width,c=t.height,h?(c=h/r,d=h/i):c&&(h=c*r,d=c/n));var s=Math.floor(h||i),p=Math.floor(c||n),l=k("canvas"),u=l.getContext("2d");l.width=s,l.height=p,t.fillColor&&(u.fillStyle=t.fillColor,u.fillRect(0,0,s,p));var m=function(){var t=z(e.image,e.imageData),o=t.width,r=t.height,h=e.canvasData,c=[t],s=a.x+h.naturalWidth*(Math.abs(a.scaleX||1)-1)/2,p=a.y+h.naturalHeight*(Math.abs(a.scaleY||1)-1)/2,l=void 0,u=void 0,m=void 0,f=void 0,g=void 0,v=void 0;return s<=-i||s>o?s=l=m=g=0:s<=0?(m=-s,s=0,l=g=Math.min(o,i+s)):s<=o&&(m=0,l=g=Math.min(i,o-s)),l<=0||p<=-n||p>r?p=u=f=v=0:p<=0?(f=-p,p=0,u=v=Math.min(r,n+p)):p<=r&&(f=0,u=v=Math.min(n,r-p)),c.push(Math.floor(s),Math.floor(p),Math.floor(l),Math.floor(u)),d&&(m*=d,f*=d,g*=d,v*=d),g>0&&v>0&&c.push(Math.floor(m),Math.floor(f),Math.floor(g),Math.floor(v)),c}();return u.drawImage.apply(u,F(m)),l},setAspectRatio:function(t){var e=this,i=e.options;return e.disabled||a(t)||(i.aspectRatio=Math.max(0,t)||NaN,e.ready&&(e.initCropBox(),e.cropped&&e.renderCropBox())),e},setDragMode:function(t){var e=this,a=e.options,i=e.dragBox,o=e.face,n=void 0,r=void 0;return e.loaded&&!e.disabled&&(n="crop"===t,r=a.movable&&"move"===t,t=n||r?t:"none",w(i,"action",t),f(i,"cropper-crop",n),f(i,"cropper-move",r),a.cropBoxMovable||(w(o,"action",t),f(o,"cropper-crop",n),f(o,"cropper-move",r))),e}},At="cropper",Rt=At+"-hidden",It="error",St="load",Ut="ready",jt="crop",Pt=/^data:/,qt=/^data:image\/jpeg.*;base64,/,$t=void 0,Zt=function(){function t(e,a){K(this,t);var i=this;i.element=e,i.options=d({},q,o(a)&&a),i.loaded=!1,i.ready=!1,i.complete=!1,i.rotated=!1,i.cropped=!1,i.disabled=!1,i.replaced=!1,i.limited=!1,i.wheeling=!1,i.isImg=!1,i.originalUrl="",i.canvasData=null,i.cropBoxData=null,i.previews=null,i.pointers={},i.init()}return V(t,[{key:"init",value:function(){var t=this,e=t.element,a=e.tagName.toLowerCase(),i=void 0;if(!v(e,At)){if(w(e,At,t),"img"===a){if(t.isImg=!0,t.originalUrl=i=e.getAttribute("src"),!i)return;i=e.src}else"canvas"===a&&window.HTMLCanvasElement&&(i=e.toDataURL());t.load(i)}}},{key:"load",value:function(t){var e=this,a=e.options,i=e.element;if(t){if(e.url=t,e.imageData={},!a.checkOrientation||!window.ArrayBuffer)return void e.clone();if(Pt.test(t))return void(qt?e.read(I(t)):e.clone());var o=new XMLHttpRequest;o.onerror=o.onabort=function(){e.clone()},o.onload=function(){e.read(o.response)},a.checkCrossOrigin&&H(t)&&i.crossOrigin&&(t=X(t)),o.open("get",t),o.responseType="arraybuffer",o.send()}}},{key:"read",value:function(t){var e=this,a=e.options,i=R(t),o=e.imageData,n=0,r=1,h=1;if(i>1)switch(e.url=S(t),i){case 2:r=-1;break;case 3:n=-180;break;case 4:h=-1;break;case 5:n=90,h=-1;break;case 6:n=90;break;case 7:n=90,r=-1;break;case 8:n=-90}a.rotatable&&(o.rotate=n),a.scalable&&(o.scaleX=r,o.scaleY=h),e.clone()}},{key:"clone",value:function(){var t=this,e=t.element,a=t.url,i=void 0,o=void 0,n=void 0,r=void 0;t.options.checkCrossOrigin&&H(a)&&(i=e.crossOrigin,i?o=a:(i="anonymous",o=X(a))),t.crossOrigin=i,t.crossOriginUrl=o;var h=k("img");i&&(h.crossOrigin=i),h.src=o||a,t.image=h,t.onStart=n=s(t.start,t),t.onStop=r=s(t.stop,t),t.isImg?e.complete?t.start():y(e,St,n):(y(h,St,n),y(h,It,r),u(h,"cropper-hide"),e.parentNode.insertBefore(h,e.nextSibling))}},{key:"start",value:function(t){var e=this,a=e.isImg?e.element:e.image;t&&(x(a,St,e.onStart),x(a,It,e.onStop)),N(a,function(t,a){d(e.imageData,{naturalWidth:t,naturalHeight:a,aspectRatio:t/a}),e.loaded=!0,e.build()})}},{key:"stop",value:function(){var t=this,e=t.image;x(e,St,t.onStart),x(e,It,t.onStop),W(e),t.image=null}},{key:"build",value:function(){var t=this,e=t.options,a=t.element,i=t.image,o=void 0,r=void 0,h=void 0,c=void 0,d=void 0,s=void 0;if(t.loaded){t.ready&&t.unbuild();var p=k("div");p.innerHTML=$,t.container=o=a.parentNode,t.cropper=r=T(p,"cropper-container")[0],t.canvas=h=T(r,"cropper-canvas")[0],t.dragBox=c=T(r,"cropper-drag-box")[0],t.cropBox=d=T(r,"cropper-crop-box")[0],t.viewBox=T(r,"cropper-view-box")[0],t.face=s=T(d,"cropper-face")[0],L(h,i),u(a,Rt),o.insertBefore(r,a.nextSibling),t.isImg||m(i,"cropper-hide"),t.initPreview(),t.bind(),e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,t.cropped=e.autoCrop,e.autoCrop?e.modal&&u(c,"cropper-modal"):u(d,Rt),e.guides||u(T(d,"cropper-dashed"),Rt),e.center||u(T(d,"cropper-center"),Rt),e.background&&u(r,"cropper-bg"),e.highlight||u(s,"cropper-invisible"),e.cropBoxMovable&&(u(s,"cropper-move"),w(s,"action","all")),e.cropBoxResizable||(u(T(d,"cropper-line"),Rt), -u(T(d,"cropper-point"),Rt)),t.setDragMode(e.dragMode),t.render(),t.ready=!0,t.setData(e.data),t.completing=setTimeout(function(){n(e.ready)&&y(a,Ut,e.ready,!0),M(a,Ut),M(a,jt,t.getData()),t.complete=!0},0)}}},{key:"unbuild",value:function(){var t=this;t.ready&&(t.complete||clearTimeout(t.completing),t.ready=!1,t.complete=!1,t.initialImageData=null,t.initialCanvasData=null,t.initialCropBoxData=null,t.containerData=null,t.canvasData=null,t.cropBoxData=null,t.unbind(),t.resetPreview(),t.previews=null,t.viewBox=null,t.cropBox=null,t.dragBox=null,t.canvas=null,t.container=null,W(t.cropper),t.cropper=null)}}],[{key:"noConflict",value:function(){return window.Cropper=$t,t}},{key:"setDefaults",value:function(t){d(q,o(t)&&t)}}]),t}();return d(Zt.prototype,dt),d(Zt.prototype,pt),d(Zt.prototype,Dt),d(Zt.prototype,Tt),d(Zt.prototype,Ot),d(Zt.prototype,zt),"undefined"!=typeof window&&($t=window.Cropper,window.Cropper=Zt),Zt}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Cropper=e()}(this,function(){"use strict";function t(t){return rt.call(t).slice(8,-1).toLowerCase()}function e(t){return"number"==typeof t&&!isNaN(t)}function a(t){return"undefined"==typeof t}function i(t){return"object"===("undefined"==typeof t?"undefined":Z(t))&&null!==t}function o(t){if(!i(t))return!1;try{var e=t.constructor,a=e.prototype;return e&&a&&ht.call(a,"isPrototypeOf")}catch(t){return!1}}function n(e){return"function"===t(e)}function r(e){return Array.isArray?Array.isArray(e):"array"===t(e)}function h(t){return"string"==typeof t&&(t=t.trim?t.trim():t.replace(et,"$1")),t}function c(t,a){if(t&&n(a)){var o=void 0;if(r(t)||e(t.length)){var h=t.length;for(o=0;o1&&(e.shift(),e.forEach(function(t){i(t)&&Object.keys(t).forEach(function(e){o&&i(n[e])?s(!0,n[e],t[e]):n[e]=t[e]})})),n}function d(t,e){for(var a=arguments.length,i=Array(a>2?a-2:0),o=2;o-1}function u(t,a){if(e(t.length))return void c(t,function(t){u(t,a)});if(t.classList)return void t.classList.add(a);var i=h(t.className);i?i.indexOf(a)<0&&(t.className=i+" "+a):t.className=a}function m(t,a){return e(t.length)?void c(t,function(t){m(t,a)}):t.classList?void t.classList.remove(a):void(t.className.indexOf(a)>=0&&(t.className=t.className.replace(a,"")))}function f(t,a,i){return e(t.length)?void c(t,function(t){f(t,a,i)}):void(i?u(t,a):m(t,a))}function g(t){return t.replace(J,"$1-$2").toLowerCase()}function v(t,e){return i(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-"+g(e))}function w(t,e,a){i(a)?t[e]=a:t.dataset?t.dataset[e]=a:t.setAttribute("data-"+g(e),a)}function b(t,e){if(i(t[e]))delete t[e];else if(t.dataset)try{delete t.dataset[e]}catch(a){t.dataset[e]=null}else t.removeAttribute("data-"+g(e))}function x(t,e,a){var i=h(e).split(_);return i.length>1?void c(i,function(e){x(t,e,a)}):void(t.removeEventListener?t.removeEventListener(e,a,!1):t.detachEvent&&t.detachEvent("on"+e,a))}function y(t,e,a,i){var o=h(e).split(_),n=a;return o.length>1?void c(o,function(e){y(t,e,a)}):(i&&(a=function(){for(var i=arguments.length,o=Array(i),r=0;r90?180-a:a)*Math.PI/180,o=Math.sin(i),n=Math.cos(i),r=t.width,h=t.height,c=t.aspectRatio,s=void 0,d=void 0;return e?(s=r/(n+o/c),d=s/c):(s=r*n+h*o,d=r*o+h*n),{width:s,height:d}}function z(t,a){var i=T("canvas"),o=i.getContext("2d"),n=0,r=0,h=a.naturalWidth,c=a.naturalHeight,s=a.rotate,d=a.scaleX,l=a.scaleY,p=e(d)&&e(l)&&(1!==d||1!==l),u=e(s)&&0!==s,m=u||p,f=h*Math.abs(d||1),g=c*Math.abs(l||1),v=void 0,w=void 0,b=void 0;return p&&(v=f/2,w=g/2),u&&(b=O({width:f,height:g,degree:s}),f=b.width,g=b.height,v=f/2,w=g/2),i.width=f,i.height=g,m&&(n=-h/2,r=-c/2,o.save(),o.translate(v,w)),u&&o.rotate(s*Math.PI/180),p&&o.scale(d,l),o.drawImage(t,Math.floor(n),Math.floor(r),Math.floor(h),Math.floor(c)),m&&o.restore(),i}function A(t,e,a){var i="",o=e;for(a+=e;o=8&&(d=n+r)))),d)for(a=e.getUint16(d,h),p=0;p
',Z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},K=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},V=function(){function t(t,e){for(var a=0;aa.width?3===e?c=a.height*h:d=a.width/h:3===e?d=a.width/h:c=a.height*h;var l={naturalWidth:n,naturalHeight:r,aspectRatio:h,width:c,height:d};l.oldLeft=l.left=(a.width-c)/2,l.oldTop=l.top=(a.height-d)/2,t.canvasData=l,t.limited=1===e||2===e,t.limitCanvas(!0,!0),t.initialImageData=s({},i),t.initialCanvasData=s({},l)},limitCanvas:function(t,e){var a=this,i=a.options,o=i.viewMode,n=a.containerData,r=a.canvasData,h=r.aspectRatio,c=a.cropBoxData,s=a.cropped&&c;if(t){var d=Number(i.minCanvasWidth)||0,l=Number(i.minCanvasHeight)||0;o>1?(d=Math.max(d,n.width),l=Math.max(l,n.height),3===o&&(l*h>d?d=l*h:l=d/h)):o>0&&(d?d=Math.max(d,s?c.width:0):l?l=Math.max(l,s?c.height:0):s&&(d=c.width,l=c.height,l*h>d?d=l*h:l=d/h)),d&&l?l*h>d?l=d/h:d=l*h:d?l=d/h:l&&(d=l*h),r.minWidth=d,r.minHeight=l,r.maxWidth=1/0,r.maxHeight=1/0}if(e)if(o){var p=n.width-r.width,u=n.height-r.height;r.minLeft=Math.min(0,p),r.minTop=Math.min(0,u),r.maxLeft=Math.max(0,p),r.maxTop=Math.max(0,u),s&&a.limited&&(r.minLeft=Math.min(c.left,c.left+(c.width-r.width)),r.minTop=Math.min(c.top,c.top+(c.height-r.height)),r.maxLeft=c.left,r.maxTop=c.top,2===o&&(r.width>=n.width&&(r.minLeft=Math.min(0,p),r.maxLeft=Math.max(0,p)),r.height>=n.height&&(r.minTop=Math.min(0,u),r.maxTop=Math.max(0,u))))}else r.minLeft=-r.width,r.minTop=-r.height,r.maxLeft=n.width,r.maxTop=n.height},renderCanvas:function(t){var e=this,a=e.canvasData,i=e.imageData,o=i.rotate,n=void 0,r=void 0;e.rotated&&(e.rotated=!1,r=O({width:i.width,height:i.height,degree:o}),n=r.width/r.height,n!==a.aspectRatio&&(a.left-=(r.width-a.width)/2,a.top-=(r.height-a.height)/2,a.width=r.width,a.height=r.height,a.aspectRatio=n,a.naturalWidth=i.naturalWidth,a.naturalHeight=i.naturalHeight,o%180&&(r=O({width:i.naturalWidth,height:i.naturalHeight,degree:o}),a.naturalWidth=r.width,a.naturalHeight=r.height),e.limitCanvas(!0,!1))),(a.width>a.maxWidth||a.widtha.maxHeight||a.heighto.width?n.height=n.width/a:n.width=n.height*a),t.cropBoxData=n,t.limitCropBox(!0,!0),n.width=Math.min(Math.max(n.width,n.minWidth),n.maxWidth),n.height=Math.min(Math.max(n.height,n.minHeight),n.maxHeight),n.width=Math.max(n.minWidth,n.width*i),n.height=Math.max(n.minHeight,n.height*i),n.oldLeft=n.left=o.left+(o.width-n.width)/2,n.oldTop=n.top=o.top+(o.height-n.height)/2,t.initialCropBoxData=s({},n)},limitCropBox:function(t,e){var a=this,i=a.options,o=i.aspectRatio,n=a.containerData,r=a.canvasData,h=a.cropBoxData,c=a.limited;if(t){var s=Number(i.minCropBoxWidth)||0,d=Number(i.minCropBoxHeight)||0,l=Math.min(n.width,c?r.width:n.width),p=Math.min(n.height,c?r.height:n.height);s=Math.min(s,n.width),d=Math.min(d,n.height),o&&(s&&d?d*o>s?d=s/o:s=d*o:s?d=s/o:d&&(s=d*o),p*o>l?p=l/o:l=p*o),h.minWidth=Math.min(s,l),h.minHeight=Math.min(d,p),h.maxWidth=l,h.maxHeight=p}e&&(c?(h.minLeft=Math.max(0,r.left),h.minTop=Math.max(0,r.top),h.maxLeft=Math.min(n.width,r.left+r.width)-h.width,h.maxTop=Math.min(n.height,r.top+r.height)-h.height):(h.minLeft=0,h.minTop=0,h.maxLeft=n.width-h.width,h.maxTop=n.height-h.height))},renderCropBox:function(){var t=this,e=t.options,a=t.containerData,i=t.cropBoxData;(i.width>i.maxWidth||i.widthi.maxHeight||i.heightc&&(f=c/n,u=o*f,m=c),l(t,{width:u,height:m}),l(B(t,"img")[0],s({width:r*f,height:h*f},N(s({translateX:-d*f,translateY:-p*f},e))))}))}},pt="undefined"!=typeof window?window.PointerEvent:null,ut=pt?"pointerdown":"touchstart mousedown",mt=pt?"pointermove":"touchmove mousemove",ft=pt?" pointerup pointercancel":"touchend touchcancel mouseup",gt="wheel mousewheel DOMMouseScroll",vt="dblclick",wt="resize",bt="cropstart",xt="cropmove",yt="cropend",Mt="crop",Ct="zoom",Dt={bind:function(){var t=this,e=t.options,a=t.element,i=t.cropper;n(e.cropstart)&&y(a,bt,e.cropstart),n(e.cropmove)&&y(a,xt,e.cropmove),n(e.cropend)&&y(a,yt,e.cropend),n(e.crop)&&y(a,Mt,e.crop),n(e.zoom)&&y(a,Ct,e.zoom),y(i,ut,t.onCropStart=d(t.cropStart,t)),e.zoomable&&e.zoomOnWheel&&y(i,gt,t.onWheel=d(t.wheel,t)),e.toggleDragModeOnDblclick&&y(i,vt,t.onDblclick=d(t.dblclick,t)),y(document,mt,t.onCropMove=d(t.cropMove,t)),y(document,ft,t.onCropEnd=d(t.cropEnd,t)),e.responsive&&y(window,wt,t.onResize=d(t.resize,t))},unbind:function(){var t=this,e=t.options,a=t.element,i=t.cropper;n(e.cropstart)&&x(a,bt,e.cropstart),n(e.cropmove)&&x(a,xt,e.cropmove),n(e.cropend)&&x(a,yt,e.cropend),n(e.crop)&&x(a,Mt,e.crop),n(e.zoom)&&x(a,Ct,e.zoom),x(i,ut,t.onCropStart),e.zoomable&&e.zoomOnWheel&&x(i,gt,t.onWheel),e.toggleDragModeOnDblclick&&x(i,vt,t.onDblclick),x(document,mt,t.onCropMove),x(document,ft,t.onCropEnd),e.responsive&&x(window,wt,t.onResize)}},Bt=/^(e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/,kt={resize:function(){var t=this,e=t.options.restore,a=t.container,i=t.containerData;if(!t.disabled&&i){var o=a.offsetWidth/i.width,n=void 0,r=void 0;1===o&&a.offsetHeight===i.height||(e&&(n=t.getCanvasData(),r=t.getCropBoxData()),t.render(),e&&(t.setCanvasData(c(n,function(t,e){n[e]=t*o})),t.setCropBoxData(c(r,function(t,e){r[e]=t*o}))))}},dblclick:function(){var t=this;t.disabled||t.setDragMode(p(t.dragBox,"cropper-crop")?"move":"crop")},wheel:function(t){var e=this,a=C(t),i=Number(e.options.wheelZoomRatio)||.1,o=1;e.disabled||(a.preventDefault(),e.wheeling||(e.wheeling=!0,setTimeout(function(){e.wheeling=!1},50),a.deltaY?o=a.deltaY>0?1:-1:a.wheelDelta?o=-a.wheelDelta/120:a.detail&&(o=a.detail>0?1:-1),e.zoom(-o*i,a)))},cropStart:function(t){var e=this;if(!e.disabled){var a=e.options,i=e.pointers,o=C(t),n=void 0;if(o.changedTouches?c(o.changedTouches,function(t){i[t.identifier]=U(t)}):i[o.pointerId||0]=U(o),n=Object.keys(i).length>1&&a.zoomable&&a.zoomOnTouch?"zoom":v(o.target,"action"),Bt.test(n)){if(M(e.element,"cropstart",{originalEvent:o,action:n})===!1)return;o.preventDefault(),e.action=n,e.cropping=!1,"crop"===n&&(e.cropping=!0,u(e.dragBox,"cropper-modal"))}}},cropMove:function(t){var e=this,a=e.action;if(!e.disabled&&a){var i=e.pointers,o=C(t);o.preventDefault(),M(e.element,"cropmove",{originalEvent:o,action:a})!==!1&&(o.changedTouches?c(o.changedTouches,function(t){s(i[t.identifier],U(t,!0))}):s(i[o.pointerId||0],U(o,!0)),e.change(o))}},cropEnd:function(t){var e=this,a=e.action;if(!e.disabled&&a){var i=e.pointers,o=C(t);o.preventDefault(),o.changedTouches?c(o.changedTouches,function(t){delete i[t.identifier]}):delete i[o.pointerId||0],Object.keys(i).length||(e.action=""),e.cropping&&(e.cropping=!1,f(e.dragBox,"cropper-modal",e.cropped&&this.options.modal)),M(e.element,"cropend",{originalEvent:o,action:a})}}},Tt="e",Lt="w",Wt="s",Xt="n",Yt="se",Et="sw",Ht="ne",Nt="nw",Ot={change:function(t){var e=this,a=e.options,i=e.containerData,o=e.canvasData,n=e.cropBoxData,r=a.aspectRatio,h=e.action,s=n.width,d=n.height,l=n.left,p=n.top,u=l+s,f=p+d,g=0,v=0,w=i.width,b=i.height,x=!0,y=void 0;!r&&t.shiftKey&&(r=s&&d?s/d:1),e.limited&&(g=n.minLeft,v=n.minTop,w=g+Math.min(i.width,o.width,o.left+o.width),b=v+Math.min(i.height,o.height,o.top+o.height));var M=e.pointers,C=M[Object.keys(M)[0]],B={x:C.endX-C.startX,y:C.endY-C.startY};switch(r&&(B.X=B.y*r,B.Y=B.x/r),h){case"all":l+=B.x,p+=B.y;break;case Tt:if(B.x>=0&&(u>=w||r&&(p<=v||f>=b))){x=!1;break}s+=B.x,r&&(d=s/r,p-=B.Y/2),s<0&&(h=Lt,s=0);break;case Xt:if(B.y<=0&&(p<=v||r&&(l<=g||u>=w))){x=!1;break}d-=B.y,p+=B.y,r&&(s=d*r,l+=B.X/2),d<0&&(h=Wt,d=0);break;case Lt:if(B.x<=0&&(l<=g||r&&(p<=v||f>=b))){x=!1;break}s-=B.x,l+=B.x,r&&(d=s/r,p+=B.Y/2),s<0&&(h=Tt,s=0);break;case Wt:if(B.y>=0&&(f>=b||r&&(l<=g||u>=w))){x=!1;break}d+=B.y,r&&(s=d*r,l-=B.X/2),d<0&&(h=Xt,d=0);break;case Ht:if(r){if(B.y<=0&&(p<=v||u>=w)){x=!1;break}d-=B.y,p+=B.y,s=d*r}else B.x>=0?uv&&(d-=B.y,p+=B.y):(d-=B.y,p+=B.y);s<0&&d<0?(h=Et,d=0,s=0):s<0?(h=Nt,s=0):d<0&&(h=Yt,d=0);break;case Nt:if(r){if(B.y<=0&&(p<=v||l<=g)){x=!1;break}d-=B.y,p+=B.y,s=d*r,l+=B.X}else B.x<=0?l>g?(s-=B.x,l+=B.x):B.y<=0&&p<=v&&(x=!1):(s-=B.x,l+=B.x),B.y<=0?p>v&&(d-=B.y,p+=B.y):(d-=B.y,p+=B.y);s<0&&d<0?(h=Yt,d=0,s=0):s<0?(h=Ht,s=0):d<0&&(h=Et,d=0);break;case Et:if(r){if(B.x<=0&&(l<=g||f>=b)){x=!1;break}s-=B.x,l+=B.x,d=s/r}else B.x<=0?l>g?(s-=B.x,l+=B.x):B.y>=0&&f>=b&&(x=!1):(s-=B.x,l+=B.x),B.y>=0?f=0&&(u>=w||f>=b)){x=!1;break}s+=B.x,d=s/r}else B.x>=0?u=0&&f>=b&&(x=!1):s+=B.x,B.y>=0?f0?h=B.y>0?Yt:Ht:B.x<0&&(l-=s,h=B.y>0?Et:Nt),B.y<0&&(p-=d),e.cropped||(m(e.cropBox,"cropper-hidden"),e.cropped=!0,e.limited&&e.limitCropBox(!0,!0))}x&&(n.width=s,n.height=d,n.left=l,n.top=p,e.action=h,e.renderCropBox()),c(M,function(t){t.startX=t.endX,t.startY=t.endY})}},zt={crop:function(){var t=this;return t.ready&&!t.disabled&&(t.cropped||(t.cropped=!0,t.limitCropBox(!0,!0),t.options.modal&&u(t.dragBox,"cropper-modal"),m(t.cropBox,"cropper-hidden")),t.setCropBoxData(t.initialCropBoxData)),t},reset:function(){var t=this;return t.ready&&!t.disabled&&(t.imageData=s({},t.initialImageData),t.canvasData=s({},t.initialCanvasData),t.cropBoxData=s({},t.initialCropBoxData),t.renderCanvas(),t.cropped&&t.renderCropBox()),t},clear:function(){var t=this;return t.cropped&&!t.disabled&&(s(t.cropBoxData,{left:0,top:0,width:0,height:0}),t.cropped=!1,t.renderCropBox(),t.limitCanvas(),t.renderCanvas(),m(t.dragBox,"cropper-modal"),u(t.cropBox,"cropper-hidden")),t},replace:function(t,e){var a=this;return!a.disabled&&t&&(a.isImg&&(a.element.src=t),e?(a.url=t,a.image.src=t,a.ready&&(a.image2.src=t,c(a.previews,function(e){B(e,"img")[0].src=t}))):(a.isImg&&(a.replaced=!0),a.options.data=null,a.load(t))),a},enable:function(){var t=this;return t.ready&&(t.disabled=!1,m(t.cropper,"cropper-disabled")),t},disable:function(){var t=this;return t.ready&&(t.disabled=!0,u(t.cropper,"cropper-disabled")),t},destroy:function(){var t=this,e=t.element,a=t.image;return t.loaded?(t.isImg&&t.replaced&&(e.src=t.originalUrl),t.unbuild(),m(e,"cropper-hidden")):t.isImg?x(e,"load",t.start):a&&W(a),b(e,"cropper"),t},move:function(t,e){var i=this,o=i.canvasData;return i.moveTo(a(t)?t:o.left+Number(t),a(e)?e:o.top+Number(e))},moveTo:function(t,i){var o=this,n=o.canvasData,r=!1;return a(i)&&(i=t),t=Number(t),i=Number(i),o.ready&&!o.disabled&&o.options.movable&&(e(t)&&(n.left=t,r=!0),e(i)&&(n.top=i,r=!0),r&&o.renderCanvas(!0)),o},zoom:function(t,e){var a=this,i=a.canvasData;return t=Number(t),t=t<0?1/(1-t):1+t,a.zoomTo(i.width*t/i.naturalWidth,e)},zoomTo:function(t,e){var a=this,i=a.options,o=a.canvasData,n=o.width,r=o.height,h=o.naturalWidth,c=o.naturalHeight;if(t=Number(t),t>=0&&a.ready&&!a.disabled&&i.zoomable){var s=h*t,d=c*t;if(M(a.element,"zoom",{originalEvent:e,oldRatio:n/h,ratio:s/h})===!1)return a;if(e){var l=a.pointers,p=D(a.cropper),u=l&&Object.keys(l).length?P(l):{pageX:e.pageX,pageY:e.pageY};o.left-=(s-n)*((u.pageX-p.left-o.left)/n),o.top-=(d-r)*((u.pageY-p.top-o.top)/r)}else o.left-=(s-n)/2,o.top-=(d-r)/2;o.width=s,o.height=d,a.renderCanvas(!0)}return a},rotate:function(t){var e=this;return e.rotateTo((e.imageData.rotate||0)+Number(t))},rotateTo:function(t){var a=this;return t=Number(t),e(t)&&a.ready&&!a.disabled&&a.options.rotatable&&(a.imageData.rotate=t%360,a.rotated=!0,a.renderCanvas(!0)),a},scale:function(t,i){var o=this,n=o.imageData,r=!1;return a(i)&&(i=t),t=Number(t),i=Number(i),o.ready&&!o.disabled&&o.options.scalable&&(e(t)&&(n.scaleX=t,r=!0),e(i)&&(n.scaleY=i,r=!0),r&&o.renderImage(!0)),o},scaleX:function(t){var a=this,i=a.imageData.scaleY;return a.scale(t,e(i)?i:1)},scaleY:function(t){var a=this,i=a.imageData.scaleX;return a.scale(e(i)?i:1,t)},getData:function(t){var e=this,a=e.options,i=e.imageData,o=e.canvasData,n=e.cropBoxData,r=void 0,h=void 0;return e.ready&&e.cropped?(h={x:n.left-o.left,y:n.top-o.top,width:n.width,height:n.height},r=i.width/i.naturalWidth,c(h,function(e,a){e/=r,h[a]=t?Math.round(e):e})):h={x:0,y:0,width:0,height:0},a.rotatable&&(h.rotate=i.rotate||0),a.scalable&&(h.scaleX=i.scaleX||1,h.scaleY=i.scaleY||1),h},setData:function(t){var a=this,i=a.options,r=a.imageData,h=a.canvasData,c={},s=void 0,d=void 0,l=void 0;return n(t)&&(t=t.call(a.element)),a.ready&&!a.disabled&&o(t)&&(i.rotatable&&e(t.rotate)&&t.rotate!==r.rotate&&(r.rotate=t.rotate,a.rotated=s=!0),i.scalable&&(e(t.scaleX)&&t.scaleX!==r.scaleX&&(r.scaleX=t.scaleX,d=!0),e(t.scaleY)&&t.scaleY!==r.scaleY&&(r.scaleY=t.scaleY,d=!0)),s?a.renderCanvas():d&&a.renderImage(),l=r.width/r.naturalWidth,e(t.x)&&(c.left=t.x*l+h.left),e(t.y)&&(c.top=t.y*l+h.top),e(t.width)&&(c.width=t.width*l),e(t.height)&&(c.height=t.height*l),a.setCropBoxData(c)),a},getContainerData:function(){var t=this;return t.ready?t.containerData:{}},getImageData:function(){var t=this;return t.loaded?t.imageData:{}},getCanvasData:function(){var t=this,e=t.canvasData,a={};return t.ready&&c(["left","top","width","height","naturalWidth","naturalHeight"],function(t){a[t]=e[t]}),a},setCanvasData:function(t){var a=this,i=a.canvasData,r=i.aspectRatio;return n(t)&&(t=t.call(a.element)),a.ready&&!a.disabled&&o(t)&&(e(t.left)&&(i.left=t.left),e(t.top)&&(i.top=t.top),e(t.width)?(i.width=t.width,i.height=t.width/r):e(t.height)&&(i.height=t.height,i.width=t.height*r),a.renderCanvas(!0)),a},getCropBoxData:function(){var t=this,e=t.cropBoxData,a=void 0;return t.ready&&t.cropped&&(a={left:e.left,top:e.top,width:e.width,height:e.height}),a||{}},setCropBoxData:function(t){var a=this,i=a.cropBoxData,r=a.options.aspectRatio,h=void 0,c=void 0;return n(t)&&(t=t.call(a.element)),a.ready&&a.cropped&&!a.disabled&&o(t)&&(e(t.left)&&(i.left=t.left),e(t.top)&&(i.top=t.top),e(t.width)&&t.width!==i.width&&(h=!0,i.width=t.width),e(t.height)&&t.height!==i.height&&(c=!0,i.height=t.height),r&&(h?i.height=i.width/r:c&&(i.width=i.height*r)),a.renderCropBox()),a},getCroppedCanvas:function(t){var e=this;if(!e.ready||!window.HTMLCanvasElement)return null;if(!e.cropped)return z(e.image,e.imageData);o(t)||(t={});var a=e.getData(),i=a.width,n=a.height,r=i/n,h=void 0,c=void 0,s=void 0;o(t)&&(h=t.width,c=t.height,h?(c=h/r,s=h/i):c&&(h=c*r,s=c/n));var d=Math.floor(h||i),l=Math.floor(c||n),p=T("canvas"),u=p.getContext("2d");p.width=d,p.height=l,t.fillColor&&(u.fillStyle=t.fillColor,u.fillRect(0,0,d,l));var m=function(){var t=z(e.image,e.imageData),o=t.width,r=t.height,h=e.canvasData,c=[t],d=a.x+h.naturalWidth*(Math.abs(a.scaleX||1)-1)/2,l=a.y+h.naturalHeight*(Math.abs(a.scaleY||1)-1)/2,p=void 0,u=void 0,m=void 0,f=void 0,g=void 0,v=void 0;return d<=-i||d>o?d=p=m=g=0:d<=0?(m=-d,d=0,p=g=Math.min(o,i+d)):d<=o&&(m=0,p=g=Math.min(i,o-d)),p<=0||l<=-n||l>r?l=u=f=v=0:l<=0?(f=-l,l=0,u=v=Math.min(r,n+l)):l<=r&&(f=0,u=v=Math.min(n,r-l)),c.push(Math.floor(d),Math.floor(l),Math.floor(p),Math.floor(u)),s&&(m*=s,f*=s,g*=s,v*=s),g>0&&v>0&&c.push(Math.floor(m),Math.floor(f),Math.floor(g),Math.floor(v)),c}();return u.drawImage.apply(u,F(m)),p},setAspectRatio:function(t){var e=this,i=e.options;return e.disabled||a(t)||(i.aspectRatio=Math.max(0,t)||NaN,e.ready&&(e.initCropBox(),e.cropped&&e.renderCropBox())),e},setDragMode:function(t){var e=this,a=e.options,i=e.dragBox,o=e.face,n=void 0,r=void 0;return e.loaded&&!e.disabled&&(n="crop"===t,r=a.movable&&"move"===t,t=n||r?t:"none",w(i,"action",t),f(i,"cropper-crop",n),f(i,"cropper-move",r),a.cropBoxMovable||(w(o,"action",t),f(o,"cropper-crop",n),f(o,"cropper-move",r))),e}},At="cropper",Rt=At+"-hidden",It="error",St="load",Ut="ready",jt="crop",Pt=/^data:/,qt=/^data:image\/jpeg.*;base64,/,$t=void 0,Zt=function(){function t(e,a){K(this,t);var i=this;i.element=e,i.options=s({},q,o(a)&&a),i.loaded=!1,i.ready=!1,i.complete=!1,i.rotated=!1,i.cropped=!1,i.disabled=!1,i.replaced=!1,i.limited=!1,i.wheeling=!1,i.isImg=!1,i.originalUrl="",i.canvasData=null,i.cropBoxData=null,i.previews=null,i.pointers={},i.init()}return V(t,[{key:"init",value:function(){var t=this,e=t.element,a=e.tagName.toLowerCase(),i=void 0;if(!v(e,At)){if(w(e,At,t),"img"===a){if(t.isImg=!0,t.originalUrl=i=e.getAttribute("src"),!i)return;i=e.src}else"canvas"===a&&window.HTMLCanvasElement&&(i=e.toDataURL());t.load(i)}}},{key:"load",value:function(t){var e=this,a=e.options,i=e.element;if(t){if(e.url=t,e.imageData={},!a.checkOrientation||!window.ArrayBuffer)return void e.clone();if(Pt.test(t))return void(qt?e.read(I(t)):e.clone());var o=new XMLHttpRequest;o.onerror=o.onabort=function(){e.clone()},o.onload=function(){e.read(o.response)},a.checkCrossOrigin&&Y(t)&&i.crossOrigin&&(t=E(t)),o.open("get",t),o.responseType="arraybuffer",o.withCredentials="use-credentials"===i.crossOrigin,o.send()}}},{key:"read",value:function(t){var e=this,a=e.options,i=R(t),o=e.imageData,n=0,r=1,h=1;if(i>1)switch(e.url=S(t),i){case 2:r=-1;break;case 3:n=-180;break;case 4:h=-1;break;case 5:n=90,h=-1;break;case 6:n=90;break;case 7:n=90,r=-1;break;case 8:n=-90}a.rotatable&&(o.rotate=n),a.scalable&&(o.scaleX=r,o.scaleY=h),e.clone()}},{key:"clone",value:function(){var t=this,e=t.element,a=t.url,i=void 0,o=void 0,n=void 0,r=void 0;t.options.checkCrossOrigin&&Y(a)&&(i=e.crossOrigin,i?o=a:(i="anonymous",o=E(a))),t.crossOrigin=i,t.crossOriginUrl=o;var h=T("img");i&&(h.crossOrigin=i),h.src=o||a,t.image=h,t.onStart=n=d(t.start,t),t.onStop=r=d(t.stop,t),t.isImg?e.complete?t.start():y(e,St,n):(y(h,St,n),y(h,It,r),u(h,"cropper-hide"),e.parentNode.insertBefore(h,e.nextSibling))}},{key:"start",value:function(t){var e=this,a=e.isImg?e.element:e.image;t&&(x(a,St,e.onStart),x(a,It,e.onStop)),H(a,function(t,a){s(e.imageData,{naturalWidth:t,naturalHeight:a,aspectRatio:t/a}),e.loaded=!0,e.build()})}},{key:"stop",value:function(){var t=this,e=t.image;x(e,St,t.onStart),x(e,It,t.onStop),W(e),t.image=null}},{key:"build",value:function(){var t=this,e=t.options,a=t.element,i=t.image,o=void 0,r=void 0,h=void 0,c=void 0,s=void 0,d=void 0;if(t.loaded){t.ready&&t.unbuild();var l=T("div");l.innerHTML=$,t.container=o=a.parentNode,t.cropper=r=k(l,"cropper-container")[0],t.canvas=h=k(r,"cropper-canvas")[0],t.dragBox=c=k(r,"cropper-drag-box")[0],t.cropBox=s=k(r,"cropper-crop-box")[0],t.viewBox=k(r,"cropper-view-box")[0],t.face=d=k(s,"cropper-face")[0],L(h,i),u(a,Rt),o.insertBefore(r,a.nextSibling),t.isImg||m(i,"cropper-hide"),t.initPreview(),t.bind(),e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,t.cropped=e.autoCrop,e.autoCrop?e.modal&&u(c,"cropper-modal"):u(s,Rt),e.guides||u(k(s,"cropper-dashed"),Rt),e.center||u(k(s,"cropper-center"),Rt),e.background&&u(r,"cropper-bg"),e.highlight||u(d,"cropper-invisible"), +e.cropBoxMovable&&(u(d,"cropper-move"),w(d,"action","all")),e.cropBoxResizable||(u(k(s,"cropper-line"),Rt),u(k(s,"cropper-point"),Rt)),t.setDragMode(e.dragMode),t.render(),t.ready=!0,t.setData(e.data),t.completing=setTimeout(function(){n(e.ready)&&y(a,Ut,e.ready,!0),M(a,Ut),M(a,jt,t.getData()),t.complete=!0},0)}}},{key:"unbuild",value:function(){var t=this;t.ready&&(t.complete||clearTimeout(t.completing),t.ready=!1,t.complete=!1,t.initialImageData=null,t.initialCanvasData=null,t.initialCropBoxData=null,t.containerData=null,t.canvasData=null,t.cropBoxData=null,t.unbind(),t.resetPreview(),t.previews=null,t.viewBox=null,t.cropBox=null,t.dragBox=null,t.canvas=null,t.container=null,W(t.cropper),t.cropper=null)}}],[{key:"noConflict",value:function(){return window.Cropper=$t,t}},{key:"setDefaults",value:function(t){s(q,o(t)&&t)}}]),t}();return s(Zt.prototype,st),s(Zt.prototype,lt),s(Zt.prototype,Dt),s(Zt.prototype,kt),s(Zt.prototype,Ot),s(Zt.prototype,zt),"undefined"!=typeof window&&($t=window.Cropper,window.Cropper=Zt),Zt}); \ No newline at end of file diff --git a/docs/css/cropper.css b/docs/css/cropper.css index 1f99c282f..eb8452a21 100644 --- a/docs/css/cropper.css +++ b/docs/css/cropper.css @@ -1,11 +1,11 @@ /*! - * Cropper.js v1.0.0-beta + * Cropper.js v1.0.0-beta.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2017 Fengyuan Chen * Released under the MIT license * - * Date: 2017-01-01T08:26:22.116Z + * Date: 2017-01-21T12:28:26.786Z */ .cropper-container { diff --git a/docs/index.html b/docs/index.html index 13144af94..05a93a004 100644 --- a/docs/index.html +++ b/docs/index.html @@ -44,7 +44,7 @@
-

Cropper.js v1.0.0-beta

+

Cropper.js v1.0.0-beta.1

JavaScript image cropper.

@@ -58,13 +58,13 @@

Cropper.js v1.0.0-beta

- +
Picture
- +
@@ -72,7 +72,7 @@

Cropper.js v1.0.0-beta

- +
@@ -112,7 +112,7 @@

Cropper.js v1.0.0-beta

- +
- +