|
0
|
1 /**
|
|
|
2 * Croppr.js
|
|
|
3 * https://github.com/jamesssooi/Croppr.js
|
|
|
4 *
|
|
|
5 * A JavaScript image cropper that's lightweight, awesome, and has
|
|
|
6 * zero dependencies.
|
|
|
7 *
|
|
|
8 * (C) 2017 James Ooi. Released under the MIT License.
|
|
|
9 */
|
|
|
10
|
|
|
11 (function (global, factory) {
|
|
|
12 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
|
13 typeof define === 'function' && define.amd ? define(factory) :
|
|
|
14 (global.Croppr = factory());
|
|
|
15 }(this, (function () { 'use strict';
|
|
|
16
|
|
|
17 (function () {
|
|
|
18 var lastTime = 0;
|
|
|
19 var vendors = ['ms', 'moz', 'webkit', 'o'];
|
|
|
20 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
|
|
21 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
|
|
22 window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
|
|
|
23 }
|
|
|
24 if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
|
|
|
25 var currTime = new Date().getTime();
|
|
|
26 var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
|
27 var id = window.setTimeout(function () {
|
|
|
28 callback(currTime + timeToCall);
|
|
|
29 }, timeToCall);
|
|
|
30 lastTime = currTime + timeToCall;
|
|
|
31 return id;
|
|
|
32 };
|
|
|
33 if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
|
|
|
34 clearTimeout(id);
|
|
|
35 };
|
|
|
36 })();
|
|
|
37 (function () {
|
|
|
38 if (typeof window.CustomEvent === "function") return false;
|
|
|
39 function CustomEvent(event, params) {
|
|
|
40 params = params || { bubbles: false, cancelable: false, detail: undefined };
|
|
|
41 var evt = document.createEvent('CustomEvent');
|
|
|
42 evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
|
|
43 return evt;
|
|
|
44 }
|
|
|
45 CustomEvent.prototype = window.Event.prototype;
|
|
|
46 window.CustomEvent = CustomEvent;
|
|
|
47 })();
|
|
|
48 (function (window) {
|
|
|
49 try {
|
|
|
50 new CustomEvent('test');
|
|
|
51 return false;
|
|
|
52 } catch (e) {}
|
|
|
53 function MouseEvent(eventType, params) {
|
|
|
54 params = params || { bubbles: false, cancelable: false };
|
|
|
55 var mouseEvent = document.createEvent('MouseEvent');
|
|
|
56 mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
|
|
57 return mouseEvent;
|
|
|
58 }
|
|
|
59 MouseEvent.prototype = Event.prototype;
|
|
|
60 window.MouseEvent = MouseEvent;
|
|
|
61 })(window);
|
|
|
62
|
|
|
63 var classCallCheck = function (instance, Constructor) {
|
|
|
64 if (!(instance instanceof Constructor)) {
|
|
|
65 throw new TypeError("Cannot call a class as a function");
|
|
|
66 }
|
|
|
67 };
|
|
|
68
|
|
|
69 var createClass = function () {
|
|
|
70 function defineProperties(target, props) {
|
|
|
71 for (var i = 0; i < props.length; i++) {
|
|
|
72 var descriptor = props[i];
|
|
|
73 descriptor.enumerable = descriptor.enumerable || false;
|
|
|
74 descriptor.configurable = true;
|
|
|
75 if ("value" in descriptor) descriptor.writable = true;
|
|
|
76 Object.defineProperty(target, descriptor.key, descriptor);
|
|
|
77 }
|
|
|
78 }
|
|
|
79
|
|
|
80 return function (Constructor, protoProps, staticProps) {
|
|
|
81 if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
|
82 if (staticProps) defineProperties(Constructor, staticProps);
|
|
|
83 return Constructor;
|
|
|
84 };
|
|
|
85 }();
|
|
|
86
|
|
|
87
|
|
|
88
|
|
|
89
|
|
|
90
|
|
|
91
|
|
|
92
|
|
|
93 var get = function get(object, property, receiver) {
|
|
|
94 if (object === null) object = Function.prototype;
|
|
|
95 var desc = Object.getOwnPropertyDescriptor(object, property);
|
|
|
96
|
|
|
97 if (desc === undefined) {
|
|
|
98 var parent = Object.getPrototypeOf(object);
|
|
|
99
|
|
|
100 if (parent === null) {
|
|
|
101 return undefined;
|
|
|
102 } else {
|
|
|
103 return get(parent, property, receiver);
|
|
|
104 }
|
|
|
105 } else if ("value" in desc) {
|
|
|
106 return desc.value;
|
|
|
107 } else {
|
|
|
108 var getter = desc.get;
|
|
|
109
|
|
|
110 if (getter === undefined) {
|
|
|
111 return undefined;
|
|
|
112 }
|
|
|
113
|
|
|
114 return getter.call(receiver);
|
|
|
115 }
|
|
|
116 };
|
|
|
117
|
|
|
118 var inherits = function (subClass, superClass) {
|
|
|
119 if (typeof superClass !== "function" && superClass !== null) {
|
|
|
120 throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
|
|
121 }
|
|
|
122
|
|
|
123 subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
|
124 constructor: {
|
|
|
125 value: subClass,
|
|
|
126 enumerable: false,
|
|
|
127 writable: true,
|
|
|
128 configurable: true
|
|
|
129 }
|
|
|
130 });
|
|
|
131 if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
|
132 };
|
|
|
133
|
|
|
134
|
|
|
135
|
|
|
136
|
|
|
137
|
|
|
138
|
|
|
139
|
|
|
140
|
|
|
141
|
|
|
142
|
|
|
143
|
|
|
144 var possibleConstructorReturn = function (self, call) {
|
|
|
145 if (!self) {
|
|
|
146 throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
|
147 }
|
|
|
148
|
|
|
149 return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
|
|
150 };
|
|
|
151
|
|
|
152
|
|
|
153
|
|
|
154
|
|
|
155
|
|
|
156 var slicedToArray = function () {
|
|
|
157 function sliceIterator(arr, i) {
|
|
|
158 var _arr = [];
|
|
|
159 var _n = true;
|
|
|
160 var _d = false;
|
|
|
161 var _e = undefined;
|
|
|
162
|
|
|
163 try {
|
|
|
164 for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
|
165 _arr.push(_s.value);
|
|
|
166
|
|
|
167 if (i && _arr.length === i) break;
|
|
|
168 }
|
|
|
169 } catch (err) {
|
|
|
170 _d = true;
|
|
|
171 _e = err;
|
|
|
172 } finally {
|
|
|
173 try {
|
|
|
174 if (!_n && _i["return"]) _i["return"]();
|
|
|
175 } finally {
|
|
|
176 if (_d) throw _e;
|
|
|
177 }
|
|
|
178 }
|
|
|
179
|
|
|
180 return _arr;
|
|
|
181 }
|
|
|
182
|
|
|
183 return function (arr, i) {
|
|
|
184 if (Array.isArray(arr)) {
|
|
|
185 return arr;
|
|
|
186 } else if (Symbol.iterator in Object(arr)) {
|
|
|
187 return sliceIterator(arr, i);
|
|
|
188 } else {
|
|
|
189 throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
|
|
190 }
|
|
|
191 };
|
|
|
192 }();
|
|
|
193
|
|
|
194 var Handle =
|
|
|
195 /**
|
|
|
196 * Creates a new Handle instance.
|
|
|
197 * @constructor
|
|
|
198 * @param {Array} position The x and y ratio position of the handle
|
|
|
199 * within the crop region. Accepts a value between 0 to 1 in the order
|
|
|
200 * of [X, Y].
|
|
|
201 * @param {Array} constraints Define the side of the crop region that
|
|
|
202 * is to be affected by this handle. Accepts a value of 0 or 1 in the
|
|
|
203 * order of [TOP, RIGHT, BOTTOM, LEFT].
|
|
|
204 * @param {String} cursor The CSS cursor of this handle.
|
|
|
205 * @param {Element} eventBus The element to dispatch events to.
|
|
|
206 */
|
|
|
207 function Handle(position, constraints, cursor, eventBus) {
|
|
|
208 classCallCheck(this, Handle);
|
|
|
209 var self = this;
|
|
|
210 this.position = position;
|
|
|
211 this.constraints = constraints;
|
|
|
212 this.cursor = cursor;
|
|
|
213 this.eventBus = eventBus;
|
|
|
214 this.el = document.createElement('div');
|
|
|
215 this.el.className = 'croppr-handle';
|
|
|
216 this.el.style.cursor = cursor;
|
|
|
217 this.el.addEventListener('mousedown', onMouseDown);
|
|
|
218 function onMouseDown(e) {
|
|
|
219 e.stopPropagation();
|
|
|
220 document.addEventListener('mouseup', onMouseUp);
|
|
|
221 document.addEventListener('mousemove', onMouseMove);
|
|
|
222 self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
|
|
|
223 detail: { handle: self }
|
|
|
224 }));
|
|
|
225 }
|
|
|
226 function onMouseUp(e) {
|
|
|
227 e.stopPropagation();
|
|
|
228 document.removeEventListener('mouseup', onMouseUp);
|
|
|
229 document.removeEventListener('mousemove', onMouseMove);
|
|
|
230 self.eventBus.dispatchEvent(new CustomEvent('handleend', {
|
|
|
231 detail: { handle: self }
|
|
|
232 }));
|
|
|
233 }
|
|
|
234 function onMouseMove(e) {
|
|
|
235 e.stopPropagation();
|
|
|
236 self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
|
|
|
237 detail: { mouseX: e.clientX, mouseY: e.clientY }
|
|
|
238 }));
|
|
|
239 }
|
|
|
240 };
|
|
|
241
|
|
|
242 var Box = function () {
|
|
|
243 /**
|
|
|
244 * Creates a new Box instance.
|
|
|
245 * @constructor
|
|
|
246 * @param {Number} x1
|
|
|
247 * @param {Number} y1
|
|
|
248 * @param {Number} x2
|
|
|
249 * @param {Number} y2
|
|
|
250 */
|
|
|
251 function Box(x1, y1, x2, y2) {
|
|
|
252 classCallCheck(this, Box);
|
|
|
253 this.x1 = x1;
|
|
|
254 this.y1 = y1;
|
|
|
255 this.x2 = x2;
|
|
|
256 this.y2 = y2;
|
|
|
257 }
|
|
|
258 /**
|
|
|
259 * Sets the new dimensions of the box.
|
|
|
260 * @param {Number} x1
|
|
|
261 * @param {Number} y1
|
|
|
262 * @param {Number} x2
|
|
|
263 * @param {Number} y2
|
|
|
264 */
|
|
|
265 createClass(Box, [{
|
|
|
266 key: 'set',
|
|
|
267 value: function set$$1() {
|
|
|
268 var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
|
269 var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
|
270 var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
|
271 var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
|
272 this.x1 = x1 == null ? this.x1 : x1;
|
|
|
273 this.y1 = y1 == null ? this.y1 : y1;
|
|
|
274 this.x2 = x2 == null ? this.x2 : x2;
|
|
|
275 this.y2 = y2 == null ? this.y2 : y2;
|
|
|
276 return this;
|
|
|
277 }
|
|
|
278 /**
|
|
|
279 * Calculates the width of the box.
|
|
|
280 * @returns {Number}
|
|
|
281 */
|
|
|
282 }, {
|
|
|
283 key: 'width',
|
|
|
284 value: function width() {
|
|
|
285 return Math.abs(this.x2 - this.x1);
|
|
|
286 }
|
|
|
287 /**
|
|
|
288 * Calculates the height of the box.
|
|
|
289 * @returns {Number}
|
|
|
290 */
|
|
|
291 }, {
|
|
|
292 key: 'height',
|
|
|
293 value: function height() {
|
|
|
294 return Math.abs(this.y2 - this.y1);
|
|
|
295 }
|
|
|
296 /**
|
|
|
297 * Resizes the box to a new size.
|
|
|
298 * @param {Number} newWidth
|
|
|
299 * @param {Number} newHeight
|
|
|
300 * @param {Array} [origin] The origin point to resize from.
|
|
|
301 * Defaults to [0, 0] (top left).
|
|
|
302 */
|
|
|
303 }, {
|
|
|
304 key: 'resize',
|
|
|
305 value: function resize(newWidth, newHeight) {
|
|
|
306 var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
|
|
|
307 var fromX = this.x1 + this.width() * origin[0];
|
|
|
308 var fromY = this.y1 + this.height() * origin[1];
|
|
|
309 this.x1 = fromX - newWidth * origin[0];
|
|
|
310 this.y1 = fromY - newHeight * origin[1];
|
|
|
311 this.x2 = this.x1 + newWidth;
|
|
|
312 this.y2 = this.y1 + newHeight;
|
|
|
313 return this;
|
|
|
314 }
|
|
|
315 /**
|
|
|
316 * Scale the box by a factor.
|
|
|
317 * @param {Number} factor
|
|
|
318 * @param {Array} [origin] The origin point to resize from.
|
|
|
319 * Defaults to [0, 0] (top left).
|
|
|
320 */
|
|
|
321 }, {
|
|
|
322 key: 'scale',
|
|
|
323 value: function scale(factor) {
|
|
|
324 var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
|
|
|
325 var newWidth = this.width() * factor;
|
|
|
326 var newHeight = this.height() * factor;
|
|
|
327 this.resize(newWidth, newHeight, origin);
|
|
|
328 return this;
|
|
|
329 }
|
|
|
330 }, {
|
|
|
331 key: 'move',
|
|
|
332 value: function move() {
|
|
|
333 var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
|
334 var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
|
335 var width = this.width();
|
|
|
336 var height = this.height();
|
|
|
337 x = x === null ? this.x1 : x;
|
|
|
338 y = y === null ? this.y1 : y;
|
|
|
339 this.x1 = x;
|
|
|
340 this.y1 = y;
|
|
|
341 this.x2 = x + width;
|
|
|
342 this.y2 = y + height;
|
|
|
343 return this;
|
|
|
344 }
|
|
|
345 /**
|
|
|
346 * Get relative x and y coordinates of a given point within the box.
|
|
|
347 * @param {Array} point The x and y ratio position within the box.
|
|
|
348 * @returns {Array} The x and y coordinates [x, y].
|
|
|
349 */
|
|
|
350 }, {
|
|
|
351 key: 'getRelativePoint',
|
|
|
352 value: function getRelativePoint() {
|
|
|
353 var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
|
|
|
354 var x = this.width() * point[0];
|
|
|
355 var y = this.height() * point[1];
|
|
|
356 return [x, y];
|
|
|
357 }
|
|
|
358 /**
|
|
|
359 * Get absolute x and y coordinates of a given point within the box.
|
|
|
360 * @param {Array} point The x and y ratio position within the box.
|
|
|
361 * @returns {Array} The x and y coordinates [x, y].
|
|
|
362 */
|
|
|
363 }, {
|
|
|
364 key: 'getAbsolutePoint',
|
|
|
365 value: function getAbsolutePoint() {
|
|
|
366 var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
|
|
|
367 var x = this.x1 + this.width() * point[0];
|
|
|
368 var y = this.y1 + this.height() * point[1];
|
|
|
369 return [x, y];
|
|
|
370 }
|
|
|
371 /**
|
|
|
372 * Constrain the box to a fixed ratio.
|
|
|
373 * @param {Number} ratio
|
|
|
374 * @param {Array} [origin] The origin point to resize from.
|
|
|
375 * Defaults to [0, 0] (top left).
|
|
|
376 * @param {String} [grow] The axis to grow to maintain the ratio.
|
|
|
377 * Defaults to 'height'.
|
|
|
378 */
|
|
|
379 }, {
|
|
|
380 key: 'constrainToRatio',
|
|
|
381 value: function constrainToRatio(ratio) {
|
|
|
382 var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
|
|
|
383 var grow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'height';
|
|
|
384 if (ratio === null) {
|
|
|
385 return;
|
|
|
386 }
|
|
|
387 var width = this.width();
|
|
|
388 var height = this.height();
|
|
|
389 switch (grow) {
|
|
|
390 case 'height':
|
|
|
391 this.resize(this.width(), this.width() * ratio, origin);
|
|
|
392 break;
|
|
|
393 case 'width':
|
|
|
394 this.resize(this.height() * 1 / ratio, this.height(), origin);
|
|
|
395 break;
|
|
|
396 default:
|
|
|
397 this.resize(this.width(), this.width() * ratio, origin);
|
|
|
398 }
|
|
|
399 return this;
|
|
|
400 }
|
|
|
401 /**
|
|
|
402 * Constrain the box within a boundary.
|
|
|
403 * @param {Number} boundaryWidth
|
|
|
404 * @param {Number} boundaryHeight
|
|
|
405 * @param {Array} [origin] The origin point to resize from.
|
|
|
406 * Defaults to [0, 0] (top left).
|
|
|
407 */
|
|
|
408 }, {
|
|
|
409 key: 'constrainToBoundary',
|
|
|
410 value: function constrainToBoundary(boundaryWidth, boundaryHeight) {
|
|
|
411 var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
|
|
|
412 var _getAbsolutePoint = this.getAbsolutePoint(origin),
|
|
|
413 _getAbsolutePoint2 = slicedToArray(_getAbsolutePoint, 2),
|
|
|
414 originX = _getAbsolutePoint2[0],
|
|
|
415 originY = _getAbsolutePoint2[1];
|
|
|
416 var maxIfLeft = originX;
|
|
|
417 var maxIfTop = originY;
|
|
|
418 var maxIfRight = boundaryWidth - originX;
|
|
|
419 var maxIfBottom = boundaryHeight - originY;
|
|
|
420 var directionX = -2 * origin[0] + 1;
|
|
|
421 var directionY = -2 * origin[1] + 1;
|
|
|
422 var maxWidth = null,
|
|
|
423 maxHeight = null;
|
|
|
424 switch (directionX) {
|
|
|
425 case -1:
|
|
|
426 maxWidth = maxIfLeft;break;
|
|
|
427 case 0:
|
|
|
428 maxWidth = Math.min(maxIfLeft, maxIfRight) * 2;break;
|
|
|
429 case +1:
|
|
|
430 maxWidth = maxIfRight;break;
|
|
|
431 }
|
|
|
432 switch (directionY) {
|
|
|
433 case -1:
|
|
|
434 maxHeight = maxIfTop;break;
|
|
|
435 case 0:
|
|
|
436 maxHeight = Math.min(maxIfTop, maxIfBottom) * 2;break;
|
|
|
437 case +1:
|
|
|
438 maxHeight = maxIfBottom;break;
|
|
|
439 }
|
|
|
440 if (this.width() > maxWidth) {
|
|
|
441 var factor = maxWidth / this.width();
|
|
|
442 this.scale(factor, origin);
|
|
|
443 }
|
|
|
444 if (this.height() > maxHeight) {
|
|
|
445 var _factor = maxHeight / this.height();
|
|
|
446 this.scale(_factor, origin);
|
|
|
447 }
|
|
|
448 return this;
|
|
|
449 }
|
|
|
450 /**
|
|
|
451 * Constrain the box to a maximum/minimum size.
|
|
|
452 * @param {Number} [maxWidth]
|
|
|
453 * @param {Number} [maxHeight]
|
|
|
454 * @param {Number} [minWidth]
|
|
|
455 * @param {Number} [minHeight]
|
|
|
456 * @param {Array} [origin] The origin point to resize from.
|
|
|
457 * Defaults to [0, 0] (top left).
|
|
|
458 * @param {Number} [ratio] Ratio to maintain.
|
|
|
459 */
|
|
|
460 }, {
|
|
|
461 key: 'constrainToSize',
|
|
|
462 value: function constrainToSize() {
|
|
|
463 var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
|
464 var maxHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
|
465 var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
|
466 var minHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
|
467 var origin = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, 0];
|
|
|
468 var ratio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
|
|
|
469 if (ratio) {
|
|
|
470 if (ratio > 1) {
|
|
|
471 maxWidth = maxHeight * 1 / ratio;
|
|
|
472 minHeight = minHeight * ratio;
|
|
|
473 } else if (ratio < 1) {
|
|
|
474 maxHeight = maxWidth * ratio;
|
|
|
475 minWidth = minHeight * 1 / ratio;
|
|
|
476 }
|
|
|
477 }
|
|
|
478 if (maxWidth && this.width() > maxWidth) {
|
|
|
479 var newWidth = maxWidth,
|
|
|
480 newHeight = ratio === null ? this.height() : maxHeight;
|
|
|
481 this.resize(newWidth, newHeight, origin);
|
|
|
482 }
|
|
|
483 if (maxHeight && this.height() > maxHeight) {
|
|
|
484 var _newWidth = ratio === null ? this.width() : maxWidth,
|
|
|
485 _newHeight = maxHeight;
|
|
|
486 this.resize(_newWidth, _newHeight, origin);
|
|
|
487 }
|
|
|
488 if (minWidth && this.width() < minWidth) {
|
|
|
489 var _newWidth2 = minWidth,
|
|
|
490 _newHeight2 = ratio === null ? this.height() : minHeight;
|
|
|
491 this.resize(_newWidth2, _newHeight2, origin);
|
|
|
492 }
|
|
|
493 if (minHeight && this.height() < minHeight) {
|
|
|
494 var _newWidth3 = ratio === null ? this.width() : minWidth,
|
|
|
495 _newHeight3 = minHeight;
|
|
|
496 this.resize(_newWidth3, _newHeight3, origin);
|
|
|
497 }
|
|
|
498 return this;
|
|
|
499 }
|
|
|
500 }]);
|
|
|
501 return Box;
|
|
|
502 }();
|
|
|
503
|
|
|
504 /**
|
|
|
505 * Binds an element's touch events to be simulated as mouse events.
|
|
|
506 * @param {Element} element
|
|
|
507 */
|
|
|
508 function enableTouch(element) {
|
|
|
509 element.addEventListener('touchstart', simulateMouseEvent);
|
|
|
510 element.addEventListener('touchend', simulateMouseEvent);
|
|
|
511 element.addEventListener('touchmove', simulateMouseEvent);
|
|
|
512 }
|
|
|
513 /**
|
|
|
514 * Translates a touch event to a mouse event.
|
|
|
515 * @param {Event} e
|
|
|
516 */
|
|
|
517 function simulateMouseEvent(e) {
|
|
|
518 e.preventDefault();
|
|
|
519 var touch = e.changedTouches[0];
|
|
|
520 var eventMap = {
|
|
|
521 'touchstart': 'mousedown',
|
|
|
522 'touchmove': 'mousemove',
|
|
|
523 'touchend': 'mouseup'
|
|
|
524 };
|
|
|
525 touch.target.dispatchEvent(new MouseEvent(eventMap[e.type], {
|
|
|
526 bubbles: true,
|
|
|
527 cancelable: true,
|
|
|
528 view: window,
|
|
|
529 clientX: touch.clientX,
|
|
|
530 clientY: touch.clientY,
|
|
|
531 screenX: touch.screenX,
|
|
|
532 screenY: touch.screenY
|
|
|
533 }));
|
|
|
534 }
|
|
|
535
|
|
|
536 /**
|
|
|
537 * Define a list of handles to create.
|
|
|
538 *
|
|
|
539 * @property {Array} position - The x and y ratio position of the handle within
|
|
|
540 * the crop region. Accepts a value between 0 to 1 in the order of [X, Y].
|
|
|
541 * @property {Array} constraints - Define the side of the crop region that is to
|
|
|
542 * be affected by this handle. Accepts a value of 0 or 1 in the order of
|
|
|
543 * [TOP, RIGHT, BOTTOM, LEFT].
|
|
|
544 * @property {String} cursor - The CSS cursor of this handle.
|
|
|
545 */
|
|
|
546 var HANDLES = [{ position: [0.0, 0.0], constraints: [1, 0, 0, 1], cursor: 'nw-resize' }, { position: [0.5, 0.0], constraints: [1, 0, 0, 0], cursor: 'n-resize' }, { position: [1.0, 0.0], constraints: [1, 1, 0, 0], cursor: 'ne-resize' }, { position: [1.0, 0.5], constraints: [0, 1, 0, 0], cursor: 'e-resize' }, { position: [1.0, 1.0], constraints: [0, 1, 1, 0], cursor: 'se-resize' }, { position: [0.5, 1.0], constraints: [0, 0, 1, 0], cursor: 's-resize' }, { position: [0.0, 1.0], constraints: [0, 0, 1, 1], cursor: 'sw-resize' }, { position: [0.0, 0.5], constraints: [0, 0, 0, 1], cursor: 'w-resize' }];
|
|
|
547 var CropprCore = function () {
|
|
|
548 function CropprCore(element, options) {
|
|
|
549 var _this = this;
|
|
|
550 var deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
|
551 classCallCheck(this, CropprCore);
|
|
|
552 this.options = CropprCore.parseOptions(options || {});
|
|
|
553 if (!element.nodeName) {
|
|
|
554 element = document.querySelector(element);
|
|
|
555 if (element == null) {
|
|
|
556 throw 'Unable to find element.';
|
|
|
557 }
|
|
|
558 }
|
|
|
559 if (!element.getAttribute('src')) {
|
|
|
560 throw 'Image src not provided.';
|
|
|
561 }
|
|
|
562 this._initialized = false;
|
|
|
563 this._restore = {
|
|
|
564 parent: element.parentNode,
|
|
|
565 element: element
|
|
|
566 };
|
|
|
567 if (!deferred) {
|
|
|
568 if (element.width === 0 || element.height === 0) {
|
|
|
569 element.onload = function () {
|
|
|
570 _this.initialize(element);
|
|
|
571 };
|
|
|
572 } else {
|
|
|
573 this.initialize(element);
|
|
|
574 }
|
|
|
575 }
|
|
|
576 }
|
|
|
577 createClass(CropprCore, [{
|
|
|
578 key: 'initialize',
|
|
|
579 value: function initialize(element) {
|
|
|
580 this.createDOM(element);
|
|
|
581 this.options.convertToPixels(this.cropperEl);
|
|
|
582 this.attachHandlerEvents();
|
|
|
583 this.attachRegionEvents();
|
|
|
584 this.attachOverlayEvents();
|
|
|
585 this.box = this.initializeBox(this.options);
|
|
|
586 this.redraw();
|
|
|
587 this._initialized = true;
|
|
|
588 if (this.options.onInitialize !== null) {
|
|
|
589 this.options.onInitialize(this);
|
|
|
590 }
|
|
|
591 }
|
|
|
592 }, {
|
|
|
593 key: 'createDOM',
|
|
|
594 value: function createDOM(targetEl) {
|
|
|
595 this.containerEl = document.createElement('div');
|
|
|
596 this.containerEl.className = 'croppr-container';
|
|
|
597 this.eventBus = this.containerEl;
|
|
|
598 enableTouch(this.containerEl);
|
|
|
599 this.cropperEl = document.createElement('div');
|
|
|
600 this.cropperEl.className = 'croppr';
|
|
|
601 this.imageEl = document.createElement('img');
|
|
|
602 this.imageEl.setAttribute('src', targetEl.getAttribute('src'));
|
|
|
603 this.imageEl.setAttribute('alt', targetEl.getAttribute('alt'));
|
|
|
604 this.imageEl.className = 'croppr-image';
|
|
|
605 this.imageClippedEl = this.imageEl.cloneNode();
|
|
|
606 this.imageClippedEl.className = 'croppr-imageClipped';
|
|
|
607 this.regionEl = document.createElement('div');
|
|
|
608 this.regionEl.className = 'croppr-region';
|
|
|
609 this.overlayEl = document.createElement('div');
|
|
|
610 this.overlayEl.className = 'croppr-overlay';
|
|
|
611 var handleContainerEl = document.createElement('div');
|
|
|
612 handleContainerEl.className = 'croppr-handleContainer';
|
|
|
613 this.handles = [];
|
|
|
614 for (var i = 0; i < HANDLES.length; i++) {
|
|
|
615 var handle = new Handle(HANDLES[i].position, HANDLES[i].constraints, HANDLES[i].cursor, this.eventBus);
|
|
|
616 this.handles.push(handle);
|
|
|
617 handleContainerEl.appendChild(handle.el);
|
|
|
618 }
|
|
|
619 this.cropperEl.appendChild(this.imageEl);
|
|
|
620 this.cropperEl.appendChild(this.imageClippedEl);
|
|
|
621 this.cropperEl.appendChild(this.regionEl);
|
|
|
622 this.cropperEl.appendChild(this.overlayEl);
|
|
|
623 this.cropperEl.appendChild(handleContainerEl);
|
|
|
624 this.containerEl.appendChild(this.cropperEl);
|
|
|
625 targetEl.parentElement.replaceChild(this.containerEl, targetEl);
|
|
|
626 }
|
|
|
627 /**
|
|
|
628 * Changes the image src.
|
|
|
629 * @param {String} src
|
|
|
630 */
|
|
|
631 }, {
|
|
|
632 key: 'setImage',
|
|
|
633 value: function setImage(src) {
|
|
|
634 var _this2 = this;
|
|
|
635 this.imageEl.onload = function () {
|
|
|
636 _this2.box = _this2.initializeBox(_this2.options);
|
|
|
637 _this2.redraw();
|
|
|
638 };
|
|
|
639 this.imageEl.src = src;
|
|
|
640 this.imageClippedEl.src = src;
|
|
|
641 return this;
|
|
|
642 }
|
|
|
643 }, {
|
|
|
644 key: 'destroy',
|
|
|
645 value: function destroy() {
|
|
|
646 this._restore.parent.replaceChild(this._restore.element, this.containerEl);
|
|
|
647 }
|
|
|
648 /**
|
|
|
649 * Create a new box region with a set of options.
|
|
|
650 * @param {Object} opts The options.
|
|
|
651 * @returns {Box}
|
|
|
652 */
|
|
|
653 }, {
|
|
|
654 key: 'initializeBox',
|
|
|
655 value: function initializeBox(opts) {
|
|
|
656 var width = opts.startSize.width;
|
|
|
657 var height = opts.startSize.height;
|
|
|
658 var box = new Box(0, 0, width, height);
|
|
|
659 box.constrainToRatio(opts.aspectRatio, [0.5, 0.5]);
|
|
|
660 var min = opts.minSize;
|
|
|
661 var max = opts.maxSize;
|
|
|
662 box.constrainToSize(max.width, max.height, min.width, min.height, [0.5, 0.5], opts.aspectRatio);
|
|
|
663 var parentWidth = this.cropperEl.offsetWidth;
|
|
|
664 var parentHeight = this.cropperEl.offsetHeight;
|
|
|
665 box.constrainToBoundary(parentWidth, parentHeight, [0.5, 0.5]);
|
|
|
666 var x = this.cropperEl.offsetWidth / 2 - box.width() / 2;
|
|
|
667 var y = this.cropperEl.offsetHeight / 2 - box.height() / 2;
|
|
|
668 box.move(x, y);
|
|
|
669 return box;
|
|
|
670 }
|
|
|
671 }, {
|
|
|
672 key: 'redraw',
|
|
|
673 value: function redraw() {
|
|
|
674 var _this3 = this;
|
|
|
675 var width = Math.round(this.box.width()),
|
|
|
676 height = Math.round(this.box.height()),
|
|
|
677 x1 = Math.round(this.box.x1),
|
|
|
678 y1 = Math.round(this.box.y1),
|
|
|
679 x2 = Math.round(this.box.x2),
|
|
|
680 y2 = Math.round(this.box.y2);
|
|
|
681 window.requestAnimationFrame(function () {
|
|
|
682 _this3.regionEl.style.transform = 'translate(' + x1 + 'px, ' + y1 + 'px)';
|
|
|
683 _this3.regionEl.style.width = width + 'px';
|
|
|
684 _this3.regionEl.style.height = height + 'px';
|
|
|
685 _this3.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)';
|
|
|
686 var center = _this3.box.getAbsolutePoint([.5, .5]);
|
|
|
687 var xSign = center[0] - _this3.cropperEl.offsetWidth / 2 >> 31;
|
|
|
688 var ySign = center[1] - _this3.cropperEl.offsetHeight / 2 >> 31;
|
|
|
689 var quadrant = (xSign ^ ySign) + ySign + ySign + 4;
|
|
|
690 var foregroundHandleIndex = -2 * quadrant + 8;
|
|
|
691 for (var i = 0; i < _this3.handles.length; i++) {
|
|
|
692 var handle = _this3.handles[i];
|
|
|
693 var handleWidth = handle.el.offsetWidth;
|
|
|
694 var handleHeight = handle.el.offsetHeight;
|
|
|
695 var left = x1 + width * handle.position[0] - handleWidth / 2;
|
|
|
696 var top = y1 + height * handle.position[1] - handleHeight / 2;
|
|
|
697 handle.el.style.transform = 'translate(' + Math.round(left) + 'px, ' + Math.round(top) + 'px)';
|
|
|
698 handle.el.style.zIndex = foregroundHandleIndex == i ? 5 : 4;
|
|
|
699 }
|
|
|
700 });
|
|
|
701 }
|
|
|
702 }, {
|
|
|
703 key: 'attachHandlerEvents',
|
|
|
704 value: function attachHandlerEvents() {
|
|
|
705 var eventBus = this.eventBus;
|
|
|
706 eventBus.addEventListener('handlestart', this.onHandleMoveStart.bind(this));
|
|
|
707 eventBus.addEventListener('handlemove', this.onHandleMoveMoving.bind(this));
|
|
|
708 eventBus.addEventListener('handleend', this.onHandleMoveEnd.bind(this));
|
|
|
709 }
|
|
|
710 }, {
|
|
|
711 key: 'attachRegionEvents',
|
|
|
712 value: function attachRegionEvents() {
|
|
|
713 var eventBus = this.eventBus;
|
|
|
714 var self = this;
|
|
|
715 this.regionEl.addEventListener('mousedown', onMouseDown);
|
|
|
716 eventBus.addEventListener('regionstart', this.onRegionMoveStart.bind(this));
|
|
|
717 eventBus.addEventListener('regionmove', this.onRegionMoveMoving.bind(this));
|
|
|
718 eventBus.addEventListener('regionend', this.onRegionMoveEnd.bind(this));
|
|
|
719 function onMouseDown(e) {
|
|
|
720 e.stopPropagation();
|
|
|
721 document.addEventListener('mouseup', onMouseUp);
|
|
|
722 document.addEventListener('mousemove', onMouseMove);
|
|
|
723 eventBus.dispatchEvent(new CustomEvent('regionstart', {
|
|
|
724 detail: { mouseX: e.clientX, mouseY: e.clientY }
|
|
|
725 }));
|
|
|
726 }
|
|
|
727 function onMouseMove(e) {
|
|
|
728 e.stopPropagation();
|
|
|
729 eventBus.dispatchEvent(new CustomEvent('regionmove', {
|
|
|
730 detail: { mouseX: e.clientX, mouseY: e.clientY }
|
|
|
731 }));
|
|
|
732 }
|
|
|
733 function onMouseUp(e) {
|
|
|
734 e.stopPropagation();
|
|
|
735 document.removeEventListener('mouseup', onMouseUp);
|
|
|
736 document.removeEventListener('mousemove', onMouseMove);
|
|
|
737 eventBus.dispatchEvent(new CustomEvent('regionend', {
|
|
|
738 detail: { mouseX: e.clientX, mouseY: e.clientY }
|
|
|
739 }));
|
|
|
740 }
|
|
|
741 }
|
|
|
742 }, {
|
|
|
743 key: 'attachOverlayEvents',
|
|
|
744 value: function attachOverlayEvents() {
|
|
|
745 var SOUTHEAST_HANDLE_IDX = 4;
|
|
|
746 var self = this;
|
|
|
747 var tmpBox = null;
|
|
|
748 this.overlayEl.addEventListener('mousedown', onMouseDown);
|
|
|
749 function onMouseDown(e) {
|
|
|
750 e.stopPropagation();
|
|
|
751 document.addEventListener('mouseup', onMouseUp);
|
|
|
752 document.addEventListener('mousemove', onMouseMove);
|
|
|
753 var container = self.cropperEl.getBoundingClientRect();
|
|
|
754 var mouseX = e.clientX - container.left;
|
|
|
755 var mouseY = e.clientY - container.top;
|
|
|
756 tmpBox = self.box;
|
|
|
757 self.box = new Box(mouseX, mouseY, mouseX + 1, mouseY + 1);
|
|
|
758 self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
|
|
|
759 detail: { handle: self.handles[SOUTHEAST_HANDLE_IDX] }
|
|
|
760 }));
|
|
|
761 }
|
|
|
762 function onMouseMove(e) {
|
|
|
763 e.stopPropagation();
|
|
|
764 self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
|
|
|
765 detail: { mouseX: e.clientX, mouseY: e.clientY }
|
|
|
766 }));
|
|
|
767 }
|
|
|
768 function onMouseUp(e) {
|
|
|
769 e.stopPropagation();
|
|
|
770 document.removeEventListener('mouseup', onMouseUp);
|
|
|
771 document.removeEventListener('mousemove', onMouseMove);
|
|
|
772 if (self.box.width() === 1 && self.box.height() === 1) {
|
|
|
773 self.box = tmpBox;
|
|
|
774 return;
|
|
|
775 }
|
|
|
776 self.eventBus.dispatchEvent(new CustomEvent('handleend', {
|
|
|
777 detail: { mouseX: e.clientX, mouseY: e.clientY }
|
|
|
778 }));
|
|
|
779 }
|
|
|
780 }
|
|
|
781 }, {
|
|
|
782 key: 'onHandleMoveStart',
|
|
|
783 value: function onHandleMoveStart(e) {
|
|
|
784 var handle = e.detail.handle;
|
|
|
785 var originPoint = [1 - handle.position[0], 1 - handle.position[1]];
|
|
|
786 var _box$getAbsolutePoint = this.box.getAbsolutePoint(originPoint),
|
|
|
787 _box$getAbsolutePoint2 = slicedToArray(_box$getAbsolutePoint, 2),
|
|
|
788 originX = _box$getAbsolutePoint2[0],
|
|
|
789 originY = _box$getAbsolutePoint2[1];
|
|
|
790 this.activeHandle = { handle: handle, originPoint: originPoint, originX: originX, originY: originY };
|
|
|
791 if (this.options.onCropStart !== null) {
|
|
|
792 this.options.onCropStart(this.getValue());
|
|
|
793 }
|
|
|
794 }
|
|
|
795 }, {
|
|
|
796 key: 'onHandleMoveMoving',
|
|
|
797 value: function onHandleMoveMoving(e) {
|
|
|
798 var _e$detail = e.detail,
|
|
|
799 mouseX = _e$detail.mouseX,
|
|
|
800 mouseY = _e$detail.mouseY;
|
|
|
801 var container = this.cropperEl.getBoundingClientRect();
|
|
|
802 mouseX = mouseX - container.left;
|
|
|
803 mouseY = mouseY - container.top;
|
|
|
804 if (mouseX < 0) {
|
|
|
805 mouseX = 0;
|
|
|
806 } else if (mouseX > container.width) {
|
|
|
807 mouseX = container.width;
|
|
|
808 }
|
|
|
809 if (mouseY < 0) {
|
|
|
810 mouseY = 0;
|
|
|
811 } else if (mouseY > container.height) {
|
|
|
812 mouseY = container.height;
|
|
|
813 }
|
|
|
814 var origin = this.activeHandle.originPoint.slice();
|
|
|
815 var originX = this.activeHandle.originX;
|
|
|
816 var originY = this.activeHandle.originY;
|
|
|
817 var handle = this.activeHandle.handle;
|
|
|
818 var TOP_MOVABLE = handle.constraints[0] === 1;
|
|
|
819 var RIGHT_MOVABLE = handle.constraints[1] === 1;
|
|
|
820 var BOTTOM_MOVABLE = handle.constraints[2] === 1;
|
|
|
821 var LEFT_MOVABLE = handle.constraints[3] === 1;
|
|
|
822 var MULTI_AXIS = (LEFT_MOVABLE || RIGHT_MOVABLE) && (TOP_MOVABLE || BOTTOM_MOVABLE);
|
|
|
823 var x1 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x1;
|
|
|
824 var x2 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x2;
|
|
|
825 var y1 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y1;
|
|
|
826 var y2 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y2;
|
|
|
827 x1 = LEFT_MOVABLE ? mouseX : x1;
|
|
|
828 x2 = RIGHT_MOVABLE ? mouseX : x2;
|
|
|
829 y1 = TOP_MOVABLE ? mouseY : y1;
|
|
|
830 y2 = BOTTOM_MOVABLE ? mouseY : y2;
|
|
|
831 var isFlippedX = false,
|
|
|
832 isFlippedY = false;
|
|
|
833 if (LEFT_MOVABLE || RIGHT_MOVABLE) {
|
|
|
834 isFlippedX = LEFT_MOVABLE ? mouseX > originX : mouseX < originX;
|
|
|
835 }
|
|
|
836 if (TOP_MOVABLE || BOTTOM_MOVABLE) {
|
|
|
837 isFlippedY = TOP_MOVABLE ? mouseY > originY : mouseY < originY;
|
|
|
838 }
|
|
|
839 if (isFlippedX) {
|
|
|
840 var tmp = x1;x1 = x2;x2 = tmp;
|
|
|
841 origin[0] = 1 - origin[0];
|
|
|
842 }
|
|
|
843 if (isFlippedY) {
|
|
|
844 var _tmp = y1;y1 = y2;y2 = _tmp;
|
|
|
845 origin[1] = 1 - origin[1];
|
|
|
846 }
|
|
|
847 var box = new Box(x1, y1, x2, y2);
|
|
|
848 if (this.options.aspectRatio) {
|
|
|
849 var ratio = this.options.aspectRatio;
|
|
|
850 var isVerticalMovement = false;
|
|
|
851 if (MULTI_AXIS) {
|
|
|
852 isVerticalMovement = mouseY > box.y1 + ratio * box.width() || mouseY < box.y2 - ratio * box.width();
|
|
|
853 } else if (TOP_MOVABLE || BOTTOM_MOVABLE) {
|
|
|
854 isVerticalMovement = true;
|
|
|
855 }
|
|
|
856 var ratioMode = isVerticalMovement ? 'width' : 'height';
|
|
|
857 box.constrainToRatio(ratio, origin, ratioMode);
|
|
|
858 }
|
|
|
859 var min = this.options.minSize;
|
|
|
860 var max = this.options.maxSize;
|
|
|
861 box.constrainToSize(max.width, max.height, min.width, min.height, origin, this.options.aspectRatio);
|
|
|
862 var parentWidth = this.cropperEl.offsetWidth;
|
|
|
863 var parentHeight = this.cropperEl.offsetHeight;
|
|
|
864 box.constrainToBoundary(parentWidth, parentHeight, origin);
|
|
|
865 this.box = box;
|
|
|
866 this.redraw();
|
|
|
867 if (this.options.onCropMove !== null) {
|
|
|
868 this.options.onCropMove(this.getValue());
|
|
|
869 }
|
|
|
870 }
|
|
|
871 }, {
|
|
|
872 key: 'onHandleMoveEnd',
|
|
|
873 value: function onHandleMoveEnd(e) {
|
|
|
874 if (this.options.onCropEnd !== null) {
|
|
|
875 this.options.onCropEnd(this.getValue());
|
|
|
876 }
|
|
|
877 }
|
|
|
878 }, {
|
|
|
879 key: 'onRegionMoveStart',
|
|
|
880 value: function onRegionMoveStart(e) {
|
|
|
881 var _e$detail2 = e.detail,
|
|
|
882 mouseX = _e$detail2.mouseX,
|
|
|
883 mouseY = _e$detail2.mouseY;
|
|
|
884 var container = this.cropperEl.getBoundingClientRect();
|
|
|
885 mouseX = mouseX - container.left;
|
|
|
886 mouseY = mouseY - container.top;
|
|
|
887 this.currentMove = {
|
|
|
888 offsetX: mouseX - this.box.x1,
|
|
|
889 offsetY: mouseY - this.box.y1
|
|
|
890 };
|
|
|
891 if (this.options.onCropStart !== null) {
|
|
|
892 this.options.onCropStart(this.getValue());
|
|
|
893 }
|
|
|
894 }
|
|
|
895 }, {
|
|
|
896 key: 'onRegionMoveMoving',
|
|
|
897 value: function onRegionMoveMoving(e) {
|
|
|
898 var _e$detail3 = e.detail,
|
|
|
899 mouseX = _e$detail3.mouseX,
|
|
|
900 mouseY = _e$detail3.mouseY;
|
|
|
901 var _currentMove = this.currentMove,
|
|
|
902 offsetX = _currentMove.offsetX,
|
|
|
903 offsetY = _currentMove.offsetY;
|
|
|
904 var container = this.cropperEl.getBoundingClientRect();
|
|
|
905 mouseX = mouseX - container.left;
|
|
|
906 mouseY = mouseY - container.top;
|
|
|
907 this.box.move(mouseX - offsetX, mouseY - offsetY);
|
|
|
908 if (this.box.x1 < 0) {
|
|
|
909 this.box.move(0, null);
|
|
|
910 }
|
|
|
911 if (this.box.x2 > container.width) {
|
|
|
912 this.box.move(container.width - this.box.width(), null);
|
|
|
913 }
|
|
|
914 if (this.box.y1 < 0) {
|
|
|
915 this.box.move(null, 0);
|
|
|
916 }
|
|
|
917 if (this.box.y2 > container.height) {
|
|
|
918 this.box.move(null, container.height - this.box.height());
|
|
|
919 }
|
|
|
920 this.redraw();
|
|
|
921 if (this.options.onCropMove !== null) {
|
|
|
922 this.options.onCropMove(this.getValue());
|
|
|
923 }
|
|
|
924 }
|
|
|
925 }, {
|
|
|
926 key: 'onRegionMoveEnd',
|
|
|
927 value: function onRegionMoveEnd(e) {
|
|
|
928 if (this.options.onCropEnd !== null) {
|
|
|
929 this.options.onCropEnd(this.getValue());
|
|
|
930 }
|
|
|
931 }
|
|
|
932 }, {
|
|
|
933 key: 'getValue',
|
|
|
934 value: function getValue() {
|
|
|
935 var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
|
936 if (mode === null) {
|
|
|
937 mode = this.options.returnMode;
|
|
|
938 }
|
|
|
939 if (mode == 'real') {
|
|
|
940 var actualWidth = this.imageEl.naturalWidth;
|
|
|
941 var actualHeight = this.imageEl.naturalHeight;
|
|
|
942 var _imageEl$getBoundingC = this.imageEl.getBoundingClientRect(),
|
|
|
943 elementWidth = _imageEl$getBoundingC.width,
|
|
|
944 elementHeight = _imageEl$getBoundingC.height;
|
|
|
945 var factorX = actualWidth / elementWidth;
|
|
|
946 var factorY = actualHeight / elementHeight;
|
|
|
947 return {
|
|
|
948 x: Math.round(this.box.x1 * factorX),
|
|
|
949 y: Math.round(this.box.y1 * factorY),
|
|
|
950 width: Math.round(this.box.width() * factorX),
|
|
|
951 height: Math.round(this.box.height() * factorY)
|
|
|
952 };
|
|
|
953 } else if (mode == 'ratio') {
|
|
|
954 var _imageEl$getBoundingC2 = this.imageEl.getBoundingClientRect(),
|
|
|
955 _elementWidth = _imageEl$getBoundingC2.width,
|
|
|
956 _elementHeight = _imageEl$getBoundingC2.height;
|
|
|
957 return {
|
|
|
958 x: round(this.box.x1 / _elementWidth, 3),
|
|
|
959 y: round(this.box.y1 / _elementHeight, 3),
|
|
|
960 width: round(this.box.width() / _elementWidth, 3),
|
|
|
961 height: round(this.box.height() / _elementHeight, 3)
|
|
|
962 };
|
|
|
963 } else if (mode == 'raw') {
|
|
|
964 return {
|
|
|
965 x: Math.round(this.box.x1),
|
|
|
966 y: Math.round(this.box.y1),
|
|
|
967 width: Math.round(this.box.width()),
|
|
|
968 height: Math.round(this.box.height())
|
|
|
969 };
|
|
|
970 }
|
|
|
971 }
|
|
|
972 }], [{
|
|
|
973 key: 'parseOptions',
|
|
|
974 value: function parseOptions(opts) {
|
|
|
975 var defaults$$1 = {
|
|
|
976 aspectRatio: null,
|
|
|
977 maxSize: { width: null, height: null },
|
|
|
978 minSize: { width: null, height: null },
|
|
|
979 startSize: { width: 100, height: 100, unit: '%' },
|
|
|
980 returnMode: 'real',
|
|
|
981 onInitialize: null,
|
|
|
982 onCropStart: null,
|
|
|
983 onCropMove: null,
|
|
|
984 onCropEnd: null
|
|
|
985 };
|
|
|
986 var aspectRatio = null;
|
|
|
987 if (opts.aspectRatio !== undefined) {
|
|
|
988 if (typeof opts.aspectRatio === 'number') {
|
|
|
989 aspectRatio = opts.aspectRatio;
|
|
|
990 } else if (opts.aspectRatio instanceof Array) {
|
|
|
991 aspectRatio = opts.aspectRatio[1] / opts.aspectRatio[0];
|
|
|
992 }
|
|
|
993 }
|
|
|
994 var maxSize = null;
|
|
|
995 if (opts.maxSize !== undefined && opts.maxSize !== null) {
|
|
|
996 maxSize = {
|
|
|
997 width: opts.maxSize[0] || null,
|
|
|
998 height: opts.maxSize[1] || null,
|
|
|
999 unit: opts.maxSize[2] || 'px'
|
|
|
1000 };
|
|
|
1001 }
|
|
|
1002 var minSize = null;
|
|
|
1003 if (opts.minSize !== undefined && opts.minSize !== null) {
|
|
|
1004 minSize = {
|
|
|
1005 width: opts.minSize[0] || null,
|
|
|
1006 height: opts.minSize[1] || null,
|
|
|
1007 unit: opts.minSize[2] || 'px'
|
|
|
1008 };
|
|
|
1009 }
|
|
|
1010 var startSize = null;
|
|
|
1011 if (opts.startSize !== undefined && opts.startSize !== null) {
|
|
|
1012 startSize = {
|
|
|
1013 width: opts.startSize[0] || null,
|
|
|
1014 height: opts.startSize[1] || null,
|
|
|
1015 unit: opts.startSize[2] || '%'
|
|
|
1016 };
|
|
|
1017 }
|
|
|
1018 var onInitialize = null;
|
|
|
1019 if (typeof opts.onInitialize === 'function') {
|
|
|
1020 onInitialize = opts.onInitialize;
|
|
|
1021 }
|
|
|
1022 var onCropStart = null;
|
|
|
1023 if (typeof opts.onCropStart === 'function') {
|
|
|
1024 onCropStart = opts.onCropStart;
|
|
|
1025 }
|
|
|
1026 var onCropEnd = null;
|
|
|
1027 if (typeof opts.onCropEnd === 'function') {
|
|
|
1028 onCropEnd = opts.onCropEnd;
|
|
|
1029 }
|
|
|
1030 var onCropMove = null;
|
|
|
1031 if (typeof opts.onUpdate === 'function') {
|
|
|
1032 console.warn('Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead.');
|
|
|
1033 onCropMove = opts.onUpdate;
|
|
|
1034 }
|
|
|
1035 if (typeof opts.onCropMove === 'function') {
|
|
|
1036 onCropMove = opts.onCropMove;
|
|
|
1037 }
|
|
|
1038 var returnMode = null;
|
|
|
1039 if (opts.returnMode !== undefined) {
|
|
|
1040 var s = opts.returnMode.toLowerCase();
|
|
|
1041 if (['real', 'ratio', 'raw'].indexOf(s) === -1) {
|
|
|
1042 throw "Invalid return mode.";
|
|
|
1043 }
|
|
|
1044 returnMode = s;
|
|
|
1045 }
|
|
|
1046 var convertToPixels = function convertToPixels(container) {
|
|
|
1047 var width = container.offsetWidth;
|
|
|
1048 var height = container.offsetHeight;
|
|
|
1049 var sizeKeys = ['maxSize', 'minSize', 'startSize'];
|
|
|
1050 for (var i = 0; i < sizeKeys.length; i++) {
|
|
|
1051 var key = sizeKeys[i];
|
|
|
1052 if (this[key] !== null) {
|
|
|
1053 if (this[key].unit == '%') {
|
|
|
1054 if (this[key].width !== null) {
|
|
|
1055 this[key].width = this[key].width / 100 * width;
|
|
|
1056 }
|
|
|
1057 if (this[key].height !== null) {
|
|
|
1058 this[key].height = this[key].height / 100 * height;
|
|
|
1059 }
|
|
|
1060 }
|
|
|
1061 delete this[key].unit;
|
|
|
1062 }
|
|
|
1063 }
|
|
|
1064 };
|
|
|
1065 var defaultValue = function defaultValue(v, d) {
|
|
|
1066 return v !== null ? v : d;
|
|
|
1067 };
|
|
|
1068 return {
|
|
|
1069 aspectRatio: defaultValue(aspectRatio, defaults$$1.aspectRatio),
|
|
|
1070 maxSize: defaultValue(maxSize, defaults$$1.maxSize),
|
|
|
1071 minSize: defaultValue(minSize, defaults$$1.minSize),
|
|
|
1072 startSize: defaultValue(startSize, defaults$$1.startSize),
|
|
|
1073 returnMode: defaultValue(returnMode, defaults$$1.returnMode),
|
|
|
1074 onInitialize: defaultValue(onInitialize, defaults$$1.onInitialize),
|
|
|
1075 onCropStart: defaultValue(onCropStart, defaults$$1.onCropStart),
|
|
|
1076 onCropMove: defaultValue(onCropMove, defaults$$1.onCropMove),
|
|
|
1077 onCropEnd: defaultValue(onCropEnd, defaults$$1.onCropEnd),
|
|
|
1078 convertToPixels: convertToPixels
|
|
|
1079 };
|
|
|
1080 }
|
|
|
1081 }]);
|
|
|
1082 return CropprCore;
|
|
|
1083 }();
|
|
|
1084 function round(value, decimals) {
|
|
|
1085 return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
|
|
|
1086 }
|
|
|
1087
|
|
|
1088 var Croppr$1 = function (_CropprCore) {
|
|
|
1089 inherits(Croppr, _CropprCore);
|
|
|
1090 /**
|
|
|
1091 * @constructor
|
|
|
1092 * Calls the CropprCore's constructor.
|
|
|
1093 */
|
|
|
1094 function Croppr(element, options) {
|
|
|
1095 var _deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
|
1096 classCallCheck(this, Croppr);
|
|
|
1097 return possibleConstructorReturn(this, (Croppr.__proto__ || Object.getPrototypeOf(Croppr)).call(this, element, options, _deferred));
|
|
|
1098 }
|
|
|
1099 /**
|
|
|
1100 * Gets the value of the crop region.
|
|
|
1101 * @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or
|
|
|
1102 * 'raw'.
|
|
|
1103 */
|
|
|
1104 createClass(Croppr, [{
|
|
|
1105 key: 'getValue',
|
|
|
1106 value: function getValue(mode) {
|
|
|
1107 return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'getValue', this).call(this, mode);
|
|
|
1108 }
|
|
|
1109 /**
|
|
|
1110 * Changes the image src.
|
|
|
1111 * @param {String} src
|
|
|
1112 */
|
|
|
1113 }, {
|
|
|
1114 key: 'setImage',
|
|
|
1115 value: function setImage(src) {
|
|
|
1116 return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'setImage', this).call(this, src);
|
|
|
1117 }
|
|
|
1118 }, {
|
|
|
1119 key: 'destroy',
|
|
|
1120 value: function destroy() {
|
|
|
1121 return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'destroy', this).call(this);
|
|
|
1122 }
|
|
|
1123 /**
|
|
|
1124 * Moves the crop region to a specified coordinate.
|
|
|
1125 * @param {Number} x
|
|
|
1126 * @param {Number} y
|
|
|
1127 */
|
|
|
1128 }, {
|
|
|
1129 key: 'moveTo',
|
|
|
1130 value: function moveTo(x, y) {
|
|
|
1131 this.box.move(x, y);
|
|
|
1132 this.redraw();
|
|
|
1133 if (this.options.onCropEnd !== null) {
|
|
|
1134 this.options.onCropEnd(this.getValue());
|
|
|
1135 }
|
|
|
1136 return this;
|
|
|
1137 }
|
|
|
1138 /**
|
|
|
1139 * Resizes the crop region to a specified width and height.
|
|
|
1140 * @param {Number} width
|
|
|
1141 * @param {Number} height
|
|
|
1142 * @param {Array} origin The origin point to resize from.
|
|
|
1143 * Defaults to [0.5, 0.5] (center).
|
|
|
1144 */
|
|
|
1145 }, {
|
|
|
1146 key: 'resizeTo',
|
|
|
1147 value: function resizeTo(width, height) {
|
|
|
1148 var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [.5, .5];
|
|
|
1149 this.box.resize(width, height, origin);
|
|
|
1150 this.redraw();
|
|
|
1151 if (this.options.onCropEnd !== null) {
|
|
|
1152 this.options.onCropEnd(this.getValue());
|
|
|
1153 }
|
|
|
1154 return this;
|
|
|
1155 }
|
|
|
1156 /**
|
|
|
1157 * Scale the crop region by a factor.
|
|
|
1158 * @param {Number} factor
|
|
|
1159 * @param {Array} origin The origin point to resize from.
|
|
|
1160 * Defaults to [0.5, 0.5] (center).
|
|
|
1161 */
|
|
|
1162 }, {
|
|
|
1163 key: 'scaleBy',
|
|
|
1164 value: function scaleBy(factor) {
|
|
|
1165 var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [.5, .5];
|
|
|
1166 this.box.scale(factor, origin);
|
|
|
1167 this.redraw();
|
|
|
1168 if (this.options.onCropEnd !== null) {
|
|
|
1169 this.options.onCropEnd(this.getValue());
|
|
|
1170 }
|
|
|
1171 return this;
|
|
|
1172 }
|
|
|
1173 }, {
|
|
|
1174 key: 'reset',
|
|
|
1175 value: function reset() {
|
|
|
1176 this.box = this.initializeBox(this.options);
|
|
|
1177 this.redraw();
|
|
|
1178 if (this.options.onCropEnd !== null) {
|
|
|
1179 this.options.onCropEnd(this.getValue());
|
|
|
1180 }
|
|
|
1181 return this;
|
|
|
1182 }
|
|
|
1183 }]);
|
|
|
1184 return Croppr;
|
|
|
1185 }(CropprCore);
|
|
|
1186
|
|
|
1187 return Croppr$1;
|
|
|
1188
|
|
|
1189 })));
|
