cropperjs.js 86 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586
  1. import {
  2. init_define_APP_INFO
  3. } from "./chunk-XY75H3MP.js";
  4. // dep:cropperjs
  5. init_define_APP_INFO();
  6. // node_modules/cropperjs/dist/cropper.esm.js
  7. init_define_APP_INFO();
  8. function ownKeys(object, enumerableOnly) {
  9. var keys = Object.keys(object);
  10. if (Object.getOwnPropertySymbols) {
  11. var symbols = Object.getOwnPropertySymbols(object);
  12. if (enumerableOnly) {
  13. symbols = symbols.filter(function(sym) {
  14. return Object.getOwnPropertyDescriptor(object, sym).enumerable;
  15. });
  16. }
  17. keys.push.apply(keys, symbols);
  18. }
  19. return keys;
  20. }
  21. function _objectSpread2(target) {
  22. for (var i = 1; i < arguments.length; i++) {
  23. var source = arguments[i] != null ? arguments[i] : {};
  24. if (i % 2) {
  25. ownKeys(Object(source), true).forEach(function(key) {
  26. _defineProperty(target, key, source[key]);
  27. });
  28. } else if (Object.getOwnPropertyDescriptors) {
  29. Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
  30. } else {
  31. ownKeys(Object(source)).forEach(function(key) {
  32. Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
  33. });
  34. }
  35. }
  36. return target;
  37. }
  38. function _typeof(obj) {
  39. "@babel/helpers - typeof";
  40. if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
  41. _typeof = function(obj2) {
  42. return typeof obj2;
  43. };
  44. } else {
  45. _typeof = function(obj2) {
  46. return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
  47. };
  48. }
  49. return _typeof(obj);
  50. }
  51. function _classCallCheck(instance, Constructor) {
  52. if (!(instance instanceof Constructor)) {
  53. throw new TypeError("Cannot call a class as a function");
  54. }
  55. }
  56. function _defineProperties(target, props) {
  57. for (var i = 0; i < props.length; i++) {
  58. var descriptor = props[i];
  59. descriptor.enumerable = descriptor.enumerable || false;
  60. descriptor.configurable = true;
  61. if ("value" in descriptor)
  62. descriptor.writable = true;
  63. Object.defineProperty(target, descriptor.key, descriptor);
  64. }
  65. }
  66. function _createClass(Constructor, protoProps, staticProps) {
  67. if (protoProps)
  68. _defineProperties(Constructor.prototype, protoProps);
  69. if (staticProps)
  70. _defineProperties(Constructor, staticProps);
  71. return Constructor;
  72. }
  73. function _defineProperty(obj, key, value) {
  74. if (key in obj) {
  75. Object.defineProperty(obj, key, {
  76. value,
  77. enumerable: true,
  78. configurable: true,
  79. writable: true
  80. });
  81. } else {
  82. obj[key] = value;
  83. }
  84. return obj;
  85. }
  86. function _toConsumableArray(arr) {
  87. return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  88. }
  89. function _arrayWithoutHoles(arr) {
  90. if (Array.isArray(arr))
  91. return _arrayLikeToArray(arr);
  92. }
  93. function _iterableToArray(iter) {
  94. if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
  95. return Array.from(iter);
  96. }
  97. function _unsupportedIterableToArray(o, minLen) {
  98. if (!o)
  99. return;
  100. if (typeof o === "string")
  101. return _arrayLikeToArray(o, minLen);
  102. var n = Object.prototype.toString.call(o).slice(8, -1);
  103. if (n === "Object" && o.constructor)
  104. n = o.constructor.name;
  105. if (n === "Map" || n === "Set")
  106. return Array.from(o);
  107. if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
  108. return _arrayLikeToArray(o, minLen);
  109. }
  110. function _arrayLikeToArray(arr, len) {
  111. if (len == null || len > arr.length)
  112. len = arr.length;
  113. for (var i = 0, arr2 = new Array(len); i < len; i++)
  114. arr2[i] = arr[i];
  115. return arr2;
  116. }
  117. function _nonIterableSpread() {
  118. throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  119. }
  120. var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined";
  121. var WINDOW = IS_BROWSER ? window : {};
  122. var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? "ontouchstart" in WINDOW.document.documentElement : false;
  123. var HAS_POINTER_EVENT = IS_BROWSER ? "PointerEvent" in WINDOW : false;
  124. var NAMESPACE = "cropper";
  125. var ACTION_ALL = "all";
  126. var ACTION_CROP = "crop";
  127. var ACTION_MOVE = "move";
  128. var ACTION_ZOOM = "zoom";
  129. var ACTION_EAST = "e";
  130. var ACTION_WEST = "w";
  131. var ACTION_SOUTH = "s";
  132. var ACTION_NORTH = "n";
  133. var ACTION_NORTH_EAST = "ne";
  134. var ACTION_NORTH_WEST = "nw";
  135. var ACTION_SOUTH_EAST = "se";
  136. var ACTION_SOUTH_WEST = "sw";
  137. var CLASS_CROP = "".concat(NAMESPACE, "-crop");
  138. var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled");
  139. var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden");
  140. var CLASS_HIDE = "".concat(NAMESPACE, "-hide");
  141. var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible");
  142. var CLASS_MODAL = "".concat(NAMESPACE, "-modal");
  143. var CLASS_MOVE = "".concat(NAMESPACE, "-move");
  144. var DATA_ACTION = "".concat(NAMESPACE, "Action");
  145. var DATA_PREVIEW = "".concat(NAMESPACE, "Preview");
  146. var DRAG_MODE_CROP = "crop";
  147. var DRAG_MODE_MOVE = "move";
  148. var DRAG_MODE_NONE = "none";
  149. var EVENT_CROP = "crop";
  150. var EVENT_CROP_END = "cropend";
  151. var EVENT_CROP_MOVE = "cropmove";
  152. var EVENT_CROP_START = "cropstart";
  153. var EVENT_DBLCLICK = "dblclick";
  154. var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? "touchstart" : "mousedown";
  155. var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? "touchmove" : "mousemove";
  156. var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? "touchend touchcancel" : "mouseup";
  157. var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? "pointerdown" : EVENT_TOUCH_START;
  158. var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? "pointermove" : EVENT_TOUCH_MOVE;
  159. var EVENT_POINTER_UP = HAS_POINTER_EVENT ? "pointerup pointercancel" : EVENT_TOUCH_END;
  160. var EVENT_READY = "ready";
  161. var EVENT_RESIZE = "resize";
  162. var EVENT_WHEEL = "wheel";
  163. var EVENT_ZOOM = "zoom";
  164. var MIME_TYPE_JPEG = "image/jpeg";
  165. var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
  166. var REGEXP_DATA_URL = /^data:/;
  167. var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
  168. var REGEXP_TAG_NAME = /^img|canvas$/i;
  169. var MIN_CONTAINER_WIDTH = 200;
  170. var MIN_CONTAINER_HEIGHT = 100;
  171. var DEFAULTS = {
  172. viewMode: 0,
  173. dragMode: DRAG_MODE_CROP,
  174. initialAspectRatio: NaN,
  175. aspectRatio: NaN,
  176. data: null,
  177. preview: "",
  178. responsive: true,
  179. restore: true,
  180. checkCrossOrigin: true,
  181. checkOrientation: true,
  182. modal: true,
  183. guides: true,
  184. center: true,
  185. highlight: true,
  186. background: true,
  187. autoCrop: true,
  188. autoCropArea: 0.8,
  189. movable: true,
  190. rotatable: true,
  191. scalable: true,
  192. zoomable: true,
  193. zoomOnTouch: true,
  194. zoomOnWheel: true,
  195. wheelZoomRatio: 0.1,
  196. cropBoxMovable: true,
  197. cropBoxResizable: true,
  198. toggleDragModeOnDblclick: true,
  199. minCanvasWidth: 0,
  200. minCanvasHeight: 0,
  201. minCropBoxWidth: 0,
  202. minCropBoxHeight: 0,
  203. minContainerWidth: MIN_CONTAINER_WIDTH,
  204. minContainerHeight: MIN_CONTAINER_HEIGHT,
  205. ready: null,
  206. cropstart: null,
  207. cropmove: null,
  208. cropend: null,
  209. crop: null,
  210. zoom: null
  211. };
  212. var TEMPLATE = '<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>';
  213. var isNaN = Number.isNaN || WINDOW.isNaN;
  214. function isNumber(value) {
  215. return typeof value === "number" && !isNaN(value);
  216. }
  217. var isPositiveNumber = function isPositiveNumber2(value) {
  218. return value > 0 && value < Infinity;
  219. };
  220. function isUndefined(value) {
  221. return typeof value === "undefined";
  222. }
  223. function isObject(value) {
  224. return _typeof(value) === "object" && value !== null;
  225. }
  226. var hasOwnProperty = Object.prototype.hasOwnProperty;
  227. function isPlainObject(value) {
  228. if (!isObject(value)) {
  229. return false;
  230. }
  231. try {
  232. var _constructor = value.constructor;
  233. var prototype = _constructor.prototype;
  234. return _constructor && prototype && hasOwnProperty.call(prototype, "isPrototypeOf");
  235. } catch (error) {
  236. return false;
  237. }
  238. }
  239. function isFunction(value) {
  240. return typeof value === "function";
  241. }
  242. var slice = Array.prototype.slice;
  243. function toArray(value) {
  244. return Array.from ? Array.from(value) : slice.call(value);
  245. }
  246. function forEach(data, callback) {
  247. if (data && isFunction(callback)) {
  248. if (Array.isArray(data) || isNumber(data.length)) {
  249. toArray(data).forEach(function(value, key) {
  250. callback.call(data, value, key, data);
  251. });
  252. } else if (isObject(data)) {
  253. Object.keys(data).forEach(function(key) {
  254. callback.call(data, data[key], key, data);
  255. });
  256. }
  257. }
  258. return data;
  259. }
  260. var assign = Object.assign || function assign2(target) {
  261. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  262. args[_key - 1] = arguments[_key];
  263. }
  264. if (isObject(target) && args.length > 0) {
  265. args.forEach(function(arg) {
  266. if (isObject(arg)) {
  267. Object.keys(arg).forEach(function(key) {
  268. target[key] = arg[key];
  269. });
  270. }
  271. });
  272. }
  273. return target;
  274. };
  275. var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
  276. function normalizeDecimalNumber(value) {
  277. var times = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1e11;
  278. return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
  279. }
  280. var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/;
  281. function setStyle(element, styles) {
  282. var style = element.style;
  283. forEach(styles, function(value, property) {
  284. if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
  285. value = "".concat(value, "px");
  286. }
  287. style[property] = value;
  288. });
  289. }
  290. function hasClass(element, value) {
  291. return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;
  292. }
  293. function addClass(element, value) {
  294. if (!value) {
  295. return;
  296. }
  297. if (isNumber(element.length)) {
  298. forEach(element, function(elem) {
  299. addClass(elem, value);
  300. });
  301. return;
  302. }
  303. if (element.classList) {
  304. element.classList.add(value);
  305. return;
  306. }
  307. var className = element.className.trim();
  308. if (!className) {
  309. element.className = value;
  310. } else if (className.indexOf(value) < 0) {
  311. element.className = "".concat(className, " ").concat(value);
  312. }
  313. }
  314. function removeClass(element, value) {
  315. if (!value) {
  316. return;
  317. }
  318. if (isNumber(element.length)) {
  319. forEach(element, function(elem) {
  320. removeClass(elem, value);
  321. });
  322. return;
  323. }
  324. if (element.classList) {
  325. element.classList.remove(value);
  326. return;
  327. }
  328. if (element.className.indexOf(value) >= 0) {
  329. element.className = element.className.replace(value, "");
  330. }
  331. }
  332. function toggleClass(element, value, added) {
  333. if (!value) {
  334. return;
  335. }
  336. if (isNumber(element.length)) {
  337. forEach(element, function(elem) {
  338. toggleClass(elem, value, added);
  339. });
  340. return;
  341. }
  342. if (added) {
  343. addClass(element, value);
  344. } else {
  345. removeClass(element, value);
  346. }
  347. }
  348. var REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g;
  349. function toParamCase(value) {
  350. return value.replace(REGEXP_CAMEL_CASE, "$1-$2").toLowerCase();
  351. }
  352. function getData(element, name) {
  353. if (isObject(element[name])) {
  354. return element[name];
  355. }
  356. if (element.dataset) {
  357. return element.dataset[name];
  358. }
  359. return element.getAttribute("data-".concat(toParamCase(name)));
  360. }
  361. function setData(element, name, data) {
  362. if (isObject(data)) {
  363. element[name] = data;
  364. } else if (element.dataset) {
  365. element.dataset[name] = data;
  366. } else {
  367. element.setAttribute("data-".concat(toParamCase(name)), data);
  368. }
  369. }
  370. function removeData(element, name) {
  371. if (isObject(element[name])) {
  372. try {
  373. delete element[name];
  374. } catch (error) {
  375. element[name] = void 0;
  376. }
  377. } else if (element.dataset) {
  378. try {
  379. delete element.dataset[name];
  380. } catch (error) {
  381. element.dataset[name] = void 0;
  382. }
  383. } else {
  384. element.removeAttribute("data-".concat(toParamCase(name)));
  385. }
  386. }
  387. var REGEXP_SPACES = /\s\s*/;
  388. var onceSupported = function() {
  389. var supported = false;
  390. if (IS_BROWSER) {
  391. var once = false;
  392. var listener = function listener2() {
  393. };
  394. var options = Object.defineProperty({}, "once", {
  395. get: function get() {
  396. supported = true;
  397. return once;
  398. },
  399. set: function set(value) {
  400. once = value;
  401. }
  402. });
  403. WINDOW.addEventListener("test", listener, options);
  404. WINDOW.removeEventListener("test", listener, options);
  405. }
  406. return supported;
  407. }();
  408. function removeListener(element, type, listener) {
  409. var options = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
  410. var handler = listener;
  411. type.trim().split(REGEXP_SPACES).forEach(function(event) {
  412. if (!onceSupported) {
  413. var listeners = element.listeners;
  414. if (listeners && listeners[event] && listeners[event][listener]) {
  415. handler = listeners[event][listener];
  416. delete listeners[event][listener];
  417. if (Object.keys(listeners[event]).length === 0) {
  418. delete listeners[event];
  419. }
  420. if (Object.keys(listeners).length === 0) {
  421. delete element.listeners;
  422. }
  423. }
  424. }
  425. element.removeEventListener(event, handler, options);
  426. });
  427. }
  428. function addListener(element, type, listener) {
  429. var options = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
  430. var _handler = listener;
  431. type.trim().split(REGEXP_SPACES).forEach(function(event) {
  432. if (options.once && !onceSupported) {
  433. var _element$listeners = element.listeners, listeners = _element$listeners === void 0 ? {} : _element$listeners;
  434. _handler = function handler() {
  435. delete listeners[event][listener];
  436. element.removeEventListener(event, _handler, options);
  437. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  438. args[_key2] = arguments[_key2];
  439. }
  440. listener.apply(element, args);
  441. };
  442. if (!listeners[event]) {
  443. listeners[event] = {};
  444. }
  445. if (listeners[event][listener]) {
  446. element.removeEventListener(event, listeners[event][listener], options);
  447. }
  448. listeners[event][listener] = _handler;
  449. element.listeners = listeners;
  450. }
  451. element.addEventListener(event, _handler, options);
  452. });
  453. }
  454. function dispatchEvent(element, type, data) {
  455. var event;
  456. if (isFunction(Event) && isFunction(CustomEvent)) {
  457. event = new CustomEvent(type, {
  458. detail: data,
  459. bubbles: true,
  460. cancelable: true
  461. });
  462. } else {
  463. event = document.createEvent("CustomEvent");
  464. event.initCustomEvent(type, true, true, data);
  465. }
  466. return element.dispatchEvent(event);
  467. }
  468. function getOffset(element) {
  469. var box = element.getBoundingClientRect();
  470. return {
  471. left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
  472. top: box.top + (window.pageYOffset - document.documentElement.clientTop)
  473. };
  474. }
  475. var location = WINDOW.location;
  476. var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
  477. function isCrossOriginURL(url) {
  478. var parts = url.match(REGEXP_ORIGINS);
  479. return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
  480. }
  481. function addTimestamp(url) {
  482. var timestamp = "timestamp=".concat(new Date().getTime());
  483. return url + (url.indexOf("?") === -1 ? "?" : "&") + timestamp;
  484. }
  485. function getTransforms(_ref) {
  486. var rotate2 = _ref.rotate, scaleX2 = _ref.scaleX, scaleY2 = _ref.scaleY, translateX = _ref.translateX, translateY = _ref.translateY;
  487. var values = [];
  488. if (isNumber(translateX) && translateX !== 0) {
  489. values.push("translateX(".concat(translateX, "px)"));
  490. }
  491. if (isNumber(translateY) && translateY !== 0) {
  492. values.push("translateY(".concat(translateY, "px)"));
  493. }
  494. if (isNumber(rotate2) && rotate2 !== 0) {
  495. values.push("rotate(".concat(rotate2, "deg)"));
  496. }
  497. if (isNumber(scaleX2) && scaleX2 !== 1) {
  498. values.push("scaleX(".concat(scaleX2, ")"));
  499. }
  500. if (isNumber(scaleY2) && scaleY2 !== 1) {
  501. values.push("scaleY(".concat(scaleY2, ")"));
  502. }
  503. var transform = values.length ? values.join(" ") : "none";
  504. return {
  505. WebkitTransform: transform,
  506. msTransform: transform,
  507. transform
  508. };
  509. }
  510. function getMaxZoomRatio(pointers) {
  511. var pointers2 = _objectSpread2({}, pointers);
  512. var maxRatio = 0;
  513. forEach(pointers, function(pointer, pointerId) {
  514. delete pointers2[pointerId];
  515. forEach(pointers2, function(pointer2) {
  516. var x1 = Math.abs(pointer.startX - pointer2.startX);
  517. var y1 = Math.abs(pointer.startY - pointer2.startY);
  518. var x2 = Math.abs(pointer.endX - pointer2.endX);
  519. var y2 = Math.abs(pointer.endY - pointer2.endY);
  520. var z1 = Math.sqrt(x1 * x1 + y1 * y1);
  521. var z2 = Math.sqrt(x2 * x2 + y2 * y2);
  522. var ratio = (z2 - z1) / z1;
  523. if (Math.abs(ratio) > Math.abs(maxRatio)) {
  524. maxRatio = ratio;
  525. }
  526. });
  527. });
  528. return maxRatio;
  529. }
  530. function getPointer(_ref2, endOnly) {
  531. var pageX = _ref2.pageX, pageY = _ref2.pageY;
  532. var end = {
  533. endX: pageX,
  534. endY: pageY
  535. };
  536. return endOnly ? end : _objectSpread2({
  537. startX: pageX,
  538. startY: pageY
  539. }, end);
  540. }
  541. function getPointersCenter(pointers) {
  542. var pageX = 0;
  543. var pageY = 0;
  544. var count = 0;
  545. forEach(pointers, function(_ref3) {
  546. var startX = _ref3.startX, startY = _ref3.startY;
  547. pageX += startX;
  548. pageY += startY;
  549. count += 1;
  550. });
  551. pageX /= count;
  552. pageY /= count;
  553. return {
  554. pageX,
  555. pageY
  556. };
  557. }
  558. function getAdjustedSizes(_ref4) {
  559. var aspectRatio = _ref4.aspectRatio, height = _ref4.height, width = _ref4.width;
  560. var type = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "contain";
  561. var isValidWidth = isPositiveNumber(width);
  562. var isValidHeight = isPositiveNumber(height);
  563. if (isValidWidth && isValidHeight) {
  564. var adjustedWidth = height * aspectRatio;
  565. if (type === "contain" && adjustedWidth > width || type === "cover" && adjustedWidth < width) {
  566. height = width / aspectRatio;
  567. } else {
  568. width = height * aspectRatio;
  569. }
  570. } else if (isValidWidth) {
  571. height = width / aspectRatio;
  572. } else if (isValidHeight) {
  573. width = height * aspectRatio;
  574. }
  575. return {
  576. width,
  577. height
  578. };
  579. }
  580. function getRotatedSizes(_ref5) {
  581. var width = _ref5.width, height = _ref5.height, degree = _ref5.degree;
  582. degree = Math.abs(degree) % 180;
  583. if (degree === 90) {
  584. return {
  585. width: height,
  586. height: width
  587. };
  588. }
  589. var arc = degree % 90 * Math.PI / 180;
  590. var sinArc = Math.sin(arc);
  591. var cosArc = Math.cos(arc);
  592. var newWidth = width * cosArc + height * sinArc;
  593. var newHeight = width * sinArc + height * cosArc;
  594. return degree > 90 ? {
  595. width: newHeight,
  596. height: newWidth
  597. } : {
  598. width: newWidth,
  599. height: newHeight
  600. };
  601. }
  602. function getSourceCanvas(image, _ref6, _ref7, _ref8) {
  603. var imageAspectRatio = _ref6.aspectRatio, imageNaturalWidth = _ref6.naturalWidth, imageNaturalHeight = _ref6.naturalHeight, _ref6$rotate = _ref6.rotate, rotate2 = _ref6$rotate === void 0 ? 0 : _ref6$rotate, _ref6$scaleX = _ref6.scaleX, scaleX2 = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX, _ref6$scaleY = _ref6.scaleY, scaleY2 = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY;
  604. var aspectRatio = _ref7.aspectRatio, naturalWidth = _ref7.naturalWidth, naturalHeight = _ref7.naturalHeight;
  605. var _ref8$fillColor = _ref8.fillColor, fillColor = _ref8$fillColor === void 0 ? "transparent" : _ref8$fillColor, _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled, imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE, _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality, imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? "low" : _ref8$imageSmoothingQ, _ref8$maxWidth = _ref8.maxWidth, maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth, _ref8$maxHeight = _ref8.maxHeight, maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight, _ref8$minWidth = _ref8.minWidth, minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth, _ref8$minHeight = _ref8.minHeight, minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;
  606. var canvas = document.createElement("canvas");
  607. var context = canvas.getContext("2d");
  608. var maxSizes = getAdjustedSizes({
  609. aspectRatio,
  610. width: maxWidth,
  611. height: maxHeight
  612. });
  613. var minSizes = getAdjustedSizes({
  614. aspectRatio,
  615. width: minWidth,
  616. height: minHeight
  617. }, "cover");
  618. var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
  619. var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
  620. var destMaxSizes = getAdjustedSizes({
  621. aspectRatio: imageAspectRatio,
  622. width: maxWidth,
  623. height: maxHeight
  624. });
  625. var destMinSizes = getAdjustedSizes({
  626. aspectRatio: imageAspectRatio,
  627. width: minWidth,
  628. height: minHeight
  629. }, "cover");
  630. var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));
  631. var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));
  632. var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
  633. canvas.width = normalizeDecimalNumber(width);
  634. canvas.height = normalizeDecimalNumber(height);
  635. context.fillStyle = fillColor;
  636. context.fillRect(0, 0, width, height);
  637. context.save();
  638. context.translate(width / 2, height / 2);
  639. context.rotate(rotate2 * Math.PI / 180);
  640. context.scale(scaleX2, scaleY2);
  641. context.imageSmoothingEnabled = imageSmoothingEnabled;
  642. context.imageSmoothingQuality = imageSmoothingQuality;
  643. context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function(param) {
  644. return Math.floor(normalizeDecimalNumber(param));
  645. }))));
  646. context.restore();
  647. return canvas;
  648. }
  649. var fromCharCode = String.fromCharCode;
  650. function getStringFromCharCode(dataView, start, length) {
  651. var str = "";
  652. length += start;
  653. for (var i = start; i < length; i += 1) {
  654. str += fromCharCode(dataView.getUint8(i));
  655. }
  656. return str;
  657. }
  658. var REGEXP_DATA_URL_HEAD = /^data:.*,/;
  659. function dataURLToArrayBuffer(dataURL) {
  660. var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, "");
  661. var binary = atob(base64);
  662. var arrayBuffer = new ArrayBuffer(binary.length);
  663. var uint8 = new Uint8Array(arrayBuffer);
  664. forEach(uint8, function(value, i) {
  665. uint8[i] = binary.charCodeAt(i);
  666. });
  667. return arrayBuffer;
  668. }
  669. function arrayBufferToDataURL(arrayBuffer, mimeType) {
  670. var chunks = [];
  671. var chunkSize = 8192;
  672. var uint8 = new Uint8Array(arrayBuffer);
  673. while (uint8.length > 0) {
  674. chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));
  675. uint8 = uint8.subarray(chunkSize);
  676. }
  677. return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join("")));
  678. }
  679. function resetAndGetOrientation(arrayBuffer) {
  680. var dataView = new DataView(arrayBuffer);
  681. var orientation;
  682. try {
  683. var littleEndian;
  684. var app1Start;
  685. var ifdStart;
  686. if (dataView.getUint8(0) === 255 && dataView.getUint8(1) === 216) {
  687. var length = dataView.byteLength;
  688. var offset = 2;
  689. while (offset + 1 < length) {
  690. if (dataView.getUint8(offset) === 255 && dataView.getUint8(offset + 1) === 225) {
  691. app1Start = offset;
  692. break;
  693. }
  694. offset += 1;
  695. }
  696. }
  697. if (app1Start) {
  698. var exifIDCode = app1Start + 4;
  699. var tiffOffset = app1Start + 10;
  700. if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
  701. var endianness = dataView.getUint16(tiffOffset);
  702. littleEndian = endianness === 18761;
  703. if (littleEndian || endianness === 19789) {
  704. if (dataView.getUint16(tiffOffset + 2, littleEndian) === 42) {
  705. var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
  706. if (firstIFDOffset >= 8) {
  707. ifdStart = tiffOffset + firstIFDOffset;
  708. }
  709. }
  710. }
  711. }
  712. }
  713. if (ifdStart) {
  714. var _length = dataView.getUint16(ifdStart, littleEndian);
  715. var _offset;
  716. var i;
  717. for (i = 0; i < _length; i += 1) {
  718. _offset = ifdStart + i * 12 + 2;
  719. if (dataView.getUint16(_offset, littleEndian) === 274) {
  720. _offset += 8;
  721. orientation = dataView.getUint16(_offset, littleEndian);
  722. dataView.setUint16(_offset, 1, littleEndian);
  723. break;
  724. }
  725. }
  726. }
  727. } catch (error) {
  728. orientation = 1;
  729. }
  730. return orientation;
  731. }
  732. function parseOrientation(orientation) {
  733. var rotate2 = 0;
  734. var scaleX2 = 1;
  735. var scaleY2 = 1;
  736. switch (orientation) {
  737. case 2:
  738. scaleX2 = -1;
  739. break;
  740. case 3:
  741. rotate2 = -180;
  742. break;
  743. case 4:
  744. scaleY2 = -1;
  745. break;
  746. case 5:
  747. rotate2 = 90;
  748. scaleY2 = -1;
  749. break;
  750. case 6:
  751. rotate2 = 90;
  752. break;
  753. case 7:
  754. rotate2 = 90;
  755. scaleX2 = -1;
  756. break;
  757. case 8:
  758. rotate2 = -90;
  759. break;
  760. }
  761. return {
  762. rotate: rotate2,
  763. scaleX: scaleX2,
  764. scaleY: scaleY2
  765. };
  766. }
  767. var render = {
  768. render: function render2() {
  769. this.initContainer();
  770. this.initCanvas();
  771. this.initCropBox();
  772. this.renderCanvas();
  773. if (this.cropped) {
  774. this.renderCropBox();
  775. }
  776. },
  777. initContainer: function initContainer() {
  778. var element = this.element, options = this.options, container = this.container, cropper = this.cropper;
  779. var minWidth = Number(options.minContainerWidth);
  780. var minHeight = Number(options.minContainerHeight);
  781. addClass(cropper, CLASS_HIDDEN);
  782. removeClass(element, CLASS_HIDDEN);
  783. var containerData = {
  784. width: Math.max(container.offsetWidth, minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH),
  785. height: Math.max(container.offsetHeight, minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT)
  786. };
  787. this.containerData = containerData;
  788. setStyle(cropper, {
  789. width: containerData.width,
  790. height: containerData.height
  791. });
  792. addClass(element, CLASS_HIDDEN);
  793. removeClass(cropper, CLASS_HIDDEN);
  794. },
  795. initCanvas: function initCanvas() {
  796. var containerData = this.containerData, imageData = this.imageData;
  797. var viewMode = this.options.viewMode;
  798. var rotated = Math.abs(imageData.rotate) % 180 === 90;
  799. var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;
  800. var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;
  801. var aspectRatio = naturalWidth / naturalHeight;
  802. var canvasWidth = containerData.width;
  803. var canvasHeight = containerData.height;
  804. if (containerData.height * aspectRatio > containerData.width) {
  805. if (viewMode === 3) {
  806. canvasWidth = containerData.height * aspectRatio;
  807. } else {
  808. canvasHeight = containerData.width / aspectRatio;
  809. }
  810. } else if (viewMode === 3) {
  811. canvasHeight = containerData.width / aspectRatio;
  812. } else {
  813. canvasWidth = containerData.height * aspectRatio;
  814. }
  815. var canvasData = {
  816. aspectRatio,
  817. naturalWidth,
  818. naturalHeight,
  819. width: canvasWidth,
  820. height: canvasHeight
  821. };
  822. this.canvasData = canvasData;
  823. this.limited = viewMode === 1 || viewMode === 2;
  824. this.limitCanvas(true, true);
  825. canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
  826. canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
  827. canvasData.left = (containerData.width - canvasData.width) / 2;
  828. canvasData.top = (containerData.height - canvasData.height) / 2;
  829. canvasData.oldLeft = canvasData.left;
  830. canvasData.oldTop = canvasData.top;
  831. this.initialCanvasData = assign({}, canvasData);
  832. },
  833. limitCanvas: function limitCanvas(sizeLimited, positionLimited) {
  834. var options = this.options, containerData = this.containerData, canvasData = this.canvasData, cropBoxData = this.cropBoxData;
  835. var viewMode = options.viewMode;
  836. var aspectRatio = canvasData.aspectRatio;
  837. var cropped = this.cropped && cropBoxData;
  838. if (sizeLimited) {
  839. var minCanvasWidth = Number(options.minCanvasWidth) || 0;
  840. var minCanvasHeight = Number(options.minCanvasHeight) || 0;
  841. if (viewMode > 1) {
  842. minCanvasWidth = Math.max(minCanvasWidth, containerData.width);
  843. minCanvasHeight = Math.max(minCanvasHeight, containerData.height);
  844. if (viewMode === 3) {
  845. if (minCanvasHeight * aspectRatio > minCanvasWidth) {
  846. minCanvasWidth = minCanvasHeight * aspectRatio;
  847. } else {
  848. minCanvasHeight = minCanvasWidth / aspectRatio;
  849. }
  850. }
  851. } else if (viewMode > 0) {
  852. if (minCanvasWidth) {
  853. minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0);
  854. } else if (minCanvasHeight) {
  855. minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0);
  856. } else if (cropped) {
  857. minCanvasWidth = cropBoxData.width;
  858. minCanvasHeight = cropBoxData.height;
  859. if (minCanvasHeight * aspectRatio > minCanvasWidth) {
  860. minCanvasWidth = minCanvasHeight * aspectRatio;
  861. } else {
  862. minCanvasHeight = minCanvasWidth / aspectRatio;
  863. }
  864. }
  865. }
  866. var _getAdjustedSizes = getAdjustedSizes({
  867. aspectRatio,
  868. width: minCanvasWidth,
  869. height: minCanvasHeight
  870. });
  871. minCanvasWidth = _getAdjustedSizes.width;
  872. minCanvasHeight = _getAdjustedSizes.height;
  873. canvasData.minWidth = minCanvasWidth;
  874. canvasData.minHeight = minCanvasHeight;
  875. canvasData.maxWidth = Infinity;
  876. canvasData.maxHeight = Infinity;
  877. }
  878. if (positionLimited) {
  879. if (viewMode > (cropped ? 0 : 1)) {
  880. var newCanvasLeft = containerData.width - canvasData.width;
  881. var newCanvasTop = containerData.height - canvasData.height;
  882. canvasData.minLeft = Math.min(0, newCanvasLeft);
  883. canvasData.minTop = Math.min(0, newCanvasTop);
  884. canvasData.maxLeft = Math.max(0, newCanvasLeft);
  885. canvasData.maxTop = Math.max(0, newCanvasTop);
  886. if (cropped && this.limited) {
  887. canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width));
  888. canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height));
  889. canvasData.maxLeft = cropBoxData.left;
  890. canvasData.maxTop = cropBoxData.top;
  891. if (viewMode === 2) {
  892. if (canvasData.width >= containerData.width) {
  893. canvasData.minLeft = Math.min(0, newCanvasLeft);
  894. canvasData.maxLeft = Math.max(0, newCanvasLeft);
  895. }
  896. if (canvasData.height >= containerData.height) {
  897. canvasData.minTop = Math.min(0, newCanvasTop);
  898. canvasData.maxTop = Math.max(0, newCanvasTop);
  899. }
  900. }
  901. }
  902. } else {
  903. canvasData.minLeft = -canvasData.width;
  904. canvasData.minTop = -canvasData.height;
  905. canvasData.maxLeft = containerData.width;
  906. canvasData.maxTop = containerData.height;
  907. }
  908. }
  909. },
  910. renderCanvas: function renderCanvas(changed, transformed) {
  911. var canvasData = this.canvasData, imageData = this.imageData;
  912. if (transformed) {
  913. var _getRotatedSizes = getRotatedSizes({
  914. width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),
  915. height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),
  916. degree: imageData.rotate || 0
  917. }), naturalWidth = _getRotatedSizes.width, naturalHeight = _getRotatedSizes.height;
  918. var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);
  919. var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);
  920. canvasData.left -= (width - canvasData.width) / 2;
  921. canvasData.top -= (height - canvasData.height) / 2;
  922. canvasData.width = width;
  923. canvasData.height = height;
  924. canvasData.aspectRatio = naturalWidth / naturalHeight;
  925. canvasData.naturalWidth = naturalWidth;
  926. canvasData.naturalHeight = naturalHeight;
  927. this.limitCanvas(true, false);
  928. }
  929. if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) {
  930. canvasData.left = canvasData.oldLeft;
  931. }
  932. if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) {
  933. canvasData.top = canvasData.oldTop;
  934. }
  935. canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
  936. canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
  937. this.limitCanvas(false, true);
  938. canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);
  939. canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop);
  940. canvasData.oldLeft = canvasData.left;
  941. canvasData.oldTop = canvasData.top;
  942. setStyle(this.canvas, assign({
  943. width: canvasData.width,
  944. height: canvasData.height
  945. }, getTransforms({
  946. translateX: canvasData.left,
  947. translateY: canvasData.top
  948. })));
  949. this.renderImage(changed);
  950. if (this.cropped && this.limited) {
  951. this.limitCropBox(true, true);
  952. }
  953. },
  954. renderImage: function renderImage(changed) {
  955. var canvasData = this.canvasData, imageData = this.imageData;
  956. var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
  957. var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);
  958. assign(imageData, {
  959. width,
  960. height,
  961. left: (canvasData.width - width) / 2,
  962. top: (canvasData.height - height) / 2
  963. });
  964. setStyle(this.image, assign({
  965. width: imageData.width,
  966. height: imageData.height
  967. }, getTransforms(assign({
  968. translateX: imageData.left,
  969. translateY: imageData.top
  970. }, imageData))));
  971. if (changed) {
  972. this.output();
  973. }
  974. },
  975. initCropBox: function initCropBox() {
  976. var options = this.options, canvasData = this.canvasData;
  977. var aspectRatio = options.aspectRatio || options.initialAspectRatio;
  978. var autoCropArea = Number(options.autoCropArea) || 0.8;
  979. var cropBoxData = {
  980. width: canvasData.width,
  981. height: canvasData.height
  982. };
  983. if (aspectRatio) {
  984. if (canvasData.height * aspectRatio > canvasData.width) {
  985. cropBoxData.height = cropBoxData.width / aspectRatio;
  986. } else {
  987. cropBoxData.width = cropBoxData.height * aspectRatio;
  988. }
  989. }
  990. this.cropBoxData = cropBoxData;
  991. this.limitCropBox(true, true);
  992. cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
  993. cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
  994. cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);
  995. cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);
  996. cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2;
  997. cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2;
  998. cropBoxData.oldLeft = cropBoxData.left;
  999. cropBoxData.oldTop = cropBoxData.top;
  1000. this.initialCropBoxData = assign({}, cropBoxData);
  1001. },
  1002. limitCropBox: function limitCropBox(sizeLimited, positionLimited) {
  1003. var options = this.options, containerData = this.containerData, canvasData = this.canvasData, cropBoxData = this.cropBoxData, limited = this.limited;
  1004. var aspectRatio = options.aspectRatio;
  1005. if (sizeLimited) {
  1006. var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
  1007. var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
  1008. var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;
  1009. var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height;
  1010. minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);
  1011. minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);
  1012. if (aspectRatio) {
  1013. if (minCropBoxWidth && minCropBoxHeight) {
  1014. if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {
  1015. minCropBoxHeight = minCropBoxWidth / aspectRatio;
  1016. } else {
  1017. minCropBoxWidth = minCropBoxHeight * aspectRatio;
  1018. }
  1019. } else if (minCropBoxWidth) {
  1020. minCropBoxHeight = minCropBoxWidth / aspectRatio;
  1021. } else if (minCropBoxHeight) {
  1022. minCropBoxWidth = minCropBoxHeight * aspectRatio;
  1023. }
  1024. if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {
  1025. maxCropBoxHeight = maxCropBoxWidth / aspectRatio;
  1026. } else {
  1027. maxCropBoxWidth = maxCropBoxHeight * aspectRatio;
  1028. }
  1029. }
  1030. cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);
  1031. cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);
  1032. cropBoxData.maxWidth = maxCropBoxWidth;
  1033. cropBoxData.maxHeight = maxCropBoxHeight;
  1034. }
  1035. if (positionLimited) {
  1036. if (limited) {
  1037. cropBoxData.minLeft = Math.max(0, canvasData.left);
  1038. cropBoxData.minTop = Math.max(0, canvasData.top);
  1039. cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width;
  1040. cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height;
  1041. } else {
  1042. cropBoxData.minLeft = 0;
  1043. cropBoxData.minTop = 0;
  1044. cropBoxData.maxLeft = containerData.width - cropBoxData.width;
  1045. cropBoxData.maxTop = containerData.height - cropBoxData.height;
  1046. }
  1047. }
  1048. },
  1049. renderCropBox: function renderCropBox() {
  1050. var options = this.options, containerData = this.containerData, cropBoxData = this.cropBoxData;
  1051. if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {
  1052. cropBoxData.left = cropBoxData.oldLeft;
  1053. }
  1054. if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {
  1055. cropBoxData.top = cropBoxData.oldTop;
  1056. }
  1057. cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
  1058. cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
  1059. this.limitCropBox(false, true);
  1060. cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);
  1061. cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);
  1062. cropBoxData.oldLeft = cropBoxData.left;
  1063. cropBoxData.oldTop = cropBoxData.top;
  1064. if (options.movable && options.cropBoxMovable) {
  1065. setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL);
  1066. }
  1067. setStyle(this.cropBox, assign({
  1068. width: cropBoxData.width,
  1069. height: cropBoxData.height
  1070. }, getTransforms({
  1071. translateX: cropBoxData.left,
  1072. translateY: cropBoxData.top
  1073. })));
  1074. if (this.cropped && this.limited) {
  1075. this.limitCanvas(true, true);
  1076. }
  1077. if (!this.disabled) {
  1078. this.output();
  1079. }
  1080. },
  1081. output: function output() {
  1082. this.preview();
  1083. dispatchEvent(this.element, EVENT_CROP, this.getData());
  1084. }
  1085. };
  1086. var preview = {
  1087. initPreview: function initPreview() {
  1088. var element = this.element, crossOrigin = this.crossOrigin;
  1089. var preview3 = this.options.preview;
  1090. var url = crossOrigin ? this.crossOriginUrl : this.url;
  1091. var alt = element.alt || "The image to preview";
  1092. var image = document.createElement("img");
  1093. if (crossOrigin) {
  1094. image.crossOrigin = crossOrigin;
  1095. }
  1096. image.src = url;
  1097. image.alt = alt;
  1098. this.viewBox.appendChild(image);
  1099. this.viewBoxImage = image;
  1100. if (!preview3) {
  1101. return;
  1102. }
  1103. var previews = preview3;
  1104. if (typeof preview3 === "string") {
  1105. previews = element.ownerDocument.querySelectorAll(preview3);
  1106. } else if (preview3.querySelector) {
  1107. previews = [preview3];
  1108. }
  1109. this.previews = previews;
  1110. forEach(previews, function(el) {
  1111. var img = document.createElement("img");
  1112. setData(el, DATA_PREVIEW, {
  1113. width: el.offsetWidth,
  1114. height: el.offsetHeight,
  1115. html: el.innerHTML
  1116. });
  1117. if (crossOrigin) {
  1118. img.crossOrigin = crossOrigin;
  1119. }
  1120. img.src = url;
  1121. img.alt = alt;
  1122. img.style.cssText = 'display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"';
  1123. el.innerHTML = "";
  1124. el.appendChild(img);
  1125. });
  1126. },
  1127. resetPreview: function resetPreview() {
  1128. forEach(this.previews, function(element) {
  1129. var data = getData(element, DATA_PREVIEW);
  1130. setStyle(element, {
  1131. width: data.width,
  1132. height: data.height
  1133. });
  1134. element.innerHTML = data.html;
  1135. removeData(element, DATA_PREVIEW);
  1136. });
  1137. },
  1138. preview: function preview2() {
  1139. var imageData = this.imageData, canvasData = this.canvasData, cropBoxData = this.cropBoxData;
  1140. var cropBoxWidth = cropBoxData.width, cropBoxHeight = cropBoxData.height;
  1141. var width = imageData.width, height = imageData.height;
  1142. var left = cropBoxData.left - canvasData.left - imageData.left;
  1143. var top = cropBoxData.top - canvasData.top - imageData.top;
  1144. if (!this.cropped || this.disabled) {
  1145. return;
  1146. }
  1147. setStyle(this.viewBoxImage, assign({
  1148. width,
  1149. height
  1150. }, getTransforms(assign({
  1151. translateX: -left,
  1152. translateY: -top
  1153. }, imageData))));
  1154. forEach(this.previews, function(element) {
  1155. var data = getData(element, DATA_PREVIEW);
  1156. var originalWidth = data.width;
  1157. var originalHeight = data.height;
  1158. var newWidth = originalWidth;
  1159. var newHeight = originalHeight;
  1160. var ratio = 1;
  1161. if (cropBoxWidth) {
  1162. ratio = originalWidth / cropBoxWidth;
  1163. newHeight = cropBoxHeight * ratio;
  1164. }
  1165. if (cropBoxHeight && newHeight > originalHeight) {
  1166. ratio = originalHeight / cropBoxHeight;
  1167. newWidth = cropBoxWidth * ratio;
  1168. newHeight = originalHeight;
  1169. }
  1170. setStyle(element, {
  1171. width: newWidth,
  1172. height: newHeight
  1173. });
  1174. setStyle(element.getElementsByTagName("img")[0], assign({
  1175. width: width * ratio,
  1176. height: height * ratio
  1177. }, getTransforms(assign({
  1178. translateX: -left * ratio,
  1179. translateY: -top * ratio
  1180. }, imageData))));
  1181. });
  1182. }
  1183. };
  1184. var events = {
  1185. bind: function bind() {
  1186. var element = this.element, options = this.options, cropper = this.cropper;
  1187. if (isFunction(options.cropstart)) {
  1188. addListener(element, EVENT_CROP_START, options.cropstart);
  1189. }
  1190. if (isFunction(options.cropmove)) {
  1191. addListener(element, EVENT_CROP_MOVE, options.cropmove);
  1192. }
  1193. if (isFunction(options.cropend)) {
  1194. addListener(element, EVENT_CROP_END, options.cropend);
  1195. }
  1196. if (isFunction(options.crop)) {
  1197. addListener(element, EVENT_CROP, options.crop);
  1198. }
  1199. if (isFunction(options.zoom)) {
  1200. addListener(element, EVENT_ZOOM, options.zoom);
  1201. }
  1202. addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));
  1203. if (options.zoomable && options.zoomOnWheel) {
  1204. addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {
  1205. passive: false,
  1206. capture: true
  1207. });
  1208. }
  1209. if (options.toggleDragModeOnDblclick) {
  1210. addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));
  1211. }
  1212. addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this));
  1213. addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this));
  1214. if (options.responsive) {
  1215. addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));
  1216. }
  1217. },
  1218. unbind: function unbind() {
  1219. var element = this.element, options = this.options, cropper = this.cropper;
  1220. if (isFunction(options.cropstart)) {
  1221. removeListener(element, EVENT_CROP_START, options.cropstart);
  1222. }
  1223. if (isFunction(options.cropmove)) {
  1224. removeListener(element, EVENT_CROP_MOVE, options.cropmove);
  1225. }
  1226. if (isFunction(options.cropend)) {
  1227. removeListener(element, EVENT_CROP_END, options.cropend);
  1228. }
  1229. if (isFunction(options.crop)) {
  1230. removeListener(element, EVENT_CROP, options.crop);
  1231. }
  1232. if (isFunction(options.zoom)) {
  1233. removeListener(element, EVENT_ZOOM, options.zoom);
  1234. }
  1235. removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);
  1236. if (options.zoomable && options.zoomOnWheel) {
  1237. removeListener(cropper, EVENT_WHEEL, this.onWheel, {
  1238. passive: false,
  1239. capture: true
  1240. });
  1241. }
  1242. if (options.toggleDragModeOnDblclick) {
  1243. removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);
  1244. }
  1245. removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);
  1246. removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);
  1247. if (options.responsive) {
  1248. removeListener(window, EVENT_RESIZE, this.onResize);
  1249. }
  1250. }
  1251. };
  1252. var handlers = {
  1253. resize: function resize() {
  1254. if (this.disabled) {
  1255. return;
  1256. }
  1257. var options = this.options, container = this.container, containerData = this.containerData;
  1258. var ratioX = container.offsetWidth / containerData.width;
  1259. var ratioY = container.offsetHeight / containerData.height;
  1260. var ratio = Math.abs(ratioX - 1) > Math.abs(ratioY - 1) ? ratioX : ratioY;
  1261. if (ratio !== 1) {
  1262. var canvasData;
  1263. var cropBoxData;
  1264. if (options.restore) {
  1265. canvasData = this.getCanvasData();
  1266. cropBoxData = this.getCropBoxData();
  1267. }
  1268. this.render();
  1269. if (options.restore) {
  1270. this.setCanvasData(forEach(canvasData, function(n, i) {
  1271. canvasData[i] = n * ratio;
  1272. }));
  1273. this.setCropBoxData(forEach(cropBoxData, function(n, i) {
  1274. cropBoxData[i] = n * ratio;
  1275. }));
  1276. }
  1277. }
  1278. },
  1279. dblclick: function dblclick() {
  1280. if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {
  1281. return;
  1282. }
  1283. this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);
  1284. },
  1285. wheel: function wheel(event) {
  1286. var _this = this;
  1287. var ratio = Number(this.options.wheelZoomRatio) || 0.1;
  1288. var delta = 1;
  1289. if (this.disabled) {
  1290. return;
  1291. }
  1292. event.preventDefault();
  1293. if (this.wheeling) {
  1294. return;
  1295. }
  1296. this.wheeling = true;
  1297. setTimeout(function() {
  1298. _this.wheeling = false;
  1299. }, 50);
  1300. if (event.deltaY) {
  1301. delta = event.deltaY > 0 ? 1 : -1;
  1302. } else if (event.wheelDelta) {
  1303. delta = -event.wheelDelta / 120;
  1304. } else if (event.detail) {
  1305. delta = event.detail > 0 ? 1 : -1;
  1306. }
  1307. this.zoom(-delta * ratio, event);
  1308. },
  1309. cropStart: function cropStart(event) {
  1310. var buttons = event.buttons, button = event.button;
  1311. if (this.disabled || (event.type === "mousedown" || event.type === "pointerdown" && event.pointerType === "mouse") && (isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 || event.ctrlKey)) {
  1312. return;
  1313. }
  1314. var options = this.options, pointers = this.pointers;
  1315. var action;
  1316. if (event.changedTouches) {
  1317. forEach(event.changedTouches, function(touch) {
  1318. pointers[touch.identifier] = getPointer(touch);
  1319. });
  1320. } else {
  1321. pointers[event.pointerId || 0] = getPointer(event);
  1322. }
  1323. if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {
  1324. action = ACTION_ZOOM;
  1325. } else {
  1326. action = getData(event.target, DATA_ACTION);
  1327. }
  1328. if (!REGEXP_ACTIONS.test(action)) {
  1329. return;
  1330. }
  1331. if (dispatchEvent(this.element, EVENT_CROP_START, {
  1332. originalEvent: event,
  1333. action
  1334. }) === false) {
  1335. return;
  1336. }
  1337. event.preventDefault();
  1338. this.action = action;
  1339. this.cropping = false;
  1340. if (action === ACTION_CROP) {
  1341. this.cropping = true;
  1342. addClass(this.dragBox, CLASS_MODAL);
  1343. }
  1344. },
  1345. cropMove: function cropMove(event) {
  1346. var action = this.action;
  1347. if (this.disabled || !action) {
  1348. return;
  1349. }
  1350. var pointers = this.pointers;
  1351. event.preventDefault();
  1352. if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
  1353. originalEvent: event,
  1354. action
  1355. }) === false) {
  1356. return;
  1357. }
  1358. if (event.changedTouches) {
  1359. forEach(event.changedTouches, function(touch) {
  1360. assign(pointers[touch.identifier] || {}, getPointer(touch, true));
  1361. });
  1362. } else {
  1363. assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));
  1364. }
  1365. this.change(event);
  1366. },
  1367. cropEnd: function cropEnd(event) {
  1368. if (this.disabled) {
  1369. return;
  1370. }
  1371. var action = this.action, pointers = this.pointers;
  1372. if (event.changedTouches) {
  1373. forEach(event.changedTouches, function(touch) {
  1374. delete pointers[touch.identifier];
  1375. });
  1376. } else {
  1377. delete pointers[event.pointerId || 0];
  1378. }
  1379. if (!action) {
  1380. return;
  1381. }
  1382. event.preventDefault();
  1383. if (!Object.keys(pointers).length) {
  1384. this.action = "";
  1385. }
  1386. if (this.cropping) {
  1387. this.cropping = false;
  1388. toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);
  1389. }
  1390. dispatchEvent(this.element, EVENT_CROP_END, {
  1391. originalEvent: event,
  1392. action
  1393. });
  1394. }
  1395. };
  1396. var change = {
  1397. change: function change2(event) {
  1398. var options = this.options, canvasData = this.canvasData, containerData = this.containerData, cropBoxData = this.cropBoxData, pointers = this.pointers;
  1399. var action = this.action;
  1400. var aspectRatio = options.aspectRatio;
  1401. var left = cropBoxData.left, top = cropBoxData.top, width = cropBoxData.width, height = cropBoxData.height;
  1402. var right = left + width;
  1403. var bottom = top + height;
  1404. var minLeft = 0;
  1405. var minTop = 0;
  1406. var maxWidth = containerData.width;
  1407. var maxHeight = containerData.height;
  1408. var renderable = true;
  1409. var offset;
  1410. if (!aspectRatio && event.shiftKey) {
  1411. aspectRatio = width && height ? width / height : 1;
  1412. }
  1413. if (this.limited) {
  1414. minLeft = cropBoxData.minLeft;
  1415. minTop = cropBoxData.minTop;
  1416. maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);
  1417. maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);
  1418. }
  1419. var pointer = pointers[Object.keys(pointers)[0]];
  1420. var range = {
  1421. x: pointer.endX - pointer.startX,
  1422. y: pointer.endY - pointer.startY
  1423. };
  1424. var check = function check2(side) {
  1425. switch (side) {
  1426. case ACTION_EAST:
  1427. if (right + range.x > maxWidth) {
  1428. range.x = maxWidth - right;
  1429. }
  1430. break;
  1431. case ACTION_WEST:
  1432. if (left + range.x < minLeft) {
  1433. range.x = minLeft - left;
  1434. }
  1435. break;
  1436. case ACTION_NORTH:
  1437. if (top + range.y < minTop) {
  1438. range.y = minTop - top;
  1439. }
  1440. break;
  1441. case ACTION_SOUTH:
  1442. if (bottom + range.y > maxHeight) {
  1443. range.y = maxHeight - bottom;
  1444. }
  1445. break;
  1446. }
  1447. };
  1448. switch (action) {
  1449. case ACTION_ALL:
  1450. left += range.x;
  1451. top += range.y;
  1452. break;
  1453. case ACTION_EAST:
  1454. if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) {
  1455. renderable = false;
  1456. break;
  1457. }
  1458. check(ACTION_EAST);
  1459. width += range.x;
  1460. if (width < 0) {
  1461. action = ACTION_WEST;
  1462. width = -width;
  1463. left -= width;
  1464. }
  1465. if (aspectRatio) {
  1466. height = width / aspectRatio;
  1467. top += (cropBoxData.height - height) / 2;
  1468. }
  1469. break;
  1470. case ACTION_NORTH:
  1471. if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) {
  1472. renderable = false;
  1473. break;
  1474. }
  1475. check(ACTION_NORTH);
  1476. height -= range.y;
  1477. top += range.y;
  1478. if (height < 0) {
  1479. action = ACTION_SOUTH;
  1480. height = -height;
  1481. top -= height;
  1482. }
  1483. if (aspectRatio) {
  1484. width = height * aspectRatio;
  1485. left += (cropBoxData.width - width) / 2;
  1486. }
  1487. break;
  1488. case ACTION_WEST:
  1489. if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) {
  1490. renderable = false;
  1491. break;
  1492. }
  1493. check(ACTION_WEST);
  1494. width -= range.x;
  1495. left += range.x;
  1496. if (width < 0) {
  1497. action = ACTION_EAST;
  1498. width = -width;
  1499. left -= width;
  1500. }
  1501. if (aspectRatio) {
  1502. height = width / aspectRatio;
  1503. top += (cropBoxData.height - height) / 2;
  1504. }
  1505. break;
  1506. case ACTION_SOUTH:
  1507. if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) {
  1508. renderable = false;
  1509. break;
  1510. }
  1511. check(ACTION_SOUTH);
  1512. height += range.y;
  1513. if (height < 0) {
  1514. action = ACTION_NORTH;
  1515. height = -height;
  1516. top -= height;
  1517. }
  1518. if (aspectRatio) {
  1519. width = height * aspectRatio;
  1520. left += (cropBoxData.width - width) / 2;
  1521. }
  1522. break;
  1523. case ACTION_NORTH_EAST:
  1524. if (aspectRatio) {
  1525. if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {
  1526. renderable = false;
  1527. break;
  1528. }
  1529. check(ACTION_NORTH);
  1530. height -= range.y;
  1531. top += range.y;
  1532. width = height * aspectRatio;
  1533. } else {
  1534. check(ACTION_NORTH);
  1535. check(ACTION_EAST);
  1536. if (range.x >= 0) {
  1537. if (right < maxWidth) {
  1538. width += range.x;
  1539. } else if (range.y <= 0 && top <= minTop) {
  1540. renderable = false;
  1541. }
  1542. } else {
  1543. width += range.x;
  1544. }
  1545. if (range.y <= 0) {
  1546. if (top > minTop) {
  1547. height -= range.y;
  1548. top += range.y;
  1549. }
  1550. } else {
  1551. height -= range.y;
  1552. top += range.y;
  1553. }
  1554. }
  1555. if (width < 0 && height < 0) {
  1556. action = ACTION_SOUTH_WEST;
  1557. height = -height;
  1558. width = -width;
  1559. top -= height;
  1560. left -= width;
  1561. } else if (width < 0) {
  1562. action = ACTION_NORTH_WEST;
  1563. width = -width;
  1564. left -= width;
  1565. } else if (height < 0) {
  1566. action = ACTION_SOUTH_EAST;
  1567. height = -height;
  1568. top -= height;
  1569. }
  1570. break;
  1571. case ACTION_NORTH_WEST:
  1572. if (aspectRatio) {
  1573. if (range.y <= 0 && (top <= minTop || left <= minLeft)) {
  1574. renderable = false;
  1575. break;
  1576. }
  1577. check(ACTION_NORTH);
  1578. height -= range.y;
  1579. top += range.y;
  1580. width = height * aspectRatio;
  1581. left += cropBoxData.width - width;
  1582. } else {
  1583. check(ACTION_NORTH);
  1584. check(ACTION_WEST);
  1585. if (range.x <= 0) {
  1586. if (left > minLeft) {
  1587. width -= range.x;
  1588. left += range.x;
  1589. } else if (range.y <= 0 && top <= minTop) {
  1590. renderable = false;
  1591. }
  1592. } else {
  1593. width -= range.x;
  1594. left += range.x;
  1595. }
  1596. if (range.y <= 0) {
  1597. if (top > minTop) {
  1598. height -= range.y;
  1599. top += range.y;
  1600. }
  1601. } else {
  1602. height -= range.y;
  1603. top += range.y;
  1604. }
  1605. }
  1606. if (width < 0 && height < 0) {
  1607. action = ACTION_SOUTH_EAST;
  1608. height = -height;
  1609. width = -width;
  1610. top -= height;
  1611. left -= width;
  1612. } else if (width < 0) {
  1613. action = ACTION_NORTH_EAST;
  1614. width = -width;
  1615. left -= width;
  1616. } else if (height < 0) {
  1617. action = ACTION_SOUTH_WEST;
  1618. height = -height;
  1619. top -= height;
  1620. }
  1621. break;
  1622. case ACTION_SOUTH_WEST:
  1623. if (aspectRatio) {
  1624. if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {
  1625. renderable = false;
  1626. break;
  1627. }
  1628. check(ACTION_WEST);
  1629. width -= range.x;
  1630. left += range.x;
  1631. height = width / aspectRatio;
  1632. } else {
  1633. check(ACTION_SOUTH);
  1634. check(ACTION_WEST);
  1635. if (range.x <= 0) {
  1636. if (left > minLeft) {
  1637. width -= range.x;
  1638. left += range.x;
  1639. } else if (range.y >= 0 && bottom >= maxHeight) {
  1640. renderable = false;
  1641. }
  1642. } else {
  1643. width -= range.x;
  1644. left += range.x;
  1645. }
  1646. if (range.y >= 0) {
  1647. if (bottom < maxHeight) {
  1648. height += range.y;
  1649. }
  1650. } else {
  1651. height += range.y;
  1652. }
  1653. }
  1654. if (width < 0 && height < 0) {
  1655. action = ACTION_NORTH_EAST;
  1656. height = -height;
  1657. width = -width;
  1658. top -= height;
  1659. left -= width;
  1660. } else if (width < 0) {
  1661. action = ACTION_SOUTH_EAST;
  1662. width = -width;
  1663. left -= width;
  1664. } else if (height < 0) {
  1665. action = ACTION_NORTH_WEST;
  1666. height = -height;
  1667. top -= height;
  1668. }
  1669. break;
  1670. case ACTION_SOUTH_EAST:
  1671. if (aspectRatio) {
  1672. if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {
  1673. renderable = false;
  1674. break;
  1675. }
  1676. check(ACTION_EAST);
  1677. width += range.x;
  1678. height = width / aspectRatio;
  1679. } else {
  1680. check(ACTION_SOUTH);
  1681. check(ACTION_EAST);
  1682. if (range.x >= 0) {
  1683. if (right < maxWidth) {
  1684. width += range.x;
  1685. } else if (range.y >= 0 && bottom >= maxHeight) {
  1686. renderable = false;
  1687. }
  1688. } else {
  1689. width += range.x;
  1690. }
  1691. if (range.y >= 0) {
  1692. if (bottom < maxHeight) {
  1693. height += range.y;
  1694. }
  1695. } else {
  1696. height += range.y;
  1697. }
  1698. }
  1699. if (width < 0 && height < 0) {
  1700. action = ACTION_NORTH_WEST;
  1701. height = -height;
  1702. width = -width;
  1703. top -= height;
  1704. left -= width;
  1705. } else if (width < 0) {
  1706. action = ACTION_SOUTH_WEST;
  1707. width = -width;
  1708. left -= width;
  1709. } else if (height < 0) {
  1710. action = ACTION_NORTH_EAST;
  1711. height = -height;
  1712. top -= height;
  1713. }
  1714. break;
  1715. case ACTION_MOVE:
  1716. this.move(range.x, range.y);
  1717. renderable = false;
  1718. break;
  1719. case ACTION_ZOOM:
  1720. this.zoom(getMaxZoomRatio(pointers), event);
  1721. renderable = false;
  1722. break;
  1723. case ACTION_CROP:
  1724. if (!range.x || !range.y) {
  1725. renderable = false;
  1726. break;
  1727. }
  1728. offset = getOffset(this.cropper);
  1729. left = pointer.startX - offset.left;
  1730. top = pointer.startY - offset.top;
  1731. width = cropBoxData.minWidth;
  1732. height = cropBoxData.minHeight;
  1733. if (range.x > 0) {
  1734. action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;
  1735. } else if (range.x < 0) {
  1736. left -= width;
  1737. action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;
  1738. }
  1739. if (range.y < 0) {
  1740. top -= height;
  1741. }
  1742. if (!this.cropped) {
  1743. removeClass(this.cropBox, CLASS_HIDDEN);
  1744. this.cropped = true;
  1745. if (this.limited) {
  1746. this.limitCropBox(true, true);
  1747. }
  1748. }
  1749. break;
  1750. }
  1751. if (renderable) {
  1752. cropBoxData.width = width;
  1753. cropBoxData.height = height;
  1754. cropBoxData.left = left;
  1755. cropBoxData.top = top;
  1756. this.action = action;
  1757. this.renderCropBox();
  1758. }
  1759. forEach(pointers, function(p) {
  1760. p.startX = p.endX;
  1761. p.startY = p.endY;
  1762. });
  1763. }
  1764. };
  1765. var methods = {
  1766. crop: function crop() {
  1767. if (this.ready && !this.cropped && !this.disabled) {
  1768. this.cropped = true;
  1769. this.limitCropBox(true, true);
  1770. if (this.options.modal) {
  1771. addClass(this.dragBox, CLASS_MODAL);
  1772. }
  1773. removeClass(this.cropBox, CLASS_HIDDEN);
  1774. this.setCropBoxData(this.initialCropBoxData);
  1775. }
  1776. return this;
  1777. },
  1778. reset: function reset() {
  1779. if (this.ready && !this.disabled) {
  1780. this.imageData = assign({}, this.initialImageData);
  1781. this.canvasData = assign({}, this.initialCanvasData);
  1782. this.cropBoxData = assign({}, this.initialCropBoxData);
  1783. this.renderCanvas();
  1784. if (this.cropped) {
  1785. this.renderCropBox();
  1786. }
  1787. }
  1788. return this;
  1789. },
  1790. clear: function clear() {
  1791. if (this.cropped && !this.disabled) {
  1792. assign(this.cropBoxData, {
  1793. left: 0,
  1794. top: 0,
  1795. width: 0,
  1796. height: 0
  1797. });
  1798. this.cropped = false;
  1799. this.renderCropBox();
  1800. this.limitCanvas(true, true);
  1801. this.renderCanvas();
  1802. removeClass(this.dragBox, CLASS_MODAL);
  1803. addClass(this.cropBox, CLASS_HIDDEN);
  1804. }
  1805. return this;
  1806. },
  1807. replace: function replace(url) {
  1808. var hasSameSize = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
  1809. if (!this.disabled && url) {
  1810. if (this.isImg) {
  1811. this.element.src = url;
  1812. }
  1813. if (hasSameSize) {
  1814. this.url = url;
  1815. this.image.src = url;
  1816. if (this.ready) {
  1817. this.viewBoxImage.src = url;
  1818. forEach(this.previews, function(element) {
  1819. element.getElementsByTagName("img")[0].src = url;
  1820. });
  1821. }
  1822. } else {
  1823. if (this.isImg) {
  1824. this.replaced = true;
  1825. }
  1826. this.options.data = null;
  1827. this.uncreate();
  1828. this.load(url);
  1829. }
  1830. }
  1831. return this;
  1832. },
  1833. enable: function enable() {
  1834. if (this.ready && this.disabled) {
  1835. this.disabled = false;
  1836. removeClass(this.cropper, CLASS_DISABLED);
  1837. }
  1838. return this;
  1839. },
  1840. disable: function disable() {
  1841. if (this.ready && !this.disabled) {
  1842. this.disabled = true;
  1843. addClass(this.cropper, CLASS_DISABLED);
  1844. }
  1845. return this;
  1846. },
  1847. destroy: function destroy() {
  1848. var element = this.element;
  1849. if (!element[NAMESPACE]) {
  1850. return this;
  1851. }
  1852. element[NAMESPACE] = void 0;
  1853. if (this.isImg && this.replaced) {
  1854. element.src = this.originalUrl;
  1855. }
  1856. this.uncreate();
  1857. return this;
  1858. },
  1859. move: function move(offsetX) {
  1860. var offsetY = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : offsetX;
  1861. var _this$canvasData = this.canvasData, left = _this$canvasData.left, top = _this$canvasData.top;
  1862. return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));
  1863. },
  1864. moveTo: function moveTo(x) {
  1865. var y = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : x;
  1866. var canvasData = this.canvasData;
  1867. var changed = false;
  1868. x = Number(x);
  1869. y = Number(y);
  1870. if (this.ready && !this.disabled && this.options.movable) {
  1871. if (isNumber(x)) {
  1872. canvasData.left = x;
  1873. changed = true;
  1874. }
  1875. if (isNumber(y)) {
  1876. canvasData.top = y;
  1877. changed = true;
  1878. }
  1879. if (changed) {
  1880. this.renderCanvas(true);
  1881. }
  1882. }
  1883. return this;
  1884. },
  1885. zoom: function zoom(ratio, _originalEvent) {
  1886. var canvasData = this.canvasData;
  1887. ratio = Number(ratio);
  1888. if (ratio < 0) {
  1889. ratio = 1 / (1 - ratio);
  1890. } else {
  1891. ratio = 1 + ratio;
  1892. }
  1893. return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);
  1894. },
  1895. zoomTo: function zoomTo(ratio, pivot, _originalEvent) {
  1896. var options = this.options, canvasData = this.canvasData;
  1897. var width = canvasData.width, height = canvasData.height, naturalWidth = canvasData.naturalWidth, naturalHeight = canvasData.naturalHeight;
  1898. ratio = Number(ratio);
  1899. if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {
  1900. var newWidth = naturalWidth * ratio;
  1901. var newHeight = naturalHeight * ratio;
  1902. if (dispatchEvent(this.element, EVENT_ZOOM, {
  1903. ratio,
  1904. oldRatio: width / naturalWidth,
  1905. originalEvent: _originalEvent
  1906. }) === false) {
  1907. return this;
  1908. }
  1909. if (_originalEvent) {
  1910. var pointers = this.pointers;
  1911. var offset = getOffset(this.cropper);
  1912. var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
  1913. pageX: _originalEvent.pageX,
  1914. pageY: _originalEvent.pageY
  1915. };
  1916. canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width);
  1917. canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height);
  1918. } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
  1919. canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width);
  1920. canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height);
  1921. } else {
  1922. canvasData.left -= (newWidth - width) / 2;
  1923. canvasData.top -= (newHeight - height) / 2;
  1924. }
  1925. canvasData.width = newWidth;
  1926. canvasData.height = newHeight;
  1927. this.renderCanvas(true);
  1928. }
  1929. return this;
  1930. },
  1931. rotate: function rotate(degree) {
  1932. return this.rotateTo((this.imageData.rotate || 0) + Number(degree));
  1933. },
  1934. rotateTo: function rotateTo(degree) {
  1935. degree = Number(degree);
  1936. if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {
  1937. this.imageData.rotate = degree % 360;
  1938. this.renderCanvas(true, true);
  1939. }
  1940. return this;
  1941. },
  1942. scaleX: function scaleX(_scaleX) {
  1943. var scaleY2 = this.imageData.scaleY;
  1944. return this.scale(_scaleX, isNumber(scaleY2) ? scaleY2 : 1);
  1945. },
  1946. scaleY: function scaleY(_scaleY) {
  1947. var scaleX2 = this.imageData.scaleX;
  1948. return this.scale(isNumber(scaleX2) ? scaleX2 : 1, _scaleY);
  1949. },
  1950. scale: function scale(scaleX2) {
  1951. var scaleY2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : scaleX2;
  1952. var imageData = this.imageData;
  1953. var transformed = false;
  1954. scaleX2 = Number(scaleX2);
  1955. scaleY2 = Number(scaleY2);
  1956. if (this.ready && !this.disabled && this.options.scalable) {
  1957. if (isNumber(scaleX2)) {
  1958. imageData.scaleX = scaleX2;
  1959. transformed = true;
  1960. }
  1961. if (isNumber(scaleY2)) {
  1962. imageData.scaleY = scaleY2;
  1963. transformed = true;
  1964. }
  1965. if (transformed) {
  1966. this.renderCanvas(true, true);
  1967. }
  1968. }
  1969. return this;
  1970. },
  1971. getData: function getData2() {
  1972. var rounded = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
  1973. var options = this.options, imageData = this.imageData, canvasData = this.canvasData, cropBoxData = this.cropBoxData;
  1974. var data;
  1975. if (this.ready && this.cropped) {
  1976. data = {
  1977. x: cropBoxData.left - canvasData.left,
  1978. y: cropBoxData.top - canvasData.top,
  1979. width: cropBoxData.width,
  1980. height: cropBoxData.height
  1981. };
  1982. var ratio = imageData.width / imageData.naturalWidth;
  1983. forEach(data, function(n, i) {
  1984. data[i] = n / ratio;
  1985. });
  1986. if (rounded) {
  1987. var bottom = Math.round(data.y + data.height);
  1988. var right = Math.round(data.x + data.width);
  1989. data.x = Math.round(data.x);
  1990. data.y = Math.round(data.y);
  1991. data.width = right - data.x;
  1992. data.height = bottom - data.y;
  1993. }
  1994. } else {
  1995. data = {
  1996. x: 0,
  1997. y: 0,
  1998. width: 0,
  1999. height: 0
  2000. };
  2001. }
  2002. if (options.rotatable) {
  2003. data.rotate = imageData.rotate || 0;
  2004. }
  2005. if (options.scalable) {
  2006. data.scaleX = imageData.scaleX || 1;
  2007. data.scaleY = imageData.scaleY || 1;
  2008. }
  2009. return data;
  2010. },
  2011. setData: function setData2(data) {
  2012. var options = this.options, imageData = this.imageData, canvasData = this.canvasData;
  2013. var cropBoxData = {};
  2014. if (this.ready && !this.disabled && isPlainObject(data)) {
  2015. var transformed = false;
  2016. if (options.rotatable) {
  2017. if (isNumber(data.rotate) && data.rotate !== imageData.rotate) {
  2018. imageData.rotate = data.rotate;
  2019. transformed = true;
  2020. }
  2021. }
  2022. if (options.scalable) {
  2023. if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) {
  2024. imageData.scaleX = data.scaleX;
  2025. transformed = true;
  2026. }
  2027. if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) {
  2028. imageData.scaleY = data.scaleY;
  2029. transformed = true;
  2030. }
  2031. }
  2032. if (transformed) {
  2033. this.renderCanvas(true, true);
  2034. }
  2035. var ratio = imageData.width / imageData.naturalWidth;
  2036. if (isNumber(data.x)) {
  2037. cropBoxData.left = data.x * ratio + canvasData.left;
  2038. }
  2039. if (isNumber(data.y)) {
  2040. cropBoxData.top = data.y * ratio + canvasData.top;
  2041. }
  2042. if (isNumber(data.width)) {
  2043. cropBoxData.width = data.width * ratio;
  2044. }
  2045. if (isNumber(data.height)) {
  2046. cropBoxData.height = data.height * ratio;
  2047. }
  2048. this.setCropBoxData(cropBoxData);
  2049. }
  2050. return this;
  2051. },
  2052. getContainerData: function getContainerData() {
  2053. return this.ready ? assign({}, this.containerData) : {};
  2054. },
  2055. getImageData: function getImageData() {
  2056. return this.sized ? assign({}, this.imageData) : {};
  2057. },
  2058. getCanvasData: function getCanvasData() {
  2059. var canvasData = this.canvasData;
  2060. var data = {};
  2061. if (this.ready) {
  2062. forEach(["left", "top", "width", "height", "naturalWidth", "naturalHeight"], function(n) {
  2063. data[n] = canvasData[n];
  2064. });
  2065. }
  2066. return data;
  2067. },
  2068. setCanvasData: function setCanvasData(data) {
  2069. var canvasData = this.canvasData;
  2070. var aspectRatio = canvasData.aspectRatio;
  2071. if (this.ready && !this.disabled && isPlainObject(data)) {
  2072. if (isNumber(data.left)) {
  2073. canvasData.left = data.left;
  2074. }
  2075. if (isNumber(data.top)) {
  2076. canvasData.top = data.top;
  2077. }
  2078. if (isNumber(data.width)) {
  2079. canvasData.width = data.width;
  2080. canvasData.height = data.width / aspectRatio;
  2081. } else if (isNumber(data.height)) {
  2082. canvasData.height = data.height;
  2083. canvasData.width = data.height * aspectRatio;
  2084. }
  2085. this.renderCanvas(true);
  2086. }
  2087. return this;
  2088. },
  2089. getCropBoxData: function getCropBoxData() {
  2090. var cropBoxData = this.cropBoxData;
  2091. var data;
  2092. if (this.ready && this.cropped) {
  2093. data = {
  2094. left: cropBoxData.left,
  2095. top: cropBoxData.top,
  2096. width: cropBoxData.width,
  2097. height: cropBoxData.height
  2098. };
  2099. }
  2100. return data || {};
  2101. },
  2102. setCropBoxData: function setCropBoxData(data) {
  2103. var cropBoxData = this.cropBoxData;
  2104. var aspectRatio = this.options.aspectRatio;
  2105. var widthChanged;
  2106. var heightChanged;
  2107. if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {
  2108. if (isNumber(data.left)) {
  2109. cropBoxData.left = data.left;
  2110. }
  2111. if (isNumber(data.top)) {
  2112. cropBoxData.top = data.top;
  2113. }
  2114. if (isNumber(data.width) && data.width !== cropBoxData.width) {
  2115. widthChanged = true;
  2116. cropBoxData.width = data.width;
  2117. }
  2118. if (isNumber(data.height) && data.height !== cropBoxData.height) {
  2119. heightChanged = true;
  2120. cropBoxData.height = data.height;
  2121. }
  2122. if (aspectRatio) {
  2123. if (widthChanged) {
  2124. cropBoxData.height = cropBoxData.width / aspectRatio;
  2125. } else if (heightChanged) {
  2126. cropBoxData.width = cropBoxData.height * aspectRatio;
  2127. }
  2128. }
  2129. this.renderCropBox();
  2130. }
  2131. return this;
  2132. },
  2133. getCroppedCanvas: function getCroppedCanvas() {
  2134. var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
  2135. if (!this.ready || !window.HTMLCanvasElement) {
  2136. return null;
  2137. }
  2138. var canvasData = this.canvasData;
  2139. var source = getSourceCanvas(this.image, this.imageData, canvasData, options);
  2140. if (!this.cropped) {
  2141. return source;
  2142. }
  2143. var _this$getData = this.getData(), initialX = _this$getData.x, initialY = _this$getData.y, initialWidth = _this$getData.width, initialHeight = _this$getData.height;
  2144. var ratio = source.width / Math.floor(canvasData.naturalWidth);
  2145. if (ratio !== 1) {
  2146. initialX *= ratio;
  2147. initialY *= ratio;
  2148. initialWidth *= ratio;
  2149. initialHeight *= ratio;
  2150. }
  2151. var aspectRatio = initialWidth / initialHeight;
  2152. var maxSizes = getAdjustedSizes({
  2153. aspectRatio,
  2154. width: options.maxWidth || Infinity,
  2155. height: options.maxHeight || Infinity
  2156. });
  2157. var minSizes = getAdjustedSizes({
  2158. aspectRatio,
  2159. width: options.minWidth || 0,
  2160. height: options.minHeight || 0
  2161. }, "cover");
  2162. var _getAdjustedSizes = getAdjustedSizes({
  2163. aspectRatio,
  2164. width: options.width || (ratio !== 1 ? source.width : initialWidth),
  2165. height: options.height || (ratio !== 1 ? source.height : initialHeight)
  2166. }), width = _getAdjustedSizes.width, height = _getAdjustedSizes.height;
  2167. width = Math.min(maxSizes.width, Math.max(minSizes.width, width));
  2168. height = Math.min(maxSizes.height, Math.max(minSizes.height, height));
  2169. var canvas = document.createElement("canvas");
  2170. var context = canvas.getContext("2d");
  2171. canvas.width = normalizeDecimalNumber(width);
  2172. canvas.height = normalizeDecimalNumber(height);
  2173. context.fillStyle = options.fillColor || "transparent";
  2174. context.fillRect(0, 0, width, height);
  2175. var _options$imageSmoothi = options.imageSmoothingEnabled, imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi, imageSmoothingQuality = options.imageSmoothingQuality;
  2176. context.imageSmoothingEnabled = imageSmoothingEnabled;
  2177. if (imageSmoothingQuality) {
  2178. context.imageSmoothingQuality = imageSmoothingQuality;
  2179. }
  2180. var sourceWidth = source.width;
  2181. var sourceHeight = source.height;
  2182. var srcX = initialX;
  2183. var srcY = initialY;
  2184. var srcWidth;
  2185. var srcHeight;
  2186. var dstX;
  2187. var dstY;
  2188. var dstWidth;
  2189. var dstHeight;
  2190. if (srcX <= -initialWidth || srcX > sourceWidth) {
  2191. srcX = 0;
  2192. srcWidth = 0;
  2193. dstX = 0;
  2194. dstWidth = 0;
  2195. } else if (srcX <= 0) {
  2196. dstX = -srcX;
  2197. srcX = 0;
  2198. srcWidth = Math.min(sourceWidth, initialWidth + srcX);
  2199. dstWidth = srcWidth;
  2200. } else if (srcX <= sourceWidth) {
  2201. dstX = 0;
  2202. srcWidth = Math.min(initialWidth, sourceWidth - srcX);
  2203. dstWidth = srcWidth;
  2204. }
  2205. if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) {
  2206. srcY = 0;
  2207. srcHeight = 0;
  2208. dstY = 0;
  2209. dstHeight = 0;
  2210. } else if (srcY <= 0) {
  2211. dstY = -srcY;
  2212. srcY = 0;
  2213. srcHeight = Math.min(sourceHeight, initialHeight + srcY);
  2214. dstHeight = srcHeight;
  2215. } else if (srcY <= sourceHeight) {
  2216. dstY = 0;
  2217. srcHeight = Math.min(initialHeight, sourceHeight - srcY);
  2218. dstHeight = srcHeight;
  2219. }
  2220. var params = [srcX, srcY, srcWidth, srcHeight];
  2221. if (dstWidth > 0 && dstHeight > 0) {
  2222. var scale2 = width / initialWidth;
  2223. params.push(dstX * scale2, dstY * scale2, dstWidth * scale2, dstHeight * scale2);
  2224. }
  2225. context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function(param) {
  2226. return Math.floor(normalizeDecimalNumber(param));
  2227. }))));
  2228. return canvas;
  2229. },
  2230. setAspectRatio: function setAspectRatio(aspectRatio) {
  2231. var options = this.options;
  2232. if (!this.disabled && !isUndefined(aspectRatio)) {
  2233. options.aspectRatio = Math.max(0, aspectRatio) || NaN;
  2234. if (this.ready) {
  2235. this.initCropBox();
  2236. if (this.cropped) {
  2237. this.renderCropBox();
  2238. }
  2239. }
  2240. }
  2241. return this;
  2242. },
  2243. setDragMode: function setDragMode(mode) {
  2244. var options = this.options, dragBox = this.dragBox, face = this.face;
  2245. if (this.ready && !this.disabled) {
  2246. var croppable = mode === DRAG_MODE_CROP;
  2247. var movable = options.movable && mode === DRAG_MODE_MOVE;
  2248. mode = croppable || movable ? mode : DRAG_MODE_NONE;
  2249. options.dragMode = mode;
  2250. setData(dragBox, DATA_ACTION, mode);
  2251. toggleClass(dragBox, CLASS_CROP, croppable);
  2252. toggleClass(dragBox, CLASS_MOVE, movable);
  2253. if (!options.cropBoxMovable) {
  2254. setData(face, DATA_ACTION, mode);
  2255. toggleClass(face, CLASS_CROP, croppable);
  2256. toggleClass(face, CLASS_MOVE, movable);
  2257. }
  2258. }
  2259. return this;
  2260. }
  2261. };
  2262. var AnotherCropper = WINDOW.Cropper;
  2263. var Cropper = function() {
  2264. function Cropper2(element) {
  2265. var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
  2266. _classCallCheck(this, Cropper2);
  2267. if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {
  2268. throw new Error("The first argument is required and must be an <img> or <canvas> element.");
  2269. }
  2270. this.element = element;
  2271. this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
  2272. this.cropped = false;
  2273. this.disabled = false;
  2274. this.pointers = {};
  2275. this.ready = false;
  2276. this.reloading = false;
  2277. this.replaced = false;
  2278. this.sized = false;
  2279. this.sizing = false;
  2280. this.init();
  2281. }
  2282. _createClass(Cropper2, [{
  2283. key: "init",
  2284. value: function init() {
  2285. var element = this.element;
  2286. var tagName = element.tagName.toLowerCase();
  2287. var url;
  2288. if (element[NAMESPACE]) {
  2289. return;
  2290. }
  2291. element[NAMESPACE] = this;
  2292. if (tagName === "img") {
  2293. this.isImg = true;
  2294. url = element.getAttribute("src") || "";
  2295. this.originalUrl = url;
  2296. if (!url) {
  2297. return;
  2298. }
  2299. url = element.src;
  2300. } else if (tagName === "canvas" && window.HTMLCanvasElement) {
  2301. url = element.toDataURL();
  2302. }
  2303. this.load(url);
  2304. }
  2305. }, {
  2306. key: "load",
  2307. value: function load(url) {
  2308. var _this = this;
  2309. if (!url) {
  2310. return;
  2311. }
  2312. this.url = url;
  2313. this.imageData = {};
  2314. var element = this.element, options = this.options;
  2315. if (!options.rotatable && !options.scalable) {
  2316. options.checkOrientation = false;
  2317. }
  2318. if (!options.checkOrientation || !window.ArrayBuffer) {
  2319. this.clone();
  2320. return;
  2321. }
  2322. if (REGEXP_DATA_URL.test(url)) {
  2323. if (REGEXP_DATA_URL_JPEG.test(url)) {
  2324. this.read(dataURLToArrayBuffer(url));
  2325. } else {
  2326. this.clone();
  2327. }
  2328. return;
  2329. }
  2330. var xhr = new XMLHttpRequest();
  2331. var clone = this.clone.bind(this);
  2332. this.reloading = true;
  2333. this.xhr = xhr;
  2334. xhr.onabort = clone;
  2335. xhr.onerror = clone;
  2336. xhr.ontimeout = clone;
  2337. xhr.onprogress = function() {
  2338. if (xhr.getResponseHeader("content-type") !== MIME_TYPE_JPEG) {
  2339. xhr.abort();
  2340. }
  2341. };
  2342. xhr.onload = function() {
  2343. _this.read(xhr.response);
  2344. };
  2345. xhr.onloadend = function() {
  2346. _this.reloading = false;
  2347. _this.xhr = null;
  2348. };
  2349. if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {
  2350. url = addTimestamp(url);
  2351. }
  2352. xhr.open("GET", url, true);
  2353. xhr.responseType = "arraybuffer";
  2354. xhr.withCredentials = element.crossOrigin === "use-credentials";
  2355. xhr.send();
  2356. }
  2357. }, {
  2358. key: "read",
  2359. value: function read(arrayBuffer) {
  2360. var options = this.options, imageData = this.imageData;
  2361. var orientation = resetAndGetOrientation(arrayBuffer);
  2362. var rotate2 = 0;
  2363. var scaleX2 = 1;
  2364. var scaleY2 = 1;
  2365. if (orientation > 1) {
  2366. this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
  2367. var _parseOrientation = parseOrientation(orientation);
  2368. rotate2 = _parseOrientation.rotate;
  2369. scaleX2 = _parseOrientation.scaleX;
  2370. scaleY2 = _parseOrientation.scaleY;
  2371. }
  2372. if (options.rotatable) {
  2373. imageData.rotate = rotate2;
  2374. }
  2375. if (options.scalable) {
  2376. imageData.scaleX = scaleX2;
  2377. imageData.scaleY = scaleY2;
  2378. }
  2379. this.clone();
  2380. }
  2381. }, {
  2382. key: "clone",
  2383. value: function clone() {
  2384. var element = this.element, url = this.url;
  2385. var crossOrigin = element.crossOrigin;
  2386. var crossOriginUrl = url;
  2387. if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
  2388. if (!crossOrigin) {
  2389. crossOrigin = "anonymous";
  2390. }
  2391. crossOriginUrl = addTimestamp(url);
  2392. }
  2393. this.crossOrigin = crossOrigin;
  2394. this.crossOriginUrl = crossOriginUrl;
  2395. var image = document.createElement("img");
  2396. if (crossOrigin) {
  2397. image.crossOrigin = crossOrigin;
  2398. }
  2399. image.src = crossOriginUrl || url;
  2400. image.alt = element.alt || "The image to crop";
  2401. this.image = image;
  2402. image.onload = this.start.bind(this);
  2403. image.onerror = this.stop.bind(this);
  2404. addClass(image, CLASS_HIDE);
  2405. element.parentNode.insertBefore(image, element.nextSibling);
  2406. }
  2407. }, {
  2408. key: "start",
  2409. value: function start() {
  2410. var _this2 = this;
  2411. var image = this.image;
  2412. image.onload = null;
  2413. image.onerror = null;
  2414. this.sizing = true;
  2415. var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent);
  2416. var done = function done2(naturalWidth, naturalHeight) {
  2417. assign(_this2.imageData, {
  2418. naturalWidth,
  2419. naturalHeight,
  2420. aspectRatio: naturalWidth / naturalHeight
  2421. });
  2422. _this2.initialImageData = assign({}, _this2.imageData);
  2423. _this2.sizing = false;
  2424. _this2.sized = true;
  2425. _this2.build();
  2426. };
  2427. if (image.naturalWidth && !isIOSWebKit) {
  2428. done(image.naturalWidth, image.naturalHeight);
  2429. return;
  2430. }
  2431. var sizingImage = document.createElement("img");
  2432. var body = document.body || document.documentElement;
  2433. this.sizingImage = sizingImage;
  2434. sizingImage.onload = function() {
  2435. done(sizingImage.width, sizingImage.height);
  2436. if (!isIOSWebKit) {
  2437. body.removeChild(sizingImage);
  2438. }
  2439. };
  2440. sizingImage.src = image.src;
  2441. if (!isIOSWebKit) {
  2442. sizingImage.style.cssText = "left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;";
  2443. body.appendChild(sizingImage);
  2444. }
  2445. }
  2446. }, {
  2447. key: "stop",
  2448. value: function stop() {
  2449. var image = this.image;
  2450. image.onload = null;
  2451. image.onerror = null;
  2452. image.parentNode.removeChild(image);
  2453. this.image = null;
  2454. }
  2455. }, {
  2456. key: "build",
  2457. value: function build() {
  2458. if (!this.sized || this.ready) {
  2459. return;
  2460. }
  2461. var element = this.element, options = this.options, image = this.image;
  2462. var container = element.parentNode;
  2463. var template = document.createElement("div");
  2464. template.innerHTML = TEMPLATE;
  2465. var cropper = template.querySelector(".".concat(NAMESPACE, "-container"));
  2466. var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas"));
  2467. var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box"));
  2468. var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box"));
  2469. var face = cropBox.querySelector(".".concat(NAMESPACE, "-face"));
  2470. this.container = container;
  2471. this.cropper = cropper;
  2472. this.canvas = canvas;
  2473. this.dragBox = dragBox;
  2474. this.cropBox = cropBox;
  2475. this.viewBox = cropper.querySelector(".".concat(NAMESPACE, "-view-box"));
  2476. this.face = face;
  2477. canvas.appendChild(image);
  2478. addClass(element, CLASS_HIDDEN);
  2479. container.insertBefore(cropper, element.nextSibling);
  2480. if (!this.isImg) {
  2481. removeClass(image, CLASS_HIDE);
  2482. }
  2483. this.initPreview();
  2484. this.bind();
  2485. options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN;
  2486. options.aspectRatio = Math.max(0, options.aspectRatio) || NaN;
  2487. options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0;
  2488. addClass(cropBox, CLASS_HIDDEN);
  2489. if (!options.guides) {
  2490. addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN);
  2491. }
  2492. if (!options.center) {
  2493. addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN);
  2494. }
  2495. if (options.background) {
  2496. addClass(cropper, "".concat(NAMESPACE, "-bg"));
  2497. }
  2498. if (!options.highlight) {
  2499. addClass(face, CLASS_INVISIBLE);
  2500. }
  2501. if (options.cropBoxMovable) {
  2502. addClass(face, CLASS_MOVE);
  2503. setData(face, DATA_ACTION, ACTION_ALL);
  2504. }
  2505. if (!options.cropBoxResizable) {
  2506. addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-line")), CLASS_HIDDEN);
  2507. addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-point")), CLASS_HIDDEN);
  2508. }
  2509. this.render();
  2510. this.ready = true;
  2511. this.setDragMode(options.dragMode);
  2512. if (options.autoCrop) {
  2513. this.crop();
  2514. }
  2515. this.setData(options.data);
  2516. if (isFunction(options.ready)) {
  2517. addListener(element, EVENT_READY, options.ready, {
  2518. once: true
  2519. });
  2520. }
  2521. dispatchEvent(element, EVENT_READY);
  2522. }
  2523. }, {
  2524. key: "unbuild",
  2525. value: function unbuild() {
  2526. if (!this.ready) {
  2527. return;
  2528. }
  2529. this.ready = false;
  2530. this.unbind();
  2531. this.resetPreview();
  2532. this.cropper.parentNode.removeChild(this.cropper);
  2533. removeClass(this.element, CLASS_HIDDEN);
  2534. }
  2535. }, {
  2536. key: "uncreate",
  2537. value: function uncreate() {
  2538. if (this.ready) {
  2539. this.unbuild();
  2540. this.ready = false;
  2541. this.cropped = false;
  2542. } else if (this.sizing) {
  2543. this.sizingImage.onload = null;
  2544. this.sizing = false;
  2545. this.sized = false;
  2546. } else if (this.reloading) {
  2547. this.xhr.onabort = null;
  2548. this.xhr.abort();
  2549. } else if (this.image) {
  2550. this.stop();
  2551. }
  2552. }
  2553. }], [{
  2554. key: "noConflict",
  2555. value: function noConflict() {
  2556. window.Cropper = AnotherCropper;
  2557. return Cropper2;
  2558. }
  2559. }, {
  2560. key: "setDefaults",
  2561. value: function setDefaults(options) {
  2562. assign(DEFAULTS, isPlainObject(options) && options);
  2563. }
  2564. }]);
  2565. return Cropper2;
  2566. }();
  2567. assign(Cropper.prototype, render, preview, events, handlers, change, methods);
  2568. var cropper_esm_default = Cropper;
  2569. // dep:cropperjs
  2570. var cropperjs_default = cropper_esm_default;
  2571. export {
  2572. cropperjs_default as default
  2573. };
  2574. /*!
  2575. * Cropper.js v1.5.12
  2576. * https://fengyuanchen.github.io/cropperjs
  2577. *
  2578. * Copyright 2015-present Chen Fengyuan
  2579. * Released under the MIT license
  2580. *
  2581. * Date: 2021-06-12T08:00:17.411Z
  2582. */
  2583. //# sourceMappingURL=cropperjs.js.map