cropper.js 78 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002
  1. /*!
  2. * Cropper v2.3.1
  3. * https://github.com/fengyuanchen/cropper
  4. *
  5. * Copyright (c) 2014-2016 Fengyuan Chen and contributors
  6. * Released under the MIT license
  7. *
  8. * Date: 2016-05-28T14:47:08.528Z
  9. */
  10. (function (factory) {
  11. if (typeof define === 'function' && define.amd) {
  12. // AMD. Register as anonymous module.
  13. define(['jquery'], factory);
  14. } else if (typeof exports === 'object') {
  15. // Node / CommonJS
  16. factory(require('jquery'));
  17. } else {
  18. // Browser globals.
  19. factory(jQuery);
  20. }
  21. })(function ($) {
  22. 'use strict';
  23. // Globals
  24. var $window = $(window);
  25. var $document = $(document);
  26. var location = window.location;
  27. var navigator = window.navigator;
  28. var ArrayBuffer = window.ArrayBuffer;
  29. var Uint8Array = window.Uint8Array;
  30. var DataView = window.DataView;
  31. var btoa = window.btoa;
  32. // Constants
  33. var NAMESPACE = 'cropper';
  34. // Classes
  35. var CLASS_MODAL = 'cropper-modal';
  36. var CLASS_HIDE = 'cropper-hide';
  37. var CLASS_HIDDEN = 'cropper-hidden';
  38. var CLASS_INVISIBLE = 'cropper-invisible';
  39. var CLASS_MOVE = 'cropper-move';
  40. var CLASS_CROP = 'cropper-crop';
  41. var CLASS_DISABLED = 'cropper-disabled';
  42. var CLASS_BG = 'cropper-bg';
  43. // Events
  44. var EVENT_MOUSE_DOWN = 'mousedown touchstart pointerdown MSPointerDown';
  45. var EVENT_MOUSE_MOVE = 'mousemove touchmove pointermove MSPointerMove';
  46. var EVENT_MOUSE_UP = 'mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel';
  47. var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
  48. var EVENT_DBLCLICK = 'dblclick';
  49. var EVENT_LOAD = 'load.' + NAMESPACE;
  50. var EVENT_ERROR = 'error.' + NAMESPACE;
  51. var EVENT_RESIZE = 'resize.' + NAMESPACE; // Bind to window with namespace
  52. var EVENT_BUILD = 'build.' + NAMESPACE;
  53. var EVENT_BUILT = 'built.' + NAMESPACE;
  54. var EVENT_CROP_START = 'cropstart.' + NAMESPACE;
  55. var EVENT_CROP_MOVE = 'cropmove.' + NAMESPACE;
  56. var EVENT_CROP_END = 'cropend.' + NAMESPACE;
  57. var EVENT_CROP = 'crop.' + NAMESPACE;
  58. var EVENT_ZOOM = 'zoom.' + NAMESPACE;
  59. // RegExps
  60. var REGEXP_ACTIONS = /e|w|s|n|se|sw|ne|nw|all|crop|move|zoom/;
  61. var REGEXP_DATA_URL = /^data\:/;
  62. var REGEXP_DATA_URL_HEAD = /^data\:([^\;]+)\;base64,/;
  63. var REGEXP_DATA_URL_JPEG = /^data\:image\/jpeg.*;base64,/;
  64. // Data keys
  65. var DATA_PREVIEW = 'preview';
  66. var DATA_ACTION = 'action';
  67. // Actions
  68. var ACTION_EAST = 'e';
  69. var ACTION_WEST = 'w';
  70. var ACTION_SOUTH = 's';
  71. var ACTION_NORTH = 'n';
  72. var ACTION_SOUTH_EAST = 'se';
  73. var ACTION_SOUTH_WEST = 'sw';
  74. var ACTION_NORTH_EAST = 'ne';
  75. var ACTION_NORTH_WEST = 'nw';
  76. var ACTION_ALL = 'all';
  77. var ACTION_CROP = 'crop';
  78. var ACTION_MOVE = 'move';
  79. var ACTION_ZOOM = 'zoom';
  80. var ACTION_NONE = 'none';
  81. // Supports
  82. var SUPPORT_CANVAS = $.isFunction($('<canvas>')[0].getContext);
  83. var IS_SAFARI = navigator && /safari/i.test(navigator.userAgent) && /apple computer/i.test(navigator.vendor);
  84. // Maths
  85. var num = Number;
  86. var min = Math.min;
  87. var max = Math.max;
  88. var abs = Math.abs;
  89. var sin = Math.sin;
  90. var cos = Math.cos;
  91. var sqrt = Math.sqrt;
  92. var round = Math.round;
  93. var floor = Math.floor;
  94. // Utilities
  95. var fromCharCode = String.fromCharCode;
  96. function isNumber(n) {
  97. return typeof n === 'number' && !isNaN(n);
  98. }
  99. function isUndefined(n) {
  100. return typeof n === 'undefined';
  101. }
  102. function toArray(obj, offset) {
  103. var args = [];
  104. // This is necessary for IE8
  105. if (isNumber(offset)) {
  106. args.push(offset);
  107. }
  108. return args.slice.apply(obj, args);
  109. }
  110. // Custom proxy to avoid jQuery's guid
  111. function proxy(fn, context) {
  112. var args = toArray(arguments, 2);
  113. return function () {
  114. return fn.apply(context, args.concat(toArray(arguments)));
  115. };
  116. }
  117. function isCrossOriginURL(url) {
  118. var parts = url.match(/^(https?:)\/\/([^\:\/\?#]+):?(\d*)/i);
  119. return parts && (
  120. parts[1] !== location.protocol ||
  121. parts[2] !== location.hostname ||
  122. parts[3] !== location.port
  123. );
  124. }
  125. function addTimestamp(url) {
  126. var timestamp = 'timestamp=' + (new Date()).getTime();
  127. return (url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp);
  128. }
  129. function getCrossOrigin(crossOrigin) {
  130. return crossOrigin ? ' crossOrigin="' + crossOrigin + '"' : '';
  131. }
  132. function getImageSize(image, callback) {
  133. var newImage;
  134. // Modern browsers (ignore Safari, #120 & #509)
  135. if (image.naturalWidth && !IS_SAFARI) {
  136. return callback(image.naturalWidth, image.naturalHeight);
  137. }
  138. // IE8: Don't use `new Image()` here (#319)
  139. newImage = document.createElement('img');
  140. newImage.onload = function () {
  141. callback(this.width, this.height);
  142. };
  143. newImage.src = image.src;
  144. }
  145. function getTransform(options) {
  146. var transforms = [];
  147. var rotate = options.rotate;
  148. var scaleX = options.scaleX;
  149. var scaleY = options.scaleY;
  150. // Scale should come first before rotate (#633)
  151. if (isNumber(scaleX) && isNumber(scaleY)) {
  152. transforms.push('scale(' + scaleX + ',' + scaleY + ')');
  153. }
  154. if (isNumber(rotate)) {
  155. transforms.push('rotate(' + rotate + 'deg)');
  156. }
  157. return transforms.length ? transforms.join(' ') : 'none';
  158. }
  159. function getRotatedSizes(data, isReversed) {
  160. var deg = abs(data.degree) % 180;
  161. var arc = (deg > 90 ? (180 - deg) : deg) * Math.PI / 180;
  162. var sinArc = sin(arc);
  163. var cosArc = cos(arc);
  164. var width = data.width;
  165. var height = data.height;
  166. var aspectRatio = data.aspectRatio;
  167. var newWidth;
  168. var newHeight;
  169. if (!isReversed) {
  170. newWidth = width * cosArc + height * sinArc;
  171. newHeight = width * sinArc + height * cosArc;
  172. } else {
  173. newWidth = width / (cosArc + sinArc / aspectRatio);
  174. newHeight = newWidth / aspectRatio;
  175. }
  176. return {
  177. width: newWidth,
  178. height: newHeight
  179. };
  180. }
  181. function getSourceCanvas(image, data) {
  182. var canvas = $('<canvas>')[0];
  183. var context = canvas.getContext('2d');
  184. var dstX = 0;
  185. var dstY = 0;
  186. var dstWidth = data.naturalWidth;
  187. var dstHeight = data.naturalHeight;
  188. var rotate = data.rotate;
  189. var scaleX = data.scaleX;
  190. var scaleY = data.scaleY;
  191. var scalable = isNumber(scaleX) && isNumber(scaleY) && (scaleX !== 1 || scaleY !== 1);
  192. var rotatable = isNumber(rotate) && rotate !== 0;
  193. var advanced = rotatable || scalable;
  194. var canvasWidth = dstWidth * abs(scaleX || 1);
  195. var canvasHeight = dstHeight * abs(scaleY || 1);
  196. var translateX;
  197. var translateY;
  198. var rotated;
  199. if (scalable) {
  200. translateX = canvasWidth / 2;
  201. translateY = canvasHeight / 2;
  202. }
  203. if (rotatable) {
  204. rotated = getRotatedSizes({
  205. width: canvasWidth,
  206. height: canvasHeight,
  207. degree: rotate
  208. });
  209. canvasWidth = rotated.width;
  210. canvasHeight = rotated.height;
  211. translateX = canvasWidth / 2;
  212. translateY = canvasHeight / 2;
  213. }
  214. canvas.width = canvasWidth;
  215. canvas.height = canvasHeight;
  216. if (advanced) {
  217. dstX = -dstWidth / 2;
  218. dstY = -dstHeight / 2;
  219. context.save();
  220. context.translate(translateX, translateY);
  221. }
  222. if (rotatable) {
  223. context.rotate(rotate * Math.PI / 180);
  224. }
  225. // Should call `scale` after rotated
  226. if (scalable) {
  227. context.scale(scaleX, scaleY);
  228. }
  229. context.drawImage(image, floor(dstX), floor(dstY), floor(dstWidth), floor(dstHeight));
  230. if (advanced) {
  231. context.restore();
  232. }
  233. return canvas;
  234. }
  235. function getTouchesCenter(touches) {
  236. var length = touches.length;
  237. var pageX = 0;
  238. var pageY = 0;
  239. if (length) {
  240. $.each(touches, function (i, touch) {
  241. pageX += touch.pageX;
  242. pageY += touch.pageY;
  243. });
  244. pageX /= length;
  245. pageY /= length;
  246. }
  247. return {
  248. pageX: pageX,
  249. pageY: pageY
  250. };
  251. }
  252. function getStringFromCharCode(dataView, start, length) {
  253. var str = '';
  254. var i;
  255. for (i = start, length += start; i < length; i++) {
  256. str += fromCharCode(dataView.getUint8(i));
  257. }
  258. return str;
  259. }
  260. function getOrientation(arrayBuffer) {
  261. var dataView = new DataView(arrayBuffer);
  262. var length = dataView.byteLength;
  263. var orientation;
  264. var exifIDCode;
  265. var tiffOffset;
  266. var firstIFDOffset;
  267. var littleEndian;
  268. var endianness;
  269. var app1Start;
  270. var ifdStart;
  271. var offset;
  272. var i;
  273. // Only handle JPEG image (start by 0xFFD8)
  274. if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
  275. offset = 2;
  276. while (offset < length) {
  277. if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
  278. app1Start = offset;
  279. break;
  280. }
  281. offset++;
  282. }
  283. }
  284. if (app1Start) {
  285. exifIDCode = app1Start + 4;
  286. tiffOffset = app1Start + 10;
  287. if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
  288. endianness = dataView.getUint16(tiffOffset);
  289. littleEndian = endianness === 0x4949;
  290. if (littleEndian || endianness === 0x4D4D /* bigEndian */) {
  291. if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
  292. firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
  293. if (firstIFDOffset >= 0x00000008) {
  294. ifdStart = tiffOffset + firstIFDOffset;
  295. }
  296. }
  297. }
  298. }
  299. }
  300. if (ifdStart) {
  301. length = dataView.getUint16(ifdStart, littleEndian);
  302. for (i = 0; i < length; i++) {
  303. offset = ifdStart + i * 12 + 2;
  304. if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {
  305. // 8 is the offset of the current tag's value
  306. offset += 8;
  307. // Get the original orientation value
  308. orientation = dataView.getUint16(offset, littleEndian);
  309. // Override the orientation with its default value for Safari (#120)
  310. if (IS_SAFARI) {
  311. dataView.setUint16(offset, 1, littleEndian);
  312. }
  313. break;
  314. }
  315. }
  316. }
  317. return orientation;
  318. }
  319. function dataURLToArrayBuffer(dataURL) {
  320. var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');
  321. var binary = atob(base64);
  322. var length = binary.length;
  323. var arrayBuffer = new ArrayBuffer(length);
  324. var dataView = new Uint8Array(arrayBuffer);
  325. var i;
  326. for (i = 0; i < length; i++) {
  327. dataView[i] = binary.charCodeAt(i);
  328. }
  329. return arrayBuffer;
  330. }
  331. // Only available for JPEG image
  332. function arrayBufferToDataURL(arrayBuffer) {
  333. var dataView = new Uint8Array(arrayBuffer);
  334. var length = dataView.length;
  335. var base64 = '';
  336. var i;
  337. for (i = 0; i < length; i++) {
  338. base64 += fromCharCode(dataView[i]);
  339. }
  340. return 'data:image/jpeg;base64,' + btoa(base64);
  341. }
  342. function Cropper(element, options) {
  343. this.$element = $(element);
  344. this.options = $.extend({}, Cropper.DEFAULTS, $.isPlainObject(options) && options);
  345. this.isLoaded = false;
  346. this.isBuilt = false;
  347. this.isCompleted = false;
  348. this.isRotated = false;
  349. this.isCropped = false;
  350. this.isDisabled = false;
  351. this.isReplaced = false;
  352. this.isLimited = false;
  353. this.wheeling = false;
  354. this.isImg = false;
  355. this.originalUrl = '';
  356. this.canvas = null;
  357. this.cropBox = null;
  358. this.init();
  359. }
  360. Cropper.prototype = {
  361. constructor: Cropper,
  362. init: function () {
  363. var $this = this.$element;
  364. var url;
  365. if ($this.is('img')) {
  366. this.isImg = true;
  367. // Should use `$.fn.attr` here. e.g.: "img/picture.jpg"
  368. this.originalUrl = url = $this.attr('src');
  369. // Stop when it's a blank image
  370. if (!url) {
  371. return;
  372. }
  373. // Should use `$.fn.prop` here. e.g.: "http://example.com/img/picture.jpg"
  374. url = $this.prop('src');
  375. } else if ($this.is('canvas') && SUPPORT_CANVAS) {
  376. url = $this[0].toDataURL();
  377. }
  378. this.load(url);
  379. },
  380. // A shortcut for triggering custom events
  381. trigger: function (type, data) {
  382. var e = $.Event(type, data);
  383. this.$element.trigger(e);
  384. return e;
  385. },
  386. load: function (url) {
  387. var options = this.options;
  388. var $this = this.$element;
  389. var read;
  390. var xhr;
  391. if (!url) {
  392. return;
  393. }
  394. // Trigger build event first
  395. $this.one(EVENT_BUILD, options.build);
  396. if (this.trigger(EVENT_BUILD).isDefaultPrevented()) {
  397. return;
  398. }
  399. this.url = url;
  400. this.image = {};
  401. if (!options.checkOrientation || !ArrayBuffer) {
  402. return this.clone();
  403. }
  404. read = $.proxy(this.read, this);
  405. // XMLHttpRequest disallows to open a Data URL in some browsers like IE11 and Safari
  406. if (REGEXP_DATA_URL.test(url)) {
  407. return REGEXP_DATA_URL_JPEG.test(url) ?
  408. read(dataURLToArrayBuffer(url)) :
  409. this.clone();
  410. }
  411. xhr = new XMLHttpRequest();
  412. xhr.onerror = xhr.onabort = $.proxy(function () {
  413. this.clone();
  414. }, this);
  415. xhr.onload = function () {
  416. read(this.response);
  417. };
  418. if (options.checkCrossOrigin && isCrossOriginURL(url) && $this.prop('crossOrigin')) {
  419. url = addTimestamp(url);
  420. }
  421. xhr.open('get', url);
  422. xhr.responseType = 'arraybuffer';
  423. xhr.send();
  424. },
  425. read: function (arrayBuffer) {
  426. var options = this.options;
  427. var orientation = getOrientation(arrayBuffer);
  428. var image = this.image;
  429. var rotate;
  430. var scaleX;
  431. var scaleY;
  432. if (orientation > 1) {
  433. this.url = arrayBufferToDataURL(arrayBuffer);
  434. switch (orientation) {
  435. // flip horizontal
  436. case 2:
  437. scaleX = -1;
  438. break;
  439. // rotate left 180°
  440. case 3:
  441. rotate = -180;
  442. break;
  443. // flip vertical
  444. case 4:
  445. scaleY = -1;
  446. break;
  447. // flip vertical + rotate right 90°
  448. case 5:
  449. rotate = 90;
  450. scaleY = -1;
  451. break;
  452. // rotate right 90°
  453. case 6:
  454. rotate = 90;
  455. break;
  456. // flip horizontal + rotate right 90°
  457. case 7:
  458. rotate = 90;
  459. scaleX = -1;
  460. break;
  461. // rotate left 90°
  462. case 8:
  463. rotate = -90;
  464. break;
  465. }
  466. }
  467. if (options.rotatable) {
  468. image.rotate = rotate;
  469. }
  470. if (options.scalable) {
  471. image.scaleX = scaleX;
  472. image.scaleY = scaleY;
  473. }
  474. this.clone();
  475. },
  476. clone: function () {
  477. var options = this.options;
  478. var $this = this.$element;
  479. var url = this.url;
  480. var crossOrigin = '';
  481. var crossOriginUrl;
  482. var $clone;
  483. if (options.checkCrossOrigin && isCrossOriginURL(url)) {
  484. crossOrigin = $this.prop('crossOrigin');
  485. if (crossOrigin) {
  486. crossOriginUrl = url;
  487. } else {
  488. crossOrigin = 'anonymous';
  489. // Bust cache (#148) when there is not a "crossOrigin" property
  490. crossOriginUrl = addTimestamp(url);
  491. }
  492. }
  493. this.crossOrigin = crossOrigin;
  494. this.crossOriginUrl = crossOriginUrl;
  495. this.$clone = $clone = $('<img' + getCrossOrigin(crossOrigin) + ' src="' + (crossOriginUrl || url) + '">');
  496. if (this.isImg) {
  497. if ($this[0].complete) {
  498. this.start();
  499. } else {
  500. $this.one(EVENT_LOAD, $.proxy(this.start, this));
  501. }
  502. } else {
  503. $clone.
  504. one(EVENT_LOAD, $.proxy(this.start, this)).
  505. one(EVENT_ERROR, $.proxy(this.stop, this)).
  506. addClass(CLASS_HIDE).
  507. insertAfter($this);
  508. }
  509. },
  510. start: function () {
  511. var $image = this.$element;
  512. var $clone = this.$clone;
  513. if (!this.isImg) {
  514. $clone.off(EVENT_ERROR, this.stop);
  515. $image = $clone;
  516. }
  517. getImageSize($image[0], $.proxy(function (naturalWidth, naturalHeight) {
  518. $.extend(this.image, {
  519. naturalWidth: naturalWidth,
  520. naturalHeight: naturalHeight,
  521. aspectRatio: naturalWidth / naturalHeight
  522. });
  523. this.isLoaded = true;
  524. this.build();
  525. }, this));
  526. },
  527. stop: function () {
  528. this.$clone.remove();
  529. this.$clone = null;
  530. },
  531. build: function () {
  532. var options = this.options;
  533. var $this = this.$element;
  534. var $clone = this.$clone;
  535. var $cropper;
  536. var $cropBox;
  537. var $face;
  538. if (!this.isLoaded) {
  539. return;
  540. }
  541. // Unbuild first when replace
  542. if (this.isBuilt) {
  543. this.unbuild();
  544. }
  545. // Create cropper elements
  546. this.$container = $this.parent();
  547. this.$cropper = $cropper = $(Cropper.TEMPLATE);
  548. this.$canvas = $cropper.find('.cropper-canvas').append($clone);
  549. this.$dragBox = $cropper.find('.cropper-drag-box');
  550. this.$cropBox = $cropBox = $cropper.find('.cropper-crop-box');
  551. this.$viewBox = $cropper.find('.cropper-view-box');
  552. this.$face = $face = $cropBox.find('.cropper-face');
  553. // Hide the original image
  554. $this.addClass(CLASS_HIDDEN).after($cropper);
  555. // Show the clone image if is hidden
  556. if (!this.isImg) {
  557. $clone.removeClass(CLASS_HIDE);
  558. }
  559. this.initPreview();
  560. this.bind();
  561. options.aspectRatio = max(0, options.aspectRatio) || NaN;
  562. options.viewMode = max(0, min(3, round(options.viewMode))) || 0;
  563. if (options.autoCrop) {
  564. this.isCropped = true;
  565. if (options.modal) {
  566. this.$dragBox.addClass(CLASS_MODAL);
  567. }
  568. } else {
  569. $cropBox.addClass(CLASS_HIDDEN);
  570. }
  571. if (!options.guides) {
  572. $cropBox.find('.cropper-dashed').addClass(CLASS_HIDDEN);
  573. }
  574. if (!options.center) {
  575. $cropBox.find('.cropper-center').addClass(CLASS_HIDDEN);
  576. }
  577. if (options.cropBoxMovable) {
  578. $face.addClass(CLASS_MOVE).data(DATA_ACTION, ACTION_ALL);
  579. }
  580. if (!options.highlight) {
  581. $face.addClass(CLASS_INVISIBLE);
  582. }
  583. if (options.background) {
  584. $cropper.addClass(CLASS_BG);
  585. }
  586. if (!options.cropBoxResizable) {
  587. $cropBox.find('.cropper-line, .cropper-point').addClass(CLASS_HIDDEN);
  588. }
  589. this.setDragMode(options.dragMode);
  590. this.render();
  591. this.isBuilt = true;
  592. this.setData(options.data);
  593. $this.one(EVENT_BUILT, options.built);
  594. // Trigger the built event asynchronously to keep `data('cropper')` is defined
  595. setTimeout($.proxy(function () {
  596. this.trigger(EVENT_BUILT);
  597. this.isCompleted = true;
  598. }, this), 0);
  599. },
  600. unbuild: function () {
  601. if (!this.isBuilt) {
  602. return;
  603. }
  604. this.isBuilt = false;
  605. this.isCompleted = false;
  606. this.initialImage = null;
  607. // Clear `initialCanvas` is necessary when replace
  608. this.initialCanvas = null;
  609. this.initialCropBox = null;
  610. this.container = null;
  611. this.canvas = null;
  612. // Clear `cropBox` is necessary when replace
  613. this.cropBox = null;
  614. this.unbind();
  615. this.resetPreview();
  616. this.$preview = null;
  617. this.$viewBox = null;
  618. this.$cropBox = null;
  619. this.$dragBox = null;
  620. this.$canvas = null;
  621. this.$container = null;
  622. this.$cropper.remove();
  623. this.$cropper = null;
  624. },
  625. render: function () {
  626. this.initContainer();
  627. this.initCanvas();
  628. this.initCropBox();
  629. this.renderCanvas();
  630. if (this.isCropped) {
  631. this.renderCropBox();
  632. }
  633. },
  634. initContainer: function () {
  635. var options = this.options;
  636. var $this = this.$element;
  637. var $container = this.$container;
  638. var $cropper = this.$cropper;
  639. $cropper.addClass(CLASS_HIDDEN);
  640. $this.removeClass(CLASS_HIDDEN);
  641. $cropper.css((this.container = {
  642. width: max($container.width(), num(options.minContainerWidth) || 200),
  643. height: max($container.height(), num(options.minContainerHeight) || 100)
  644. }));
  645. $this.addClass(CLASS_HIDDEN);
  646. $cropper.removeClass(CLASS_HIDDEN);
  647. },
  648. // Canvas (image wrapper)
  649. initCanvas: function () {
  650. var viewMode = this.options.viewMode;
  651. var container = this.container;
  652. var containerWidth = container.width;
  653. var containerHeight = container.height;
  654. var image = this.image;
  655. var imageNaturalWidth = image.naturalWidth;
  656. var imageNaturalHeight = image.naturalHeight;
  657. var is90Degree = abs(image.rotate) === 90;
  658. var naturalWidth = is90Degree ? imageNaturalHeight : imageNaturalWidth;
  659. var naturalHeight = is90Degree ? imageNaturalWidth : imageNaturalHeight;
  660. var aspectRatio = naturalWidth / naturalHeight;
  661. var canvasWidth = containerWidth;
  662. var canvasHeight = containerHeight;
  663. var canvas;
  664. if (containerHeight * aspectRatio > containerWidth) {
  665. if (viewMode === 3) {
  666. canvasWidth = containerHeight * aspectRatio;
  667. } else {
  668. canvasHeight = containerWidth / aspectRatio;
  669. }
  670. } else {
  671. if (viewMode === 3) {
  672. canvasHeight = containerWidth / aspectRatio;
  673. } else {
  674. canvasWidth = containerHeight * aspectRatio;
  675. }
  676. }
  677. canvas = {
  678. naturalWidth: naturalWidth,
  679. naturalHeight: naturalHeight,
  680. aspectRatio: aspectRatio,
  681. width: canvasWidth,
  682. height: canvasHeight
  683. };
  684. canvas.oldLeft = canvas.left = (containerWidth - canvasWidth) / 2;
  685. canvas.oldTop = canvas.top = (containerHeight - canvasHeight) / 2;
  686. this.canvas = canvas;
  687. this.isLimited = (viewMode === 1 || viewMode === 2);
  688. this.limitCanvas(true, true);
  689. this.initialImage = $.extend({}, image);
  690. this.initialCanvas = $.extend({}, canvas);
  691. },
  692. limitCanvas: function (isSizeLimited, isPositionLimited) {
  693. var options = this.options;
  694. var viewMode = options.viewMode;
  695. var container = this.container;
  696. var containerWidth = container.width;
  697. var containerHeight = container.height;
  698. var canvas = this.canvas;
  699. var aspectRatio = canvas.aspectRatio;
  700. var cropBox = this.cropBox;
  701. var isCropped = this.isCropped && cropBox;
  702. var minCanvasWidth;
  703. var minCanvasHeight;
  704. var newCanvasLeft;
  705. var newCanvasTop;
  706. if (isSizeLimited) {
  707. minCanvasWidth = num(options.minCanvasWidth) || 0;
  708. minCanvasHeight = num(options.minCanvasHeight) || 0;
  709. if (viewMode) {
  710. if (viewMode > 1) {
  711. minCanvasWidth = max(minCanvasWidth, containerWidth);
  712. minCanvasHeight = max(minCanvasHeight, containerHeight);
  713. if (viewMode === 3) {
  714. if (minCanvasHeight * aspectRatio > minCanvasWidth) {
  715. minCanvasWidth = minCanvasHeight * aspectRatio;
  716. } else {
  717. minCanvasHeight = minCanvasWidth / aspectRatio;
  718. }
  719. }
  720. } else {
  721. if (minCanvasWidth) {
  722. minCanvasWidth = max(minCanvasWidth, isCropped ? cropBox.width : 0);
  723. } else if (minCanvasHeight) {
  724. minCanvasHeight = max(minCanvasHeight, isCropped ? cropBox.height : 0);
  725. } else if (isCropped) {
  726. minCanvasWidth = cropBox.width;
  727. minCanvasHeight = cropBox.height;
  728. if (minCanvasHeight * aspectRatio > minCanvasWidth) {
  729. minCanvasWidth = minCanvasHeight * aspectRatio;
  730. } else {
  731. minCanvasHeight = minCanvasWidth / aspectRatio;
  732. }
  733. }
  734. }
  735. }
  736. if (minCanvasWidth && minCanvasHeight) {
  737. if (minCanvasHeight * aspectRatio > minCanvasWidth) {
  738. minCanvasHeight = minCanvasWidth / aspectRatio;
  739. } else {
  740. minCanvasWidth = minCanvasHeight * aspectRatio;
  741. }
  742. } else if (minCanvasWidth) {
  743. minCanvasHeight = minCanvasWidth / aspectRatio;
  744. } else if (minCanvasHeight) {
  745. minCanvasWidth = minCanvasHeight * aspectRatio;
  746. }
  747. canvas.minWidth = minCanvasWidth;
  748. canvas.minHeight = minCanvasHeight;
  749. canvas.maxWidth = Infinity;
  750. canvas.maxHeight = Infinity;
  751. }
  752. if (isPositionLimited) {
  753. if (viewMode) {
  754. newCanvasLeft = containerWidth - canvas.width;
  755. newCanvasTop = containerHeight - canvas.height;
  756. canvas.minLeft = min(0, newCanvasLeft);
  757. canvas.minTop = min(0, newCanvasTop);
  758. canvas.maxLeft = max(0, newCanvasLeft);
  759. canvas.maxTop = max(0, newCanvasTop);
  760. if (isCropped && this.isLimited) {
  761. canvas.minLeft = min(
  762. cropBox.left,
  763. cropBox.left + cropBox.width - canvas.width
  764. );
  765. canvas.minTop = min(
  766. cropBox.top,
  767. cropBox.top + cropBox.height - canvas.height
  768. );
  769. canvas.maxLeft = cropBox.left;
  770. canvas.maxTop = cropBox.top;
  771. if (viewMode === 2) {
  772. if (canvas.width >= containerWidth) {
  773. canvas.minLeft = min(0, newCanvasLeft);
  774. canvas.maxLeft = max(0, newCanvasLeft);
  775. }
  776. if (canvas.height >= containerHeight) {
  777. canvas.minTop = min(0, newCanvasTop);
  778. canvas.maxTop = max(0, newCanvasTop);
  779. }
  780. }
  781. }
  782. } else {
  783. canvas.minLeft = -canvas.width;
  784. canvas.minTop = -canvas.height;
  785. canvas.maxLeft = containerWidth;
  786. canvas.maxTop = containerHeight;
  787. }
  788. }
  789. },
  790. renderCanvas: function (isChanged) {
  791. var canvas = this.canvas;
  792. var image = this.image;
  793. var rotate = image.rotate;
  794. var naturalWidth = image.naturalWidth;
  795. var naturalHeight = image.naturalHeight;
  796. var aspectRatio;
  797. var rotated;
  798. if (this.isRotated) {
  799. this.isRotated = false;
  800. // Computes rotated sizes with image sizes
  801. rotated = getRotatedSizes({
  802. width: image.width,
  803. height: image.height,
  804. degree: rotate
  805. });
  806. aspectRatio = rotated.width / rotated.height;
  807. if (aspectRatio !== canvas.aspectRatio) {
  808. canvas.left -= (rotated.width - canvas.width) / 2;
  809. canvas.top -= (rotated.height - canvas.height) / 2;
  810. canvas.width = rotated.width;
  811. canvas.height = rotated.height;
  812. canvas.aspectRatio = aspectRatio;
  813. canvas.naturalWidth = naturalWidth;
  814. canvas.naturalHeight = naturalHeight;
  815. // Computes rotated sizes with natural image sizes
  816. if (rotate % 180) {
  817. rotated = getRotatedSizes({
  818. width: naturalWidth,
  819. height: naturalHeight,
  820. degree: rotate
  821. });
  822. canvas.naturalWidth = rotated.width;
  823. canvas.naturalHeight = rotated.height;
  824. }
  825. this.limitCanvas(true, false);
  826. }
  827. }
  828. if (canvas.width > canvas.maxWidth || canvas.width < canvas.minWidth) {
  829. canvas.left = canvas.oldLeft;
  830. }
  831. if (canvas.height > canvas.maxHeight || canvas.height < canvas.minHeight) {
  832. canvas.top = canvas.oldTop;
  833. }
  834. canvas.width = min(max(canvas.width, canvas.minWidth), canvas.maxWidth);
  835. canvas.height = min(max(canvas.height, canvas.minHeight), canvas.maxHeight);
  836. this.limitCanvas(false, true);
  837. canvas.oldLeft = canvas.left = min(max(canvas.left, canvas.minLeft), canvas.maxLeft);
  838. canvas.oldTop = canvas.top = min(max(canvas.top, canvas.minTop), canvas.maxTop);
  839. this.$canvas.css({
  840. width: canvas.width,
  841. height: canvas.height,
  842. left: canvas.left,
  843. top: canvas.top
  844. });
  845. this.renderImage();
  846. if (this.isCropped && this.isLimited) {
  847. this.limitCropBox(true, true);
  848. }
  849. if (isChanged) {
  850. this.output();
  851. }
  852. },
  853. renderImage: function (isChanged) {
  854. var canvas = this.canvas;
  855. var image = this.image;
  856. var reversed;
  857. if (image.rotate) {
  858. reversed = getRotatedSizes({
  859. width: canvas.width,
  860. height: canvas.height,
  861. degree: image.rotate,
  862. aspectRatio: image.aspectRatio
  863. }, true);
  864. }
  865. $.extend(image, reversed ? {
  866. width: reversed.width,
  867. height: reversed.height,
  868. left: (canvas.width - reversed.width) / 2,
  869. top: (canvas.height - reversed.height) / 2
  870. } : {
  871. width: canvas.width,
  872. height: canvas.height,
  873. left: 0,
  874. top: 0
  875. });
  876. this.$clone.css({
  877. width: image.width,
  878. height: image.height,
  879. marginLeft: image.left,
  880. marginTop: image.top,
  881. transform: getTransform(image)
  882. });
  883. if (isChanged) {
  884. this.output();
  885. }
  886. },
  887. initCropBox: function () {
  888. var options = this.options;
  889. var canvas = this.canvas;
  890. var aspectRatio = options.aspectRatio;
  891. var autoCropArea = num(options.autoCropArea) || 0.8;
  892. var cropBox = {
  893. width: canvas.width,
  894. height: canvas.height
  895. };
  896. if (aspectRatio) {
  897. if (canvas.height * aspectRatio > canvas.width) {
  898. cropBox.height = cropBox.width / aspectRatio;
  899. } else {
  900. cropBox.width = cropBox.height * aspectRatio;
  901. }
  902. }
  903. this.cropBox = cropBox;
  904. this.limitCropBox(true, true);
  905. // Initialize auto crop area
  906. cropBox.width = min(max(cropBox.width, cropBox.minWidth), cropBox.maxWidth);
  907. cropBox.height = min(max(cropBox.height, cropBox.minHeight), cropBox.maxHeight);
  908. // The width of auto crop area must large than "minWidth", and the height too. (#164)
  909. cropBox.width = max(cropBox.minWidth, cropBox.width * autoCropArea);
  910. cropBox.height = max(cropBox.minHeight, cropBox.height * autoCropArea);
  911. cropBox.oldLeft = cropBox.left = canvas.left + (canvas.width - cropBox.width) / 2;
  912. cropBox.oldTop = cropBox.top = canvas.top + (canvas.height - cropBox.height) / 2;
  913. this.initialCropBox = $.extend({}, cropBox);
  914. },
  915. limitCropBox: function (isSizeLimited, isPositionLimited) {
  916. var options = this.options;
  917. var aspectRatio = options.aspectRatio;
  918. var container = this.container;
  919. var containerWidth = container.width;
  920. var containerHeight = container.height;
  921. var canvas = this.canvas;
  922. var cropBox = this.cropBox;
  923. var isLimited = this.isLimited;
  924. var minCropBoxWidth;
  925. var minCropBoxHeight;
  926. var maxCropBoxWidth;
  927. var maxCropBoxHeight;
  928. if (isSizeLimited) {
  929. minCropBoxWidth = num(options.minCropBoxWidth) || 0;
  930. minCropBoxHeight = num(options.minCropBoxHeight) || 0;
  931. // The min/maxCropBoxWidth/Height must be less than containerWidth/Height
  932. minCropBoxWidth = min(minCropBoxWidth, containerWidth);
  933. minCropBoxHeight = min(minCropBoxHeight, containerHeight);
  934. maxCropBoxWidth = min(containerWidth, isLimited ? canvas.width : containerWidth);
  935. maxCropBoxHeight = min(containerHeight, isLimited ? canvas.height : containerHeight);
  936. if (aspectRatio) {
  937. if (minCropBoxWidth && minCropBoxHeight) {
  938. if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {
  939. minCropBoxHeight = minCropBoxWidth / aspectRatio;
  940. } else {
  941. minCropBoxWidth = minCropBoxHeight * aspectRatio;
  942. }
  943. } else if (minCropBoxWidth) {
  944. minCropBoxHeight = minCropBoxWidth / aspectRatio;
  945. } else if (minCropBoxHeight) {
  946. minCropBoxWidth = minCropBoxHeight * aspectRatio;
  947. }
  948. if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {
  949. maxCropBoxHeight = maxCropBoxWidth / aspectRatio;
  950. } else {
  951. maxCropBoxWidth = maxCropBoxHeight * aspectRatio;
  952. }
  953. }
  954. // The minWidth/Height must be less than maxWidth/Height
  955. cropBox.minWidth = min(minCropBoxWidth, maxCropBoxWidth);
  956. cropBox.minHeight = min(minCropBoxHeight, maxCropBoxHeight);
  957. cropBox.maxWidth = maxCropBoxWidth;
  958. cropBox.maxHeight = maxCropBoxHeight;
  959. }
  960. if (isPositionLimited) {
  961. if (isLimited) {
  962. cropBox.minLeft = max(0, canvas.left);
  963. cropBox.minTop = max(0, canvas.top);
  964. cropBox.maxLeft = min(containerWidth, canvas.left + canvas.width) - cropBox.width;
  965. cropBox.maxTop = min(containerHeight, canvas.top + canvas.height) - cropBox.height;
  966. } else {
  967. cropBox.minLeft = 0;
  968. cropBox.minTop = 0;
  969. cropBox.maxLeft = containerWidth - cropBox.width;
  970. cropBox.maxTop = containerHeight - cropBox.height;
  971. }
  972. }
  973. },
  974. renderCropBox: function () {
  975. var options = this.options;
  976. var container = this.container;
  977. var containerWidth = container.width;
  978. var containerHeight = container.height;
  979. var cropBox = this.cropBox;
  980. if (cropBox.width > cropBox.maxWidth || cropBox.width < cropBox.minWidth) {
  981. cropBox.left = cropBox.oldLeft;
  982. }
  983. if (cropBox.height > cropBox.maxHeight || cropBox.height < cropBox.minHeight) {
  984. cropBox.top = cropBox.oldTop;
  985. }
  986. cropBox.width = min(max(cropBox.width, cropBox.minWidth), cropBox.maxWidth);
  987. cropBox.height = min(max(cropBox.height, cropBox.minHeight), cropBox.maxHeight);
  988. this.limitCropBox(false, true);
  989. cropBox.oldLeft = cropBox.left = min(max(cropBox.left, cropBox.minLeft), cropBox.maxLeft);
  990. cropBox.oldTop = cropBox.top = min(max(cropBox.top, cropBox.minTop), cropBox.maxTop);
  991. if (options.movable && options.cropBoxMovable) {
  992. // Turn to move the canvas when the crop box is equal to the container
  993. this.$face.data(DATA_ACTION, (cropBox.width === containerWidth && cropBox.height === containerHeight) ? ACTION_MOVE : ACTION_ALL);
  994. }
  995. this.$cropBox.css({
  996. width: cropBox.width,
  997. height: cropBox.height,
  998. left: cropBox.left,
  999. top: cropBox.top
  1000. });
  1001. if (this.isCropped && this.isLimited) {
  1002. this.limitCanvas(true, true);
  1003. }
  1004. if (!this.isDisabled) {
  1005. this.output();
  1006. }
  1007. },
  1008. output: function () {
  1009. this.preview();
  1010. if (this.isCompleted) {
  1011. this.trigger(EVENT_CROP, this.getData());
  1012. } else if (!this.isBuilt) {
  1013. // Only trigger one crop event before complete
  1014. this.$element.one(EVENT_BUILT, $.proxy(function () {
  1015. this.trigger(EVENT_CROP, this.getData());
  1016. }, this));
  1017. }
  1018. },
  1019. initPreview: function () {
  1020. var crossOrigin = getCrossOrigin(this.crossOrigin);
  1021. var url = crossOrigin ? this.crossOriginUrl : this.url;
  1022. var $clone2;
  1023. this.$preview = $(this.options.preview);
  1024. this.$clone2 = $clone2 = $('<img' + crossOrigin + ' src="' + url + '">');
  1025. this.$viewBox.html($clone2);
  1026. this.$preview.each(function () {
  1027. var $this = $(this);
  1028. // Save the original size for recover
  1029. $this.data(DATA_PREVIEW, {
  1030. width: $this.width(),
  1031. height: $this.height(),
  1032. html: $this.html()
  1033. });
  1034. /**
  1035. * Override img element styles
  1036. * Add `display:block` to avoid margin top issue
  1037. * (Occur only when margin-top <= -height)
  1038. */
  1039. $this.html(
  1040. '<img' + crossOrigin + ' src="' + url + '" style="' +
  1041. 'display:block;width:100%;height:auto;' +
  1042. 'min-width:0!important;min-height:0!important;' +
  1043. 'max-width:none!important;max-height:none!important;' +
  1044. 'image-orientation:0deg!important;">'
  1045. );
  1046. });
  1047. },
  1048. resetPreview: function () {
  1049. this.$preview.each(function () {
  1050. var $this = $(this);
  1051. var data = $this.data(DATA_PREVIEW);
  1052. $this.css({
  1053. width: data.width,
  1054. height: data.height
  1055. }).html(data.html).removeData(DATA_PREVIEW);
  1056. });
  1057. },
  1058. preview: function () {
  1059. var image = this.image;
  1060. var canvas = this.canvas;
  1061. var cropBox = this.cropBox;
  1062. var cropBoxWidth = cropBox.width;
  1063. var cropBoxHeight = cropBox.height;
  1064. var width = image.width;
  1065. var height = image.height;
  1066. var left = cropBox.left - canvas.left - image.left;
  1067. var top = cropBox.top - canvas.top - image.top;
  1068. if (!this.isCropped || this.isDisabled) {
  1069. return;
  1070. }
  1071. this.$clone2.css({
  1072. width: width,
  1073. height: height,
  1074. marginLeft: -left,
  1075. marginTop: -top,
  1076. transform: getTransform(image)
  1077. });
  1078. this.$preview.each(function () {
  1079. var $this = $(this);
  1080. var data = $this.data(DATA_PREVIEW);
  1081. var originalWidth = data.width;
  1082. var originalHeight = data.height;
  1083. var newWidth = originalWidth;
  1084. var newHeight = originalHeight;
  1085. var ratio = 1;
  1086. if (cropBoxWidth) {
  1087. ratio = originalWidth / cropBoxWidth;
  1088. newHeight = cropBoxHeight * ratio;
  1089. }
  1090. if (cropBoxHeight && newHeight > originalHeight) {
  1091. ratio = originalHeight / cropBoxHeight;
  1092. newWidth = cropBoxWidth * ratio;
  1093. newHeight = originalHeight;
  1094. }
  1095. $this.css({
  1096. width: newWidth,
  1097. height: newHeight
  1098. }).find('img').css({
  1099. width: width * ratio,
  1100. height: height * ratio,
  1101. marginLeft: -left * ratio,
  1102. marginTop: -top * ratio,
  1103. transform: getTransform(image)
  1104. });
  1105. });
  1106. },
  1107. bind: function () {
  1108. var options = this.options;
  1109. var $this = this.$element;
  1110. var $cropper = this.$cropper;
  1111. if ($.isFunction(options.cropstart)) {
  1112. $this.on(EVENT_CROP_START, options.cropstart);
  1113. }
  1114. if ($.isFunction(options.cropmove)) {
  1115. $this.on(EVENT_CROP_MOVE, options.cropmove);
  1116. }
  1117. if ($.isFunction(options.cropend)) {
  1118. $this.on(EVENT_CROP_END, options.cropend);
  1119. }
  1120. if ($.isFunction(options.crop)) {
  1121. $this.on(EVENT_CROP, options.crop);
  1122. }
  1123. if ($.isFunction(options.zoom)) {
  1124. $this.on(EVENT_ZOOM, options.zoom);
  1125. }
  1126. $cropper.on(EVENT_MOUSE_DOWN, $.proxy(this.cropStart, this));
  1127. if (options.zoomable && options.zoomOnWheel) {
  1128. $cropper.on(EVENT_WHEEL, $.proxy(this.wheel, this));
  1129. }
  1130. if (options.toggleDragModeOnDblclick) {
  1131. $cropper.on(EVENT_DBLCLICK, $.proxy(this.dblclick, this));
  1132. }
  1133. $document.
  1134. on(EVENT_MOUSE_MOVE, (this._cropMove = proxy(this.cropMove, this))).
  1135. on(EVENT_MOUSE_UP, (this._cropEnd = proxy(this.cropEnd, this)));
  1136. if (options.responsive) {
  1137. $window.on(EVENT_RESIZE, (this._resize = proxy(this.resize, this)));
  1138. }
  1139. },
  1140. unbind: function () {
  1141. var options = this.options;
  1142. var $this = this.$element;
  1143. var $cropper = this.$cropper;
  1144. if ($.isFunction(options.cropstart)) {
  1145. $this.off(EVENT_CROP_START, options.cropstart);
  1146. }
  1147. if ($.isFunction(options.cropmove)) {
  1148. $this.off(EVENT_CROP_MOVE, options.cropmove);
  1149. }
  1150. if ($.isFunction(options.cropend)) {
  1151. $this.off(EVENT_CROP_END, options.cropend);
  1152. }
  1153. if ($.isFunction(options.crop)) {
  1154. $this.off(EVENT_CROP, options.crop);
  1155. }
  1156. if ($.isFunction(options.zoom)) {
  1157. $this.off(EVENT_ZOOM, options.zoom);
  1158. }
  1159. $cropper.off(EVENT_MOUSE_DOWN, this.cropStart);
  1160. if (options.zoomable && options.zoomOnWheel) {
  1161. $cropper.off(EVENT_WHEEL, this.wheel);
  1162. }
  1163. if (options.toggleDragModeOnDblclick) {
  1164. $cropper.off(EVENT_DBLCLICK, this.dblclick);
  1165. }
  1166. $document.
  1167. off(EVENT_MOUSE_MOVE, this._cropMove).
  1168. off(EVENT_MOUSE_UP, this._cropEnd);
  1169. if (options.responsive) {
  1170. $window.off(EVENT_RESIZE, this._resize);
  1171. }
  1172. },
  1173. resize: function () {
  1174. var restore = this.options.restore;
  1175. var $container = this.$container;
  1176. var container = this.container;
  1177. var canvasData;
  1178. var cropBoxData;
  1179. var ratio;
  1180. // Check `container` is necessary for IE8
  1181. if (this.isDisabled || !container) {
  1182. return;
  1183. }
  1184. ratio = $container.width() / container.width;
  1185. // Resize when width changed or height changed
  1186. if (ratio !== 1 || $container.height() !== container.height) {
  1187. if (restore) {
  1188. canvasData = this.getCanvasData();
  1189. cropBoxData = this.getCropBoxData();
  1190. }
  1191. this.render();
  1192. if (restore) {
  1193. this.setCanvasData($.each(canvasData, function (i, n) {
  1194. canvasData[i] = n * ratio;
  1195. }));
  1196. this.setCropBoxData($.each(cropBoxData, function (i, n) {
  1197. cropBoxData[i] = n * ratio;
  1198. }));
  1199. }
  1200. }
  1201. },
  1202. dblclick: function () {
  1203. if (this.isDisabled) {
  1204. return;
  1205. }
  1206. if (this.$dragBox.hasClass(CLASS_CROP)) {
  1207. this.setDragMode(ACTION_MOVE);
  1208. } else {
  1209. this.setDragMode(ACTION_CROP);
  1210. }
  1211. },
  1212. wheel: function (event) {
  1213. var e = event.originalEvent || event;
  1214. var ratio = num(this.options.wheelZoomRatio) || 0.1;
  1215. var delta = 1;
  1216. if (this.isDisabled) {
  1217. return;
  1218. }
  1219. event.preventDefault();
  1220. // Limit wheel speed to prevent zoom too fast
  1221. if (this.wheeling) {
  1222. return;
  1223. }
  1224. this.wheeling = true;
  1225. setTimeout($.proxy(function () {
  1226. this.wheeling = false;
  1227. }, this), 50);
  1228. if (e.deltaY) {
  1229. delta = e.deltaY > 0 ? 1 : -1;
  1230. } else if (e.wheelDelta) {
  1231. delta = -e.wheelDelta / 120;
  1232. } else if (e.detail) {
  1233. delta = e.detail > 0 ? 1 : -1;
  1234. }
  1235. this.zoom(-delta * ratio, event);
  1236. },
  1237. cropStart: function (event) {
  1238. var options = this.options;
  1239. var originalEvent = event.originalEvent;
  1240. var touches = originalEvent && originalEvent.touches;
  1241. var e = event;
  1242. var touchesLength;
  1243. var action;
  1244. if (this.isDisabled) {
  1245. return;
  1246. }
  1247. if (touches) {
  1248. touchesLength = touches.length;
  1249. if (touchesLength > 1) {
  1250. if (options.zoomable && options.zoomOnTouch && touchesLength === 2) {
  1251. e = touches[1];
  1252. this.startX2 = e.pageX;
  1253. this.startY2 = e.pageY;
  1254. action = ACTION_ZOOM;
  1255. } else {
  1256. return;
  1257. }
  1258. }
  1259. e = touches[0];
  1260. }
  1261. action = action || $(e.target).data(DATA_ACTION);
  1262. if (REGEXP_ACTIONS.test(action)) {
  1263. if (this.trigger(EVENT_CROP_START, {
  1264. originalEvent: originalEvent,
  1265. action: action
  1266. }).isDefaultPrevented()) {
  1267. return;
  1268. }
  1269. event.preventDefault();
  1270. this.action = action;
  1271. this.cropping = false;
  1272. // IE8 has `event.pageX/Y`, but not `event.originalEvent.pageX/Y`
  1273. // IE10 has `event.originalEvent.pageX/Y`, but not `event.pageX/Y`
  1274. this.startX = e.pageX || originalEvent && originalEvent.pageX;
  1275. this.startY = e.pageY || originalEvent && originalEvent.pageY;
  1276. if (action === ACTION_CROP) {
  1277. this.cropping = true;
  1278. this.$dragBox.addClass(CLASS_MODAL);
  1279. }
  1280. }
  1281. },
  1282. cropMove: function (event) {
  1283. var options = this.options;
  1284. var originalEvent = event.originalEvent;
  1285. var touches = originalEvent && originalEvent.touches;
  1286. var e = event;
  1287. var action = this.action;
  1288. var touchesLength;
  1289. if (this.isDisabled) {
  1290. return;
  1291. }
  1292. if (touches) {
  1293. touchesLength = touches.length;
  1294. if (touchesLength > 1) {
  1295. if (options.zoomable && options.zoomOnTouch && touchesLength === 2) {
  1296. e = touches[1];
  1297. this.endX2 = e.pageX;
  1298. this.endY2 = e.pageY;
  1299. } else {
  1300. return;
  1301. }
  1302. }
  1303. e = touches[0];
  1304. }
  1305. if (action) {
  1306. if (this.trigger(EVENT_CROP_MOVE, {
  1307. originalEvent: originalEvent,
  1308. action: action
  1309. }).isDefaultPrevented()) {
  1310. return;
  1311. }
  1312. event.preventDefault();
  1313. this.endX = e.pageX || originalEvent && originalEvent.pageX;
  1314. this.endY = e.pageY || originalEvent && originalEvent.pageY;
  1315. this.change(e.shiftKey, action === ACTION_ZOOM ? event : null);
  1316. }
  1317. },
  1318. cropEnd: function (event) {
  1319. var originalEvent = event.originalEvent;
  1320. var action = this.action;
  1321. if (this.isDisabled) {
  1322. return;
  1323. }
  1324. if (action) {
  1325. event.preventDefault();
  1326. if (this.cropping) {
  1327. this.cropping = false;
  1328. this.$dragBox.toggleClass(CLASS_MODAL, this.isCropped && this.options.modal);
  1329. }
  1330. this.action = '';
  1331. this.trigger(EVENT_CROP_END, {
  1332. originalEvent: originalEvent,
  1333. action: action
  1334. });
  1335. }
  1336. },
  1337. change: function (shiftKey, event) {
  1338. var options = this.options;
  1339. var aspectRatio = options.aspectRatio;
  1340. var action = this.action;
  1341. var container = this.container;
  1342. var canvas = this.canvas;
  1343. var cropBox = this.cropBox;
  1344. var width = cropBox.width;
  1345. var height = cropBox.height;
  1346. var left = cropBox.left;
  1347. var top = cropBox.top;
  1348. var right = left + width;
  1349. var bottom = top + height;
  1350. var minLeft = 0;
  1351. var minTop = 0;
  1352. var maxWidth = container.width;
  1353. var maxHeight = container.height;
  1354. var renderable = true;
  1355. var offset;
  1356. var range;
  1357. // Locking aspect ratio in "free mode" by holding shift key (#259)
  1358. if (!aspectRatio && shiftKey) {
  1359. aspectRatio = width && height ? width / height : 1;
  1360. }
  1361. if (this.limited) {
  1362. minLeft = cropBox.minLeft;
  1363. minTop = cropBox.minTop;
  1364. maxWidth = minLeft + min(container.width, canvas.left + canvas.width);
  1365. maxHeight = minTop + min(container.height, canvas.top + canvas.height);
  1366. }
  1367. range = {
  1368. x: this.endX - this.startX,
  1369. y: this.endY - this.startY
  1370. };
  1371. if (aspectRatio) {
  1372. range.X = range.y * aspectRatio;
  1373. range.Y = range.x / aspectRatio;
  1374. }
  1375. switch (action) {
  1376. // Move crop box
  1377. case ACTION_ALL:
  1378. left += range.x;
  1379. top += range.y;
  1380. break;
  1381. // Resize crop box
  1382. case ACTION_EAST:
  1383. if (range.x >= 0 && (right >= maxWidth || aspectRatio &&
  1384. (top <= minTop || bottom >= maxHeight))) {
  1385. renderable = false;
  1386. break;
  1387. }
  1388. width += range.x;
  1389. if (aspectRatio) {
  1390. height = width / aspectRatio;
  1391. top -= range.Y / 2;
  1392. }
  1393. if (width < 0) {
  1394. action = ACTION_WEST;
  1395. width = 0;
  1396. }
  1397. break;
  1398. case ACTION_NORTH:
  1399. if (range.y <= 0 && (top <= minTop || aspectRatio &&
  1400. (left <= minLeft || right >= maxWidth))) {
  1401. renderable = false;
  1402. break;
  1403. }
  1404. height -= range.y;
  1405. top += range.y;
  1406. if (aspectRatio) {
  1407. width = height * aspectRatio;
  1408. left += range.X / 2;
  1409. }
  1410. if (height < 0) {
  1411. action = ACTION_SOUTH;
  1412. height = 0;
  1413. }
  1414. break;
  1415. case ACTION_WEST:
  1416. if (range.x <= 0 && (left <= minLeft || aspectRatio &&
  1417. (top <= minTop || bottom >= maxHeight))) {
  1418. renderable = false;
  1419. break;
  1420. }
  1421. width -= range.x;
  1422. left += range.x;
  1423. if (aspectRatio) {
  1424. height = width / aspectRatio;
  1425. top += range.Y / 2;
  1426. }
  1427. if (width < 0) {
  1428. action = ACTION_EAST;
  1429. width = 0;
  1430. }
  1431. break;
  1432. case ACTION_SOUTH:
  1433. if (range.y >= 0 && (bottom >= maxHeight || aspectRatio &&
  1434. (left <= minLeft || right >= maxWidth))) {
  1435. renderable = false;
  1436. break;
  1437. }
  1438. height += range.y;
  1439. if (aspectRatio) {
  1440. width = height * aspectRatio;
  1441. left -= range.X / 2;
  1442. }
  1443. if (height < 0) {
  1444. action = ACTION_NORTH;
  1445. height = 0;
  1446. }
  1447. break;
  1448. case ACTION_NORTH_EAST:
  1449. if (aspectRatio) {
  1450. if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {
  1451. renderable = false;
  1452. break;
  1453. }
  1454. height -= range.y;
  1455. top += range.y;
  1456. width = height * aspectRatio;
  1457. } else {
  1458. if (range.x >= 0) {
  1459. if (right < maxWidth) {
  1460. width += range.x;
  1461. } else if (range.y <= 0 && top <= minTop) {
  1462. renderable = false;
  1463. }
  1464. } else {
  1465. width += range.x;
  1466. }
  1467. if (range.y <= 0) {
  1468. if (top > minTop) {
  1469. height -= range.y;
  1470. top += range.y;
  1471. }
  1472. } else {
  1473. height -= range.y;
  1474. top += range.y;
  1475. }
  1476. }
  1477. if (width < 0 && height < 0) {
  1478. action = ACTION_SOUTH_WEST;
  1479. height = 0;
  1480. width = 0;
  1481. } else if (width < 0) {
  1482. action = ACTION_NORTH_WEST;
  1483. width = 0;
  1484. } else if (height < 0) {
  1485. action = ACTION_SOUTH_EAST;
  1486. height = 0;
  1487. }
  1488. break;
  1489. case ACTION_NORTH_WEST:
  1490. if (aspectRatio) {
  1491. if (range.y <= 0 && (top <= minTop || left <= minLeft)) {
  1492. renderable = false;
  1493. break;
  1494. }
  1495. height -= range.y;
  1496. top += range.y;
  1497. width = height * aspectRatio;
  1498. left += range.X;
  1499. } else {
  1500. if (range.x <= 0) {
  1501. if (left > minLeft) {
  1502. width -= range.x;
  1503. left += range.x;
  1504. } else if (range.y <= 0 && top <= minTop) {
  1505. renderable = false;
  1506. }
  1507. } else {
  1508. width -= range.x;
  1509. left += range.x;
  1510. }
  1511. if (range.y <= 0) {
  1512. if (top > minTop) {
  1513. height -= range.y;
  1514. top += range.y;
  1515. }
  1516. } else {
  1517. height -= range.y;
  1518. top += range.y;
  1519. }
  1520. }
  1521. if (width < 0 && height < 0) {
  1522. action = ACTION_SOUTH_EAST;
  1523. height = 0;
  1524. width = 0;
  1525. } else if (width < 0) {
  1526. action = ACTION_NORTH_EAST;
  1527. width = 0;
  1528. } else if (height < 0) {
  1529. action = ACTION_SOUTH_WEST;
  1530. height = 0;
  1531. }
  1532. break;
  1533. case ACTION_SOUTH_WEST:
  1534. if (aspectRatio) {
  1535. if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {
  1536. renderable = false;
  1537. break;
  1538. }
  1539. width -= range.x;
  1540. left += range.x;
  1541. height = width / aspectRatio;
  1542. } else {
  1543. if (range.x <= 0) {
  1544. if (left > minLeft) {
  1545. width -= range.x;
  1546. left += range.x;
  1547. } else if (range.y >= 0 && bottom >= maxHeight) {
  1548. renderable = false;
  1549. }
  1550. } else {
  1551. width -= range.x;
  1552. left += range.x;
  1553. }
  1554. if (range.y >= 0) {
  1555. if (bottom < maxHeight) {
  1556. height += range.y;
  1557. }
  1558. } else {
  1559. height += range.y;
  1560. }
  1561. }
  1562. if (width < 0 && height < 0) {
  1563. action = ACTION_NORTH_EAST;
  1564. height = 0;
  1565. width = 0;
  1566. } else if (width < 0) {
  1567. action = ACTION_SOUTH_EAST;
  1568. width = 0;
  1569. } else if (height < 0) {
  1570. action = ACTION_NORTH_WEST;
  1571. height = 0;
  1572. }
  1573. break;
  1574. case ACTION_SOUTH_EAST:
  1575. if (aspectRatio) {
  1576. if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {
  1577. renderable = false;
  1578. break;
  1579. }
  1580. width += range.x;
  1581. height = width / aspectRatio;
  1582. } else {
  1583. if (range.x >= 0) {
  1584. if (right < maxWidth) {
  1585. width += range.x;
  1586. } else if (range.y >= 0 && bottom >= maxHeight) {
  1587. renderable = false;
  1588. }
  1589. } else {
  1590. width += range.x;
  1591. }
  1592. if (range.y >= 0) {
  1593. if (bottom < maxHeight) {
  1594. height += range.y;
  1595. }
  1596. } else {
  1597. height += range.y;
  1598. }
  1599. }
  1600. if (width < 0 && height < 0) {
  1601. action = ACTION_NORTH_WEST;
  1602. height = 0;
  1603. width = 0;
  1604. } else if (width < 0) {
  1605. action = ACTION_SOUTH_WEST;
  1606. width = 0;
  1607. } else if (height < 0) {
  1608. action = ACTION_NORTH_EAST;
  1609. height = 0;
  1610. }
  1611. break;
  1612. // Move canvas
  1613. case ACTION_MOVE:
  1614. this.move(range.x, range.y);
  1615. renderable = false;
  1616. break;
  1617. // Zoom canvas
  1618. case ACTION_ZOOM:
  1619. this.zoom((function (x1, y1, x2, y2) {
  1620. var z1 = sqrt(x1 * x1 + y1 * y1);
  1621. var z2 = sqrt(x2 * x2 + y2 * y2);
  1622. return (z2 - z1) / z1;
  1623. })(
  1624. abs(this.startX - this.startX2),
  1625. abs(this.startY - this.startY2),
  1626. abs(this.endX - this.endX2),
  1627. abs(this.endY - this.endY2)
  1628. ), event);
  1629. this.startX2 = this.endX2;
  1630. this.startY2 = this.endY2;
  1631. renderable = false;
  1632. break;
  1633. // Create crop box
  1634. case ACTION_CROP:
  1635. if (!range.x || !range.y) {
  1636. renderable = false;
  1637. break;
  1638. }
  1639. offset = this.$cropper.offset();
  1640. left = this.startX - offset.left;
  1641. top = this.startY - offset.top;
  1642. width = cropBox.minWidth;
  1643. height = cropBox.minHeight;
  1644. if (range.x > 0) {
  1645. action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;
  1646. } else if (range.x < 0) {
  1647. left -= width;
  1648. action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;
  1649. }
  1650. if (range.y < 0) {
  1651. top -= height;
  1652. }
  1653. // Show the crop box if is hidden
  1654. if (!this.isCropped) {
  1655. this.$cropBox.removeClass(CLASS_HIDDEN);
  1656. this.isCropped = true;
  1657. if (this.limited) {
  1658. this.limitCropBox(true, true);
  1659. }
  1660. }
  1661. break;
  1662. // No default
  1663. }
  1664. if (renderable) {
  1665. cropBox.width = width;
  1666. cropBox.height = height;
  1667. cropBox.left = left;
  1668. cropBox.top = top;
  1669. this.action = action;
  1670. this.renderCropBox();
  1671. }
  1672. // Override
  1673. this.startX = this.endX;
  1674. this.startY = this.endY;
  1675. },
  1676. // Show the crop box manually
  1677. crop: function () {
  1678. if (!this.isBuilt || this.isDisabled) {
  1679. return;
  1680. }
  1681. if (!this.isCropped) {
  1682. this.isCropped = true;
  1683. this.limitCropBox(true, true);
  1684. if (this.options.modal) {
  1685. this.$dragBox.addClass(CLASS_MODAL);
  1686. }
  1687. this.$cropBox.removeClass(CLASS_HIDDEN);
  1688. }
  1689. this.setCropBoxData(this.initialCropBox);
  1690. },
  1691. // Reset the image and crop box to their initial states
  1692. reset: function () {
  1693. if (!this.isBuilt || this.isDisabled) {
  1694. return;
  1695. }
  1696. this.image = $.extend({}, this.initialImage);
  1697. this.canvas = $.extend({}, this.initialCanvas);
  1698. this.cropBox = $.extend({}, this.initialCropBox);
  1699. this.renderCanvas();
  1700. if (this.isCropped) {
  1701. this.renderCropBox();
  1702. }
  1703. },
  1704. // Clear the crop box
  1705. clear: function () {
  1706. if (!this.isCropped || this.isDisabled) {
  1707. return;
  1708. }
  1709. $.extend(this.cropBox, {
  1710. left: 0,
  1711. top: 0,
  1712. width: 0,
  1713. height: 0
  1714. });
  1715. this.isCropped = false;
  1716. this.renderCropBox();
  1717. this.limitCanvas(true, true);
  1718. // Render canvas after crop box rendered
  1719. this.renderCanvas();
  1720. this.$dragBox.removeClass(CLASS_MODAL);
  1721. this.$cropBox.addClass(CLASS_HIDDEN);
  1722. },
  1723. /**
  1724. * Replace the image's src and rebuild the cropper
  1725. *
  1726. * @param {String} url
  1727. * @param {Boolean} onlyColorChanged (optional)
  1728. */
  1729. replace: function (url, onlyColorChanged) {
  1730. if (!this.isDisabled && url) {
  1731. if (this.isImg) {
  1732. this.$element.attr('src', url);
  1733. }
  1734. if (onlyColorChanged) {
  1735. this.url = url;
  1736. this.$clone.attr('src', url);
  1737. if (this.isBuilt) {
  1738. this.$preview.find('img').add(this.$clone2).attr('src', url);
  1739. }
  1740. } else {
  1741. if (this.isImg) {
  1742. this.isReplaced = true;
  1743. }
  1744. // Clear previous data
  1745. this.options.data = null;
  1746. this.load(url);
  1747. }
  1748. }
  1749. },
  1750. // Enable (unfreeze) the cropper
  1751. enable: function () {
  1752. if (this.isBuilt) {
  1753. this.isDisabled = false;
  1754. this.$cropper.removeClass(CLASS_DISABLED);
  1755. }
  1756. },
  1757. // Disable (freeze) the cropper
  1758. disable: function () {
  1759. if (this.isBuilt) {
  1760. this.isDisabled = true;
  1761. this.$cropper.addClass(CLASS_DISABLED);
  1762. }
  1763. },
  1764. // Destroy the cropper and remove the instance from the image
  1765. destroy: function () {
  1766. var $this = this.$element;
  1767. if (this.isLoaded) {
  1768. if (this.isImg && this.isReplaced) {
  1769. $this.attr('src', this.originalUrl);
  1770. }
  1771. this.unbuild();
  1772. $this.removeClass(CLASS_HIDDEN);
  1773. } else {
  1774. if (this.isImg) {
  1775. $this.off(EVENT_LOAD, this.start);
  1776. } else if (this.$clone) {
  1777. this.$clone.remove();
  1778. }
  1779. }
  1780. $this.removeData(NAMESPACE);
  1781. },
  1782. /**
  1783. * Move the canvas with relative offsets
  1784. *
  1785. * @param {Number} offsetX
  1786. * @param {Number} offsetY (optional)
  1787. */
  1788. move: function (offsetX, offsetY) {
  1789. var canvas = this.canvas;
  1790. this.moveTo(
  1791. isUndefined(offsetX) ? offsetX : canvas.left + num(offsetX),
  1792. isUndefined(offsetY) ? offsetY : canvas.top + num(offsetY)
  1793. );
  1794. },
  1795. /**
  1796. * Move the canvas to an absolute point
  1797. *
  1798. * @param {Number} x
  1799. * @param {Number} y (optional)
  1800. */
  1801. moveTo: function (x, y) {
  1802. var canvas = this.canvas;
  1803. var isChanged = false;
  1804. // If "y" is not present, its default value is "x"
  1805. if (isUndefined(y)) {
  1806. y = x;
  1807. }
  1808. x = num(x);
  1809. y = num(y);
  1810. if (this.isBuilt && !this.isDisabled && this.options.movable) {
  1811. if (isNumber(x)) {
  1812. canvas.left = x;
  1813. isChanged = true;
  1814. }
  1815. if (isNumber(y)) {
  1816. canvas.top = y;
  1817. isChanged = true;
  1818. }
  1819. if (isChanged) {
  1820. this.renderCanvas(true);
  1821. }
  1822. }
  1823. },
  1824. /**
  1825. * Zoom the canvas with a relative ratio
  1826. *
  1827. * @param {Number} ratio
  1828. * @param {jQuery Event} _event (private)
  1829. */
  1830. zoom: function (ratio, _event) {
  1831. var canvas = this.canvas;
  1832. ratio = num(ratio);
  1833. if (ratio < 0) {
  1834. ratio = 1 / (1 - ratio);
  1835. } else {
  1836. ratio = 1 + ratio;
  1837. }
  1838. this.zoomTo(canvas.width * ratio / canvas.naturalWidth, _event);
  1839. },
  1840. /**
  1841. * Zoom the canvas to an absolute ratio
  1842. *
  1843. * @param {Number} ratio
  1844. * @param {jQuery Event} _event (private)
  1845. */
  1846. zoomTo: function (ratio, _event) {
  1847. var options = this.options;
  1848. var canvas = this.canvas;
  1849. var width = canvas.width;
  1850. var height = canvas.height;
  1851. var naturalWidth = canvas.naturalWidth;
  1852. var naturalHeight = canvas.naturalHeight;
  1853. var originalEvent;
  1854. var newWidth;
  1855. var newHeight;
  1856. var offset;
  1857. var center;
  1858. ratio = num(ratio);
  1859. if (ratio >= 0 && this.isBuilt && !this.isDisabled && options.zoomable) {
  1860. newWidth = naturalWidth * ratio;
  1861. newHeight = naturalHeight * ratio;
  1862. if (_event) {
  1863. originalEvent = _event.originalEvent;
  1864. }
  1865. if (this.trigger(EVENT_ZOOM, {
  1866. originalEvent: originalEvent,
  1867. oldRatio: width / naturalWidth,
  1868. ratio: newWidth / naturalWidth
  1869. }).isDefaultPrevented()) {
  1870. return;
  1871. }
  1872. if (originalEvent) {
  1873. offset = this.$cropper.offset();
  1874. center = originalEvent.touches ? getTouchesCenter(originalEvent.touches) : {
  1875. pageX: _event.pageX || originalEvent.pageX || 0,
  1876. pageY: _event.pageY || originalEvent.pageY || 0
  1877. };
  1878. // Zoom from the triggering point of the event
  1879. canvas.left -= (newWidth - width) * (
  1880. ((center.pageX - offset.left) - canvas.left) / width
  1881. );
  1882. canvas.top -= (newHeight - height) * (
  1883. ((center.pageY - offset.top) - canvas.top) / height
  1884. );
  1885. } else {
  1886. // Zoom from the center of the canvas
  1887. canvas.left -= (newWidth - width) / 2;
  1888. canvas.top -= (newHeight - height) / 2;
  1889. }
  1890. canvas.width = newWidth;
  1891. canvas.height = newHeight;
  1892. this.renderCanvas(true);
  1893. }
  1894. },
  1895. /**
  1896. * Rotate the canvas with a relative degree
  1897. *
  1898. * @param {Number} degree
  1899. */
  1900. rotate: function (degree) {
  1901. this.rotateTo((this.image.rotate || 0) + num(degree));
  1902. },
  1903. /**
  1904. * Rotate the canvas to an absolute degree
  1905. * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
  1906. *
  1907. * @param {Number} degree
  1908. */
  1909. rotateTo: function (degree) {
  1910. degree = num(degree);
  1911. if (isNumber(degree) && this.isBuilt && !this.isDisabled && this.options.rotatable) {
  1912. this.image.rotate = degree % 360;
  1913. this.isRotated = true;
  1914. this.renderCanvas(true);
  1915. }
  1916. },
  1917. /**
  1918. * Scale the image
  1919. * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()
  1920. *
  1921. * @param {Number} scaleX
  1922. * @param {Number} scaleY (optional)
  1923. */
  1924. scale: function (scaleX, scaleY) {
  1925. var image = this.image;
  1926. var isChanged = false;
  1927. // If "scaleY" is not present, its default value is "scaleX"
  1928. if (isUndefined(scaleY)) {
  1929. scaleY = scaleX;
  1930. }
  1931. scaleX = num(scaleX);
  1932. scaleY = num(scaleY);
  1933. if (this.isBuilt && !this.isDisabled && this.options.scalable) {
  1934. if (isNumber(scaleX)) {
  1935. image.scaleX = scaleX;
  1936. isChanged = true;
  1937. }
  1938. if (isNumber(scaleY)) {
  1939. image.scaleY = scaleY;
  1940. isChanged = true;
  1941. }
  1942. if (isChanged) {
  1943. this.renderImage(true);
  1944. }
  1945. }
  1946. },
  1947. /**
  1948. * Scale the abscissa of the image
  1949. *
  1950. * @param {Number} scaleX
  1951. */
  1952. scaleX: function (scaleX) {
  1953. var scaleY = this.image.scaleY;
  1954. this.scale(scaleX, isNumber(scaleY) ? scaleY : 1);
  1955. },
  1956. /**
  1957. * Scale the ordinate of the image
  1958. *
  1959. * @param {Number} scaleY
  1960. */
  1961. scaleY: function (scaleY) {
  1962. var scaleX = this.image.scaleX;
  1963. this.scale(isNumber(scaleX) ? scaleX : 1, scaleY);
  1964. },
  1965. /**
  1966. * Get the cropped area position and size data (base on the original image)
  1967. *
  1968. * @param {Boolean} isRounded (optional)
  1969. * @return {Object} data
  1970. */
  1971. getData: function (isRounded) {
  1972. var options = this.options;
  1973. var image = this.image;
  1974. var canvas = this.canvas;
  1975. var cropBox = this.cropBox;
  1976. var ratio;
  1977. var data;
  1978. if (this.isBuilt && this.isCropped) {
  1979. data = {
  1980. x: cropBox.left - canvas.left,
  1981. y: cropBox.top - canvas.top,
  1982. width: cropBox.width,
  1983. height: cropBox.height
  1984. };
  1985. ratio = image.width / image.naturalWidth;
  1986. $.each(data, function (i, n) {
  1987. n = n / ratio;
  1988. data[i] = isRounded ? round(n) : n;
  1989. });
  1990. } else {
  1991. data = {
  1992. x: 0,
  1993. y: 0,
  1994. width: 0,
  1995. height: 0
  1996. };
  1997. }
  1998. if (options.rotatable) {
  1999. data.rotate = image.rotate || 0;
  2000. }
  2001. if (options.scalable) {
  2002. data.scaleX = image.scaleX || 1;
  2003. data.scaleY = image.scaleY || 1;
  2004. }
  2005. return data;
  2006. },
  2007. /**
  2008. * Set the cropped area position and size with new data
  2009. *
  2010. * @param {Object} data
  2011. */
  2012. setData: function (data) {
  2013. var options = this.options;
  2014. var image = this.image;
  2015. var canvas = this.canvas;
  2016. var cropBoxData = {};
  2017. var isRotated;
  2018. var isScaled;
  2019. var ratio;
  2020. if ($.isFunction(data)) {
  2021. data = data.call(this.element);
  2022. }
  2023. if (this.isBuilt && !this.isDisabled && $.isPlainObject(data)) {
  2024. if (options.rotatable) {
  2025. if (isNumber(data.rotate) && data.rotate !== image.rotate) {
  2026. image.rotate = data.rotate;
  2027. this.isRotated = isRotated = true;
  2028. }
  2029. }
  2030. if (options.scalable) {
  2031. if (isNumber(data.scaleX) && data.scaleX !== image.scaleX) {
  2032. image.scaleX = data.scaleX;
  2033. isScaled = true;
  2034. }
  2035. if (isNumber(data.scaleY) && data.scaleY !== image.scaleY) {
  2036. image.scaleY = data.scaleY;
  2037. isScaled = true;
  2038. }
  2039. }
  2040. if (isRotated) {
  2041. this.renderCanvas();
  2042. } else if (isScaled) {
  2043. this.renderImage();
  2044. }
  2045. ratio = image.width / image.naturalWidth;
  2046. if (isNumber(data.x)) {
  2047. cropBoxData.left = data.x * ratio + canvas.left;
  2048. }
  2049. if (isNumber(data.y)) {
  2050. cropBoxData.top = data.y * ratio + canvas.top;
  2051. }
  2052. if (isNumber(data.width)) {
  2053. cropBoxData.width = data.width * ratio;
  2054. }
  2055. if (isNumber(data.height)) {
  2056. cropBoxData.height = data.height * ratio;
  2057. }
  2058. this.setCropBoxData(cropBoxData);
  2059. }
  2060. },
  2061. /**
  2062. * Get the container size data
  2063. *
  2064. * @return {Object} data
  2065. */
  2066. getContainerData: function () {
  2067. return this.isBuilt ? this.container : {};
  2068. },
  2069. /**
  2070. * Get the image position and size data
  2071. *
  2072. * @return {Object} data
  2073. */
  2074. getImageData: function () {
  2075. return this.isLoaded ? this.image : {};
  2076. },
  2077. /**
  2078. * Get the canvas position and size data
  2079. *
  2080. * @return {Object} data
  2081. */
  2082. getCanvasData: function () {
  2083. var canvas = this.canvas;
  2084. var data = {};
  2085. if (this.isBuilt) {
  2086. $.each([
  2087. 'left',
  2088. 'top',
  2089. 'width',
  2090. 'height',
  2091. 'naturalWidth',
  2092. 'naturalHeight'
  2093. ], function (i, n) {
  2094. data[n] = canvas[n];
  2095. });
  2096. }
  2097. return data;
  2098. },
  2099. /**
  2100. * Set the canvas position and size with new data
  2101. *
  2102. * @param {Object} data
  2103. */
  2104. setCanvasData: function (data) {
  2105. var canvas = this.canvas;
  2106. var aspectRatio = canvas.aspectRatio;
  2107. if ($.isFunction(data)) {
  2108. data = data.call(this.$element);
  2109. }
  2110. if (this.isBuilt && !this.isDisabled && $.isPlainObject(data)) {
  2111. if (isNumber(data.left)) {
  2112. canvas.left = data.left;
  2113. }
  2114. if (isNumber(data.top)) {
  2115. canvas.top = data.top;
  2116. }
  2117. if (isNumber(data.width)) {
  2118. canvas.width = data.width;
  2119. canvas.height = data.width / aspectRatio;
  2120. } else if (isNumber(data.height)) {
  2121. canvas.height = data.height;
  2122. canvas.width = data.height * aspectRatio;
  2123. }
  2124. this.renderCanvas(true);
  2125. }
  2126. },
  2127. /**
  2128. * Get the crop box position and size data
  2129. *
  2130. * @return {Object} data
  2131. */
  2132. getCropBoxData: function () {
  2133. var cropBox = this.cropBox;
  2134. var data;
  2135. if (this.isBuilt && this.isCropped) {
  2136. data = {
  2137. left: cropBox.left,
  2138. top: cropBox.top,
  2139. width: cropBox.width,
  2140. height: cropBox.height
  2141. };
  2142. }
  2143. return data || {};
  2144. },
  2145. /**
  2146. * Set the crop box position and size with new data
  2147. *
  2148. * @param {Object} data
  2149. */
  2150. setCropBoxData: function (data) {
  2151. var cropBox = this.cropBox;
  2152. var aspectRatio = this.options.aspectRatio;
  2153. var isWidthChanged;
  2154. var isHeightChanged;
  2155. if ($.isFunction(data)) {
  2156. data = data.call(this.$element);
  2157. }
  2158. if (this.isBuilt && this.isCropped && !this.isDisabled && $.isPlainObject(data)) {
  2159. if (isNumber(data.left)) {
  2160. cropBox.left = data.left;
  2161. }
  2162. if (isNumber(data.top)) {
  2163. cropBox.top = data.top;
  2164. }
  2165. if (isNumber(data.width)) {
  2166. isWidthChanged = true;
  2167. cropBox.width = data.width;
  2168. }
  2169. if (isNumber(data.height)) {
  2170. isHeightChanged = true;
  2171. cropBox.height = data.height;
  2172. }
  2173. if (aspectRatio) {
  2174. if (isWidthChanged) {
  2175. cropBox.height = cropBox.width / aspectRatio;
  2176. } else if (isHeightChanged) {
  2177. cropBox.width = cropBox.height * aspectRatio;
  2178. }
  2179. }
  2180. this.renderCropBox();
  2181. }
  2182. },
  2183. /**
  2184. * Get a canvas drawn the cropped image
  2185. *
  2186. * @param {Object} options (optional)
  2187. * @return {HTMLCanvasElement} canvas
  2188. */
  2189. getCroppedCanvas: function (options) {
  2190. var originalWidth;
  2191. var originalHeight;
  2192. var canvasWidth;
  2193. var canvasHeight;
  2194. var scaledWidth;
  2195. var scaledHeight;
  2196. var scaledRatio;
  2197. var aspectRatio;
  2198. var canvas;
  2199. var context;
  2200. var data;
  2201. if (!this.isBuilt || !SUPPORT_CANVAS) {
  2202. return;
  2203. }
  2204. if (!this.isCropped) {
  2205. return getSourceCanvas(this.$clone[0], this.image);
  2206. }
  2207. if (!$.isPlainObject(options)) {
  2208. options = {};
  2209. }
  2210. data = this.getData();
  2211. originalWidth = data.width;
  2212. originalHeight = data.height;
  2213. aspectRatio = originalWidth / originalHeight;
  2214. if ($.isPlainObject(options)) {
  2215. scaledWidth = options.width;
  2216. scaledHeight = options.height;
  2217. if (scaledWidth) {
  2218. scaledHeight = scaledWidth / aspectRatio;
  2219. scaledRatio = scaledWidth / originalWidth;
  2220. } else if (scaledHeight) {
  2221. scaledWidth = scaledHeight * aspectRatio;
  2222. scaledRatio = scaledHeight / originalHeight;
  2223. }
  2224. }
  2225. // The canvas element will use `Math.floor` on a float number, so floor first
  2226. canvasWidth = floor(scaledWidth || originalWidth);
  2227. canvasHeight = floor(scaledHeight || originalHeight);
  2228. canvas = $('<canvas>')[0];
  2229. canvas.width = canvasWidth;
  2230. canvas.height = canvasHeight;
  2231. context = canvas.getContext('2d');
  2232. if (options.fillColor) {
  2233. context.fillStyle = options.fillColor;
  2234. context.fillRect(0, 0, canvasWidth, canvasHeight);
  2235. }
  2236. // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage
  2237. context.drawImage.apply(context, (function () {
  2238. var source = getSourceCanvas(this.$clone[0], this.image);
  2239. var sourceWidth = source.width;
  2240. var sourceHeight = source.height;
  2241. var canvas = this.canvas;
  2242. var params = [source];
  2243. // Source canvas
  2244. var srcX = data.x + canvas.naturalWidth * (abs(data.scaleX || 1) - 1) / 2;
  2245. var srcY = data.y + canvas.naturalHeight * (abs(data.scaleY || 1) - 1) / 2;
  2246. var srcWidth;
  2247. var srcHeight;
  2248. // Destination canvas
  2249. var dstX;
  2250. var dstY;
  2251. var dstWidth;
  2252. var dstHeight;
  2253. if (srcX <= -originalWidth || srcX > sourceWidth) {
  2254. srcX = srcWidth = dstX = dstWidth = 0;
  2255. } else if (srcX <= 0) {
  2256. dstX = -srcX;
  2257. srcX = 0;
  2258. srcWidth = dstWidth = min(sourceWidth, originalWidth + srcX);
  2259. } else if (srcX <= sourceWidth) {
  2260. dstX = 0;
  2261. srcWidth = dstWidth = min(originalWidth, sourceWidth - srcX);
  2262. }
  2263. if (srcWidth <= 0 || srcY <= -originalHeight || srcY > sourceHeight) {
  2264. srcY = srcHeight = dstY = dstHeight = 0;
  2265. } else if (srcY <= 0) {
  2266. dstY = -srcY;
  2267. srcY = 0;
  2268. srcHeight = dstHeight = min(sourceHeight, originalHeight + srcY);
  2269. } else if (srcY <= sourceHeight) {
  2270. dstY = 0;
  2271. srcHeight = dstHeight = min(originalHeight, sourceHeight - srcY);
  2272. }
  2273. // All the numerical parameters should be integer for `drawImage` (#476)
  2274. params.push(floor(srcX), floor(srcY), floor(srcWidth), floor(srcHeight));
  2275. // Scale destination sizes
  2276. if (scaledRatio) {
  2277. dstX *= scaledRatio;
  2278. dstY *= scaledRatio;
  2279. dstWidth *= scaledRatio;
  2280. dstHeight *= scaledRatio;
  2281. }
  2282. // Avoid "IndexSizeError" in IE and Firefox
  2283. if (dstWidth > 0 && dstHeight > 0) {
  2284. params.push(floor(dstX), floor(dstY), floor(dstWidth), floor(dstHeight));
  2285. }
  2286. return params;
  2287. }).call(this));
  2288. return canvas;
  2289. },
  2290. /**
  2291. * Change the aspect ratio of the crop box
  2292. *
  2293. * @param {Number} aspectRatio
  2294. */
  2295. setAspectRatio: function (aspectRatio) {
  2296. var options = this.options;
  2297. if (!this.isDisabled && !isUndefined(aspectRatio)) {
  2298. // 0 -> NaN
  2299. options.aspectRatio = max(0, aspectRatio) || NaN;
  2300. if (this.isBuilt) {
  2301. this.initCropBox();
  2302. if (this.isCropped) {
  2303. this.renderCropBox();
  2304. }
  2305. }
  2306. }
  2307. },
  2308. /**
  2309. * Change the drag mode
  2310. *
  2311. * @param {String} mode (optional)
  2312. */
  2313. setDragMode: function (mode) {
  2314. var options = this.options;
  2315. var croppable;
  2316. var movable;
  2317. if (this.isLoaded && !this.isDisabled) {
  2318. croppable = mode === ACTION_CROP;
  2319. movable = options.movable && mode === ACTION_MOVE;
  2320. mode = (croppable || movable) ? mode : ACTION_NONE;
  2321. this.$dragBox.
  2322. data(DATA_ACTION, mode).
  2323. toggleClass(CLASS_CROP, croppable).
  2324. toggleClass(CLASS_MOVE, movable);
  2325. if (!options.cropBoxMovable) {
  2326. // Sync drag mode to crop box when it is not movable(#300)
  2327. this.$face.
  2328. data(DATA_ACTION, mode).
  2329. toggleClass(CLASS_CROP, croppable).
  2330. toggleClass(CLASS_MOVE, movable);
  2331. }
  2332. }
  2333. }
  2334. };
  2335. Cropper.DEFAULTS = {
  2336. // Define the view mode of the cropper
  2337. viewMode: 0, // 0, 1, 2, 3
  2338. // Define the dragging mode of the cropper
  2339. dragMode: 'crop', // 'crop', 'move' or 'none'
  2340. // Define the aspect ratio of the crop box
  2341. aspectRatio: NaN,
  2342. // An object with the previous cropping result data
  2343. data: null,
  2344. // A jQuery selector for adding extra containers to preview
  2345. preview: '',
  2346. // Re-render the cropper when resize the window
  2347. responsive: true,
  2348. // Restore the cropped area after resize the window
  2349. restore: true,
  2350. // Check if the current image is a cross-origin image
  2351. checkCrossOrigin: true,
  2352. // Check the current image's Exif Orientation information
  2353. checkOrientation: true,
  2354. // Show the black modal
  2355. modal: true,
  2356. // Show the dashed lines for guiding
  2357. guides: true,
  2358. // Show the center indicator for guiding
  2359. center: true,
  2360. // Show the white modal to highlight the crop box
  2361. highlight: true,
  2362. // Show the grid background
  2363. background: true,
  2364. // Enable to crop the image automatically when initialize
  2365. autoCrop: true,
  2366. // Define the percentage of automatic cropping area when initializes
  2367. autoCropArea: 0.8,
  2368. // Enable to move the image
  2369. movable: true,
  2370. // Enable to rotate the image
  2371. rotatable: true,
  2372. // Enable to scale the image
  2373. scalable: true,
  2374. // Enable to zoom the image
  2375. zoomable: true,
  2376. // Enable to zoom the image by dragging touch
  2377. zoomOnTouch: true,
  2378. // Enable to zoom the image by wheeling mouse
  2379. zoomOnWheel: true,
  2380. // Define zoom ratio when zoom the image by wheeling mouse
  2381. wheelZoomRatio: 0.1,
  2382. // Enable to move the crop box
  2383. cropBoxMovable: true,
  2384. // Enable to resize the crop box
  2385. cropBoxResizable: true,
  2386. // Toggle drag mode between "crop" and "move" when click twice on the cropper
  2387. toggleDragModeOnDblclick: true,
  2388. // Size limitation
  2389. minCanvasWidth: 0,
  2390. minCanvasHeight: 0,
  2391. minCropBoxWidth: 0,
  2392. minCropBoxHeight: 0,
  2393. minContainerWidth: 200,
  2394. minContainerHeight: 100,
  2395. // Shortcuts of events
  2396. build: null,
  2397. built: null,
  2398. cropstart: null,
  2399. cropmove: null,
  2400. cropend: null,
  2401. crop: null,
  2402. zoom: null
  2403. };
  2404. Cropper.setDefaults = function (options) {
  2405. $.extend(Cropper.DEFAULTS, options);
  2406. };
  2407. Cropper.TEMPLATE = (
  2408. '<div class="cropper-container">' +
  2409. '<div class="cropper-wrap-box">' +
  2410. '<div class="cropper-canvas"></div>' +
  2411. '</div>' +
  2412. '<div class="cropper-drag-box"></div>' +
  2413. '<div class="cropper-crop-box">' +
  2414. '<span class="cropper-view-box"></span>' +
  2415. '<span class="cropper-dashed dashed-h"></span>' +
  2416. '<span class="cropper-dashed dashed-v"></span>' +
  2417. '<span class="cropper-center"></span>' +
  2418. '<span class="cropper-face"></span>' +
  2419. '<span class="cropper-line line-e" data-action="e"></span>' +
  2420. '<span class="cropper-line line-n" data-action="n"></span>' +
  2421. '<span class="cropper-line line-w" data-action="w"></span>' +
  2422. '<span class="cropper-line line-s" data-action="s"></span>' +
  2423. '<span class="cropper-point point-e" data-action="e"></span>' +
  2424. '<span class="cropper-point point-n" data-action="n"></span>' +
  2425. '<span class="cropper-point point-w" data-action="w"></span>' +
  2426. '<span class="cropper-point point-s" data-action="s"></span>' +
  2427. '<span class="cropper-point point-ne" data-action="ne"></span>' +
  2428. '<span class="cropper-point point-nw" data-action="nw"></span>' +
  2429. '<span class="cropper-point point-sw" data-action="sw"></span>' +
  2430. '<span class="cropper-point point-se" data-action="se"></span>' +
  2431. '</div>' +
  2432. '</div>'
  2433. );
  2434. // Save the other cropper
  2435. Cropper.other = $.fn.cropper;
  2436. // Register as jQuery plugin
  2437. $.fn.cropper = function (option) {
  2438. var args = toArray(arguments, 1);
  2439. var result;
  2440. this.each(function () {
  2441. var $this = $(this);
  2442. var data = $this.data(NAMESPACE);
  2443. var options;
  2444. var fn;
  2445. if (!data) {
  2446. if (/destroy/.test(option)) {
  2447. return;
  2448. }
  2449. options = $.extend({}, $this.data(), $.isPlainObject(option) && option);
  2450. $this.data(NAMESPACE, (data = new Cropper(this, options)));
  2451. }
  2452. if (typeof option === 'string' && $.isFunction(fn = data[option])) {
  2453. result = fn.apply(data, args);
  2454. }
  2455. });
  2456. return isUndefined(result) ? this : result;
  2457. };
  2458. $.fn.cropper.Constructor = Cropper;
  2459. $.fn.cropper.setDefaults = Cropper.setDefaults;
  2460. // No conflict
  2461. $.fn.cropper.noConflict = function () {
  2462. $.fn.cropper = Cropper.other;
  2463. return this;
  2464. };
  2465. });