cropper_rails 1.0.2 → 1.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +6 -6
- data/VERSIONS.md +5 -0
- data/cropper_rails.gemspec +1 -1
- data/lib/cropper_rails/version.rb +3 -3
- data/vendor/assets/javascripts/cropper.js +268 -164
- data/vendor/assets/javascripts/jquery-cropper.js +11 -13
- data/vendor/assets/stylesheets/cropper.css +14 -14
- metadata +10 -12
- data/.rubocop.yml +0 -13
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 48b8a0acd1feb8f0d4d3670dbbf956ba773b2a3074a530a985fa5fdfb36592bd
|
4
|
+
data.tar.gz: 43a87fbb6ec30a28d4840d9e8652f45a0dd8b8a3c8fb165a263ccb3045d493b7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 795a70aa21f253873060f98e2ea8d0ea8be75383bdf6a41173a3d86b2b6671f335216cf501c2ec7460e0f4046074dea4b64b2fe24ca2fd4a94f0526fde24b8a6
|
7
|
+
data.tar.gz: a86588a59480a06fe27f094e417fb1518b4ea44284e0c554955f74de159d60b54b0e34113d3815d8e899eeaacda286011bf3ef6e8ca8e2e5a840803d611e1e51
|
data/LICENSE
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
MIT License
|
1
|
+
The MIT License (MIT)
|
2
2
|
|
3
|
-
Copyright
|
3
|
+
Copyright 2015-present Chen Fengyuan
|
4
4
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
9
|
copies of the Software, and to permit persons to whom the Software is
|
10
10
|
furnished to do so, subject to the following conditions:
|
11
11
|
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
13
|
-
copies or substantial portions of the Software.
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
14
|
|
15
15
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
16
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
17
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
-
SOFTWARE.
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/VERSIONS.md
CHANGED
@@ -2,6 +2,11 @@
|
|
2
2
|
|
3
3
|
| Gem | Cropper.js | jQuery Cropper |
|
4
4
|
|--------|------------|----------------|
|
5
|
+
| 1.1.4 | 1.5.11 | 1.0.1 |
|
6
|
+
| 1.1.3 | 1.5.11 | 1.0.1 |
|
7
|
+
| 1.1.2 | 1.5.10 | 1.0.1 |
|
8
|
+
| 1.1.1 | 1.5.9 | 1.0.1 |
|
9
|
+
| 1.1.0 | 1.5.6 | 1.0.1 |
|
5
10
|
| 1.0.2 | 1.4.3 | 1.0.0 |
|
6
11
|
| 1.0.1 | 1.4.2 | 1.0.0 |
|
7
12
|
| 1.0.0 | 1.4.1 | 1.0.0 |
|
data/cropper_rails.gemspec
CHANGED
@@ -1,20 +1,22 @@
|
|
1
1
|
/*!
|
2
|
-
* Cropper.js v1.
|
2
|
+
* Cropper.js v1.5.11
|
3
3
|
* https://fengyuanchen.github.io/cropperjs
|
4
4
|
*
|
5
5
|
* Copyright 2015-present Chen Fengyuan
|
6
6
|
* Released under the MIT license
|
7
7
|
*
|
8
|
-
* Date:
|
8
|
+
* Date: 2021-02-17T11:53:27.572Z
|
9
9
|
*/
|
10
10
|
|
11
11
|
(function (global, factory) {
|
12
12
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
13
13
|
typeof define === 'function' && define.amd ? define(factory) :
|
14
|
-
(global.Cropper = factory());
|
14
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Cropper = factory());
|
15
15
|
}(this, (function () { 'use strict';
|
16
16
|
|
17
17
|
function _typeof(obj) {
|
18
|
+
"@babel/helpers - typeof";
|
19
|
+
|
18
20
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
19
21
|
_typeof = function (obj) {
|
20
22
|
return typeof obj;
|
@@ -50,28 +52,92 @@
|
|
50
52
|
return Constructor;
|
51
53
|
}
|
52
54
|
|
53
|
-
function
|
54
|
-
|
55
|
+
function _defineProperty(obj, key, value) {
|
56
|
+
if (key in obj) {
|
57
|
+
Object.defineProperty(obj, key, {
|
58
|
+
value: value,
|
59
|
+
enumerable: true,
|
60
|
+
configurable: true,
|
61
|
+
writable: true
|
62
|
+
});
|
63
|
+
} else {
|
64
|
+
obj[key] = value;
|
65
|
+
}
|
66
|
+
|
67
|
+
return obj;
|
55
68
|
}
|
56
69
|
|
57
|
-
function
|
58
|
-
|
59
|
-
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
70
|
+
function ownKeys(object, enumerableOnly) {
|
71
|
+
var keys = Object.keys(object);
|
60
72
|
|
61
|
-
|
73
|
+
if (Object.getOwnPropertySymbols) {
|
74
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
75
|
+
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
76
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
77
|
+
});
|
78
|
+
keys.push.apply(keys, symbols);
|
62
79
|
}
|
80
|
+
|
81
|
+
return keys;
|
82
|
+
}
|
83
|
+
|
84
|
+
function _objectSpread2(target) {
|
85
|
+
for (var i = 1; i < arguments.length; i++) {
|
86
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
87
|
+
|
88
|
+
if (i % 2) {
|
89
|
+
ownKeys(Object(source), true).forEach(function (key) {
|
90
|
+
_defineProperty(target, key, source[key]);
|
91
|
+
});
|
92
|
+
} else if (Object.getOwnPropertyDescriptors) {
|
93
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
94
|
+
} else {
|
95
|
+
ownKeys(Object(source)).forEach(function (key) {
|
96
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
97
|
+
});
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
return target;
|
102
|
+
}
|
103
|
+
|
104
|
+
function _toConsumableArray(arr) {
|
105
|
+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
106
|
+
}
|
107
|
+
|
108
|
+
function _arrayWithoutHoles(arr) {
|
109
|
+
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
63
110
|
}
|
64
111
|
|
65
112
|
function _iterableToArray(iter) {
|
66
|
-
if (Symbol.iterator in Object(iter)
|
113
|
+
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
114
|
+
}
|
115
|
+
|
116
|
+
function _unsupportedIterableToArray(o, minLen) {
|
117
|
+
if (!o) return;
|
118
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
119
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
120
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
121
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
122
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
123
|
+
}
|
124
|
+
|
125
|
+
function _arrayLikeToArray(arr, len) {
|
126
|
+
if (len == null || len > arr.length) len = arr.length;
|
127
|
+
|
128
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
129
|
+
|
130
|
+
return arr2;
|
67
131
|
}
|
68
132
|
|
69
133
|
function _nonIterableSpread() {
|
70
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance");
|
134
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
71
135
|
}
|
72
136
|
|
73
|
-
var
|
74
|
-
var WINDOW =
|
137
|
+
var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
|
138
|
+
var WINDOW = IS_BROWSER ? window : {};
|
139
|
+
var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;
|
140
|
+
var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
|
75
141
|
var NAMESPACE = 'cropper'; // Actions
|
76
142
|
|
77
143
|
var ACTION_ALL = 'all';
|
@@ -107,20 +173,27 @@
|
|
107
173
|
var EVENT_CROP_MOVE = 'cropmove';
|
108
174
|
var EVENT_CROP_START = 'cropstart';
|
109
175
|
var EVENT_DBLCLICK = 'dblclick';
|
110
|
-
var
|
111
|
-
var
|
112
|
-
var
|
176
|
+
var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
|
177
|
+
var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
|
178
|
+
var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
|
179
|
+
var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
|
180
|
+
var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
|
181
|
+
var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
|
113
182
|
var EVENT_READY = 'ready';
|
114
183
|
var EVENT_RESIZE = 'resize';
|
115
|
-
var EVENT_WHEEL = 'wheel
|
184
|
+
var EVENT_WHEEL = 'wheel';
|
116
185
|
var EVENT_ZOOM = 'zoom'; // Mime types
|
117
186
|
|
118
187
|
var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps
|
119
188
|
|
120
|
-
var REGEXP_ACTIONS = /^
|
189
|
+
var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
|
121
190
|
var REGEXP_DATA_URL = /^data:/;
|
122
191
|
var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
|
123
|
-
var REGEXP_TAG_NAME = /^
|
192
|
+
var REGEXP_TAG_NAME = /^img|canvas$/i; // Misc
|
193
|
+
// Inspired by the default width and height of a canvas element.
|
194
|
+
|
195
|
+
var MIN_CONTAINER_WIDTH = 200;
|
196
|
+
var MIN_CONTAINER_HEIGHT = 100;
|
124
197
|
|
125
198
|
var DEFAULTS = {
|
126
199
|
// Define the view mode of the cropper
|
@@ -184,8 +257,8 @@
|
|
184
257
|
minCanvasHeight: 0,
|
185
258
|
minCropBoxWidth: 0,
|
186
259
|
minCropBoxHeight: 0,
|
187
|
-
minContainerWidth:
|
188
|
-
minContainerHeight:
|
260
|
+
minContainerWidth: MIN_CONTAINER_WIDTH,
|
261
|
+
minContainerHeight: MIN_CONTAINER_HEIGHT,
|
189
262
|
// Shortcuts of events
|
190
263
|
ready: null,
|
191
264
|
cropstart: null,
|
@@ -211,6 +284,15 @@
|
|
211
284
|
function isNumber(value) {
|
212
285
|
return typeof value === 'number' && !isNaN(value);
|
213
286
|
}
|
287
|
+
/**
|
288
|
+
* Check if the given value is a positive number.
|
289
|
+
* @param {*} value - The value to check.
|
290
|
+
* @returns {boolean} Returns `true` if the given value is a positive number, else `false`.
|
291
|
+
*/
|
292
|
+
|
293
|
+
var isPositiveNumber = function isPositiveNumber(value) {
|
294
|
+
return value > 0 && value < Infinity;
|
295
|
+
};
|
214
296
|
/**
|
215
297
|
* Check if the given value is undefined.
|
216
298
|
* @param {*} value - The value to check.
|
@@ -245,7 +327,7 @@
|
|
245
327
|
var _constructor = value.constructor;
|
246
328
|
var prototype = _constructor.prototype;
|
247
329
|
return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
|
248
|
-
} catch (
|
330
|
+
} catch (error) {
|
249
331
|
return false;
|
250
332
|
}
|
251
333
|
}
|
@@ -258,6 +340,16 @@
|
|
258
340
|
function isFunction(value) {
|
259
341
|
return typeof value === 'function';
|
260
342
|
}
|
343
|
+
var slice = Array.prototype.slice;
|
344
|
+
/**
|
345
|
+
* Convert array-like or iterable object to an array.
|
346
|
+
* @param {*} value - The value to convert.
|
347
|
+
* @returns {Array} Returns a new array.
|
348
|
+
*/
|
349
|
+
|
350
|
+
function toArray(value) {
|
351
|
+
return Array.from ? Array.from(value) : slice.call(value);
|
352
|
+
}
|
261
353
|
/**
|
262
354
|
* Iterate the given data.
|
263
355
|
* @param {*} data - The data to iterate.
|
@@ -270,14 +362,9 @@
|
|
270
362
|
if (Array.isArray(data) || isNumber(data.length)
|
271
363
|
/* array-like */
|
272
364
|
) {
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
for (i = 0; i < length; i += 1) {
|
277
|
-
if (callback.call(data, data[i], i, data) === false) {
|
278
|
-
break;
|
279
|
-
}
|
280
|
-
}
|
365
|
+
toArray(data).forEach(function (value, key) {
|
366
|
+
callback.call(data, value, key, data);
|
367
|
+
});
|
281
368
|
} else if (isObject(data)) {
|
282
369
|
Object.keys(data).forEach(function (key) {
|
283
370
|
callback.call(data, data[key], key, data);
|
@@ -289,32 +376,32 @@
|
|
289
376
|
}
|
290
377
|
/**
|
291
378
|
* Extend the given object.
|
292
|
-
* @param {*}
|
293
|
-
* @param {*} args - The rest objects
|
379
|
+
* @param {*} target - The target object to extend.
|
380
|
+
* @param {*} args - The rest objects for merging to the target object.
|
294
381
|
* @returns {Object} The extended object.
|
295
382
|
*/
|
296
383
|
|
297
|
-
var assign = Object.assign || function assign(
|
384
|
+
var assign = Object.assign || function assign(target) {
|
298
385
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
299
386
|
args[_key - 1] = arguments[_key];
|
300
387
|
}
|
301
388
|
|
302
|
-
if (isObject(
|
389
|
+
if (isObject(target) && args.length > 0) {
|
303
390
|
args.forEach(function (arg) {
|
304
391
|
if (isObject(arg)) {
|
305
392
|
Object.keys(arg).forEach(function (key) {
|
306
|
-
|
393
|
+
target[key] = arg[key];
|
307
394
|
});
|
308
395
|
}
|
309
396
|
});
|
310
397
|
}
|
311
398
|
|
312
|
-
return
|
399
|
+
return target;
|
313
400
|
};
|
314
401
|
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
|
315
402
|
/**
|
316
403
|
* Normalize decimal number.
|
317
|
-
* Check out {@link
|
404
|
+
* Check out {@link https://0.30000000000000004.com/}
|
318
405
|
* @param {number} value - The value to normalize.
|
319
406
|
* @param {number} [times=100000000000] - The times for normalizing.
|
320
407
|
* @returns {number} Returns the normalized number.
|
@@ -324,7 +411,7 @@
|
|
324
411
|
var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;
|
325
412
|
return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
|
326
413
|
}
|
327
|
-
var REGEXP_SUFFIX = /^
|
414
|
+
var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/;
|
328
415
|
/**
|
329
416
|
* Apply styles to the given element.
|
330
417
|
* @param {Element} element - The target element.
|
@@ -335,7 +422,7 @@
|
|
335
422
|
var style = element.style;
|
336
423
|
forEach(styles, function (value, property) {
|
337
424
|
if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
|
338
|
-
value
|
425
|
+
value = "".concat(value, "px");
|
339
426
|
}
|
340
427
|
|
341
428
|
style[property] = value;
|
@@ -435,15 +522,15 @@
|
|
435
522
|
removeClass(element, value);
|
436
523
|
}
|
437
524
|
}
|
438
|
-
var
|
525
|
+
var REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g;
|
439
526
|
/**
|
440
527
|
* Transform the given string from camelCase to kebab-case
|
441
528
|
* @param {string} value - The value to transform.
|
442
529
|
* @returns {string} The transformed value.
|
443
530
|
*/
|
444
531
|
|
445
|
-
function
|
446
|
-
return value.replace(
|
532
|
+
function toParamCase(value) {
|
533
|
+
return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase();
|
447
534
|
}
|
448
535
|
/**
|
449
536
|
* Get data from the given element.
|
@@ -461,7 +548,7 @@
|
|
461
548
|
return element.dataset[name];
|
462
549
|
}
|
463
550
|
|
464
|
-
return element.getAttribute("data-".concat(
|
551
|
+
return element.getAttribute("data-".concat(toParamCase(name)));
|
465
552
|
}
|
466
553
|
/**
|
467
554
|
* Set data to the given element.
|
@@ -476,7 +563,7 @@
|
|
476
563
|
} else if (element.dataset) {
|
477
564
|
element.dataset[name] = data;
|
478
565
|
} else {
|
479
|
-
element.setAttribute("data-".concat(
|
566
|
+
element.setAttribute("data-".concat(toParamCase(name)), data);
|
480
567
|
}
|
481
568
|
}
|
482
569
|
/**
|
@@ -489,18 +576,18 @@
|
|
489
576
|
if (isObject(element[name])) {
|
490
577
|
try {
|
491
578
|
delete element[name];
|
492
|
-
} catch (
|
579
|
+
} catch (error) {
|
493
580
|
element[name] = undefined;
|
494
581
|
}
|
495
582
|
} else if (element.dataset) {
|
496
583
|
// #128 Safari not allows to delete dataset property
|
497
584
|
try {
|
498
585
|
delete element.dataset[name];
|
499
|
-
} catch (
|
586
|
+
} catch (error) {
|
500
587
|
element.dataset[name] = undefined;
|
501
588
|
}
|
502
589
|
} else {
|
503
|
-
element.removeAttribute("data-".concat(
|
590
|
+
element.removeAttribute("data-".concat(toParamCase(name)));
|
504
591
|
}
|
505
592
|
}
|
506
593
|
var REGEXP_SPACES = /\s\s*/;
|
@@ -508,7 +595,7 @@
|
|
508
595
|
var onceSupported = function () {
|
509
596
|
var supported = false;
|
510
597
|
|
511
|
-
if (
|
598
|
+
if (IS_BROWSER) {
|
512
599
|
var once = false;
|
513
600
|
|
514
601
|
var listener = function listener() {};
|
@@ -647,7 +734,7 @@
|
|
647
734
|
};
|
648
735
|
}
|
649
736
|
var location = WINDOW.location;
|
650
|
-
var REGEXP_ORIGINS = /^(
|
737
|
+
var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
|
651
738
|
/**
|
652
739
|
* Check if the given URL is a cross origin URL.
|
653
740
|
* @param {string} url - The target URL.
|
@@ -656,7 +743,7 @@
|
|
656
743
|
|
657
744
|
function isCrossOriginURL(url) {
|
658
745
|
var parts = url.match(REGEXP_ORIGINS);
|
659
|
-
return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
|
746
|
+
return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
|
660
747
|
}
|
661
748
|
/**
|
662
749
|
* Add timestamp to the given URL.
|
@@ -717,8 +804,9 @@
|
|
717
804
|
*/
|
718
805
|
|
719
806
|
function getMaxZoomRatio(pointers) {
|
720
|
-
var pointers2 =
|
721
|
-
|
807
|
+
var pointers2 = _objectSpread2({}, pointers);
|
808
|
+
|
809
|
+
var maxRatio = 0;
|
722
810
|
forEach(pointers, function (pointer, pointerId) {
|
723
811
|
delete pointers2[pointerId];
|
724
812
|
forEach(pointers2, function (pointer2) {
|
@@ -729,13 +817,13 @@
|
|
729
817
|
var z1 = Math.sqrt(x1 * x1 + y1 * y1);
|
730
818
|
var z2 = Math.sqrt(x2 * x2 + y2 * y2);
|
731
819
|
var ratio = (z2 - z1) / z1;
|
732
|
-
|
820
|
+
|
821
|
+
if (Math.abs(ratio) > Math.abs(maxRatio)) {
|
822
|
+
maxRatio = ratio;
|
823
|
+
}
|
733
824
|
});
|
734
825
|
});
|
735
|
-
|
736
|
-
return Math.abs(a) < Math.abs(b);
|
737
|
-
});
|
738
|
-
return ratios[0];
|
826
|
+
return maxRatio;
|
739
827
|
}
|
740
828
|
/**
|
741
829
|
* Get a pointer from an event object.
|
@@ -751,7 +839,7 @@
|
|
751
839
|
endX: pageX,
|
752
840
|
endY: pageY
|
753
841
|
};
|
754
|
-
return endOnly ? end :
|
842
|
+
return endOnly ? end : _objectSpread2({
|
755
843
|
startX: pageX,
|
756
844
|
startY: pageY
|
757
845
|
}, end);
|
@@ -780,11 +868,6 @@
|
|
780
868
|
pageY: pageY
|
781
869
|
};
|
782
870
|
}
|
783
|
-
/**
|
784
|
-
* Check if the given value is a finite number.
|
785
|
-
*/
|
786
|
-
|
787
|
-
var isFinite = Number.isFinite || WINDOW.isFinite;
|
788
871
|
/**
|
789
872
|
* Get the max sizes in a rectangle under the given aspect ratio.
|
790
873
|
* @param {Object} data - The original sizes.
|
@@ -798,12 +881,10 @@
|
|
798
881
|
height = _ref4.height,
|
799
882
|
width = _ref4.width;
|
800
883
|
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';
|
884
|
+
var isValidWidth = isPositiveNumber(width);
|
885
|
+
var isValidHeight = isPositiveNumber(height);
|
801
886
|
|
802
|
-
|
803
|
-
return isFinite(value) && value > 0;
|
804
|
-
};
|
805
|
-
|
806
|
-
if (isValidNumber(width) && isValidNumber(height)) {
|
887
|
+
if (isValidWidth && isValidHeight) {
|
807
888
|
var adjustedWidth = height * aspectRatio;
|
808
889
|
|
809
890
|
if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) {
|
@@ -811,9 +892,9 @@
|
|
811
892
|
} else {
|
812
893
|
width = height * aspectRatio;
|
813
894
|
}
|
814
|
-
} else if (
|
895
|
+
} else if (isValidWidth) {
|
815
896
|
height = width / aspectRatio;
|
816
|
-
} else if (
|
897
|
+
} else if (isValidHeight) {
|
817
898
|
width = height * aspectRatio;
|
818
899
|
}
|
819
900
|
|
@@ -946,10 +1027,9 @@
|
|
946
1027
|
|
947
1028
|
function getStringFromCharCode(dataView, start, length) {
|
948
1029
|
var str = '';
|
949
|
-
var i;
|
950
1030
|
length += start;
|
951
1031
|
|
952
|
-
for (i = start; i < length; i += 1) {
|
1032
|
+
for (var i = start; i < length; i += 1) {
|
953
1033
|
str += fromCharCode(dataView.getUint8(i));
|
954
1034
|
}
|
955
1035
|
|
@@ -980,12 +1060,15 @@
|
|
980
1060
|
*/
|
981
1061
|
|
982
1062
|
function arrayBufferToDataURL(arrayBuffer, mimeType) {
|
983
|
-
var chunks = [];
|
1063
|
+
var chunks = []; // Chunk Typed Array for better performance (#435)
|
1064
|
+
|
984
1065
|
var chunkSize = 8192;
|
985
1066
|
var uint8 = new Uint8Array(arrayBuffer);
|
986
1067
|
|
987
1068
|
while (uint8.length > 0) {
|
988
|
-
|
1069
|
+
// XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9
|
1070
|
+
// eslint-disable-next-line prefer-spread
|
1071
|
+
chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));
|
989
1072
|
uint8 = uint8.subarray(chunkSize);
|
990
1073
|
}
|
991
1074
|
|
@@ -1065,7 +1148,7 @@
|
|
1065
1148
|
}
|
1066
1149
|
}
|
1067
1150
|
}
|
1068
|
-
} catch (
|
1151
|
+
} catch (error) {
|
1069
1152
|
orientation = 1;
|
1070
1153
|
}
|
1071
1154
|
|
@@ -1119,8 +1202,6 @@
|
|
1119
1202
|
case 8:
|
1120
1203
|
rotate = -90;
|
1121
1204
|
break;
|
1122
|
-
|
1123
|
-
default:
|
1124
1205
|
}
|
1125
1206
|
|
1126
1207
|
return {
|
@@ -1146,11 +1227,13 @@
|
|
1146
1227
|
options = this.options,
|
1147
1228
|
container = this.container,
|
1148
1229
|
cropper = this.cropper;
|
1230
|
+
var minWidth = Number(options.minContainerWidth);
|
1231
|
+
var minHeight = Number(options.minContainerHeight);
|
1149
1232
|
addClass(cropper, CLASS_HIDDEN);
|
1150
1233
|
removeClass(element, CLASS_HIDDEN);
|
1151
1234
|
var containerData = {
|
1152
|
-
width: Math.max(container.offsetWidth,
|
1153
|
-
height: Math.max(container.offsetHeight,
|
1235
|
+
width: Math.max(container.offsetWidth, minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH),
|
1236
|
+
height: Math.max(container.offsetHeight, minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT)
|
1154
1237
|
};
|
1155
1238
|
this.containerData = containerData;
|
1156
1239
|
setStyle(cropper, {
|
@@ -1191,14 +1274,15 @@
|
|
1191
1274
|
width: canvasWidth,
|
1192
1275
|
height: canvasHeight
|
1193
1276
|
};
|
1194
|
-
canvasData.left = (containerData.width - canvasWidth) / 2;
|
1195
|
-
canvasData.top = (containerData.height - canvasHeight) / 2;
|
1196
|
-
canvasData.oldLeft = canvasData.left;
|
1197
|
-
canvasData.oldTop = canvasData.top;
|
1198
1277
|
this.canvasData = canvasData;
|
1199
1278
|
this.limited = viewMode === 1 || viewMode === 2;
|
1200
1279
|
this.limitCanvas(true, true);
|
1201
|
-
|
1280
|
+
canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
|
1281
|
+
canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
|
1282
|
+
canvasData.left = (containerData.width - canvasData.width) / 2;
|
1283
|
+
canvasData.top = (containerData.height - canvasData.height) / 2;
|
1284
|
+
canvasData.oldLeft = canvasData.left;
|
1285
|
+
canvasData.oldTop = canvasData.top;
|
1202
1286
|
this.initialCanvasData = assign({}, canvasData);
|
1203
1287
|
},
|
1204
1288
|
limitCanvas: function limitCanvas(sizeLimited, positionLimited) {
|
@@ -1507,9 +1591,11 @@
|
|
1507
1591
|
|
1508
1592
|
var preview = {
|
1509
1593
|
initPreview: function initPreview() {
|
1510
|
-
var
|
1594
|
+
var element = this.element,
|
1595
|
+
crossOrigin = this.crossOrigin;
|
1511
1596
|
var preview = this.options.preview;
|
1512
1597
|
var url = crossOrigin ? this.crossOriginUrl : this.url;
|
1598
|
+
var alt = element.alt || 'The image to preview';
|
1513
1599
|
var image = document.createElement('img');
|
1514
1600
|
|
1515
1601
|
if (crossOrigin) {
|
@@ -1517,6 +1603,7 @@
|
|
1517
1603
|
}
|
1518
1604
|
|
1519
1605
|
image.src = url;
|
1606
|
+
image.alt = alt;
|
1520
1607
|
this.viewBox.appendChild(image);
|
1521
1608
|
this.viewBoxImage = image;
|
1522
1609
|
|
@@ -1527,7 +1614,7 @@
|
|
1527
1614
|
var previews = preview;
|
1528
1615
|
|
1529
1616
|
if (typeof preview === 'string') {
|
1530
|
-
previews =
|
1617
|
+
previews = element.ownerDocument.querySelectorAll(preview);
|
1531
1618
|
} else if (preview.querySelector) {
|
1532
1619
|
previews = [preview];
|
1533
1620
|
}
|
@@ -1547,6 +1634,7 @@
|
|
1547
1634
|
}
|
1548
1635
|
|
1549
1636
|
img.src = url;
|
1637
|
+
img.alt = alt;
|
1550
1638
|
/**
|
1551
1639
|
* Override img element styles
|
1552
1640
|
* Add `display:block` to avoid margin top issue
|
@@ -1655,7 +1743,10 @@
|
|
1655
1743
|
addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));
|
1656
1744
|
|
1657
1745
|
if (options.zoomable && options.zoomOnWheel) {
|
1658
|
-
addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this)
|
1746
|
+
addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {
|
1747
|
+
passive: false,
|
1748
|
+
capture: true
|
1749
|
+
});
|
1659
1750
|
}
|
1660
1751
|
|
1661
1752
|
if (options.toggleDragModeOnDblclick) {
|
@@ -1697,7 +1788,10 @@
|
|
1697
1788
|
removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);
|
1698
1789
|
|
1699
1790
|
if (options.zoomable && options.zoomOnWheel) {
|
1700
|
-
removeListener(cropper, EVENT_WHEEL, this.onWheel
|
1791
|
+
removeListener(cropper, EVENT_WHEEL, this.onWheel, {
|
1792
|
+
passive: false,
|
1793
|
+
capture: true
|
1794
|
+
});
|
1701
1795
|
}
|
1702
1796
|
|
1703
1797
|
if (options.toggleDragModeOnDblclick) {
|
@@ -1715,16 +1809,13 @@
|
|
1715
1809
|
|
1716
1810
|
var handlers = {
|
1717
1811
|
resize: function resize() {
|
1718
|
-
|
1719
|
-
container = this.container,
|
1720
|
-
containerData = this.containerData;
|
1721
|
-
var minContainerWidth = Number(options.minContainerWidth) || 200;
|
1722
|
-
var minContainerHeight = Number(options.minContainerHeight) || 100;
|
1723
|
-
|
1724
|
-
if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
|
1812
|
+
if (this.disabled) {
|
1725
1813
|
return;
|
1726
1814
|
}
|
1727
1815
|
|
1816
|
+
var options = this.options,
|
1817
|
+
container = this.container,
|
1818
|
+
containerData = this.containerData;
|
1728
1819
|
var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
|
1729
1820
|
|
1730
1821
|
if (ratio !== 1 || container.offsetHeight !== containerData.height) {
|
@@ -1755,7 +1846,7 @@
|
|
1755
1846
|
|
1756
1847
|
this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);
|
1757
1848
|
},
|
1758
|
-
wheel: function wheel(
|
1849
|
+
wheel: function wheel(event) {
|
1759
1850
|
var _this = this;
|
1760
1851
|
|
1761
1852
|
var ratio = Number(this.options.wheelZoomRatio) || 0.1;
|
@@ -1765,7 +1856,7 @@
|
|
1765
1856
|
return;
|
1766
1857
|
}
|
1767
1858
|
|
1768
|
-
|
1859
|
+
event.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21)
|
1769
1860
|
|
1770
1861
|
if (this.wheeling) {
|
1771
1862
|
return;
|
@@ -1776,18 +1867,24 @@
|
|
1776
1867
|
_this.wheeling = false;
|
1777
1868
|
}, 50);
|
1778
1869
|
|
1779
|
-
if (
|
1780
|
-
delta =
|
1781
|
-
} else if (
|
1782
|
-
delta = -
|
1783
|
-
} else if (
|
1784
|
-
delta =
|
1870
|
+
if (event.deltaY) {
|
1871
|
+
delta = event.deltaY > 0 ? 1 : -1;
|
1872
|
+
} else if (event.wheelDelta) {
|
1873
|
+
delta = -event.wheelDelta / 120;
|
1874
|
+
} else if (event.detail) {
|
1875
|
+
delta = event.detail > 0 ? 1 : -1;
|
1785
1876
|
}
|
1786
1877
|
|
1787
|
-
this.zoom(-delta * ratio,
|
1878
|
+
this.zoom(-delta * ratio, event);
|
1788
1879
|
},
|
1789
|
-
cropStart: function cropStart(
|
1790
|
-
|
1880
|
+
cropStart: function cropStart(event) {
|
1881
|
+
var buttons = event.buttons,
|
1882
|
+
button = event.button;
|
1883
|
+
|
1884
|
+
if (this.disabled // Handle mouse event and pointer event and ignore touch event
|
1885
|
+
|| (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && ( // No primary button (Usually the left button)
|
1886
|
+
isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 // Open context menu
|
1887
|
+
|| event.ctrlKey)) {
|
1791
1888
|
return;
|
1792
1889
|
}
|
1793
1890
|
|
@@ -1795,20 +1892,20 @@
|
|
1795
1892
|
pointers = this.pointers;
|
1796
1893
|
var action;
|
1797
1894
|
|
1798
|
-
if (
|
1895
|
+
if (event.changedTouches) {
|
1799
1896
|
// Handle touch event
|
1800
|
-
forEach(
|
1897
|
+
forEach(event.changedTouches, function (touch) {
|
1801
1898
|
pointers[touch.identifier] = getPointer(touch);
|
1802
1899
|
});
|
1803
1900
|
} else {
|
1804
1901
|
// Handle mouse event and pointer event
|
1805
|
-
pointers[
|
1902
|
+
pointers[event.pointerId || 0] = getPointer(event);
|
1806
1903
|
}
|
1807
1904
|
|
1808
1905
|
if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {
|
1809
1906
|
action = ACTION_ZOOM;
|
1810
1907
|
} else {
|
1811
|
-
action = getData(
|
1908
|
+
action = getData(event.target, DATA_ACTION);
|
1812
1909
|
}
|
1813
1910
|
|
1814
1911
|
if (!REGEXP_ACTIONS.test(action)) {
|
@@ -1816,14 +1913,14 @@
|
|
1816
1913
|
}
|
1817
1914
|
|
1818
1915
|
if (dispatchEvent(this.element, EVENT_CROP_START, {
|
1819
|
-
originalEvent:
|
1916
|
+
originalEvent: event,
|
1820
1917
|
action: action
|
1821
1918
|
}) === false) {
|
1822
1919
|
return;
|
1823
1920
|
} // This line is required for preventing page zooming in iOS browsers
|
1824
1921
|
|
1825
1922
|
|
1826
|
-
|
1923
|
+
event.preventDefault();
|
1827
1924
|
this.action = action;
|
1828
1925
|
this.cropping = false;
|
1829
1926
|
|
@@ -1832,7 +1929,7 @@
|
|
1832
1929
|
addClass(this.dragBox, CLASS_MODAL);
|
1833
1930
|
}
|
1834
1931
|
},
|
1835
|
-
cropMove: function cropMove(
|
1932
|
+
cropMove: function cropMove(event) {
|
1836
1933
|
var action = this.action;
|
1837
1934
|
|
1838
1935
|
if (this.disabled || !action) {
|
@@ -1840,27 +1937,27 @@
|
|
1840
1937
|
}
|
1841
1938
|
|
1842
1939
|
var pointers = this.pointers;
|
1843
|
-
|
1940
|
+
event.preventDefault();
|
1844
1941
|
|
1845
1942
|
if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
|
1846
|
-
originalEvent:
|
1943
|
+
originalEvent: event,
|
1847
1944
|
action: action
|
1848
1945
|
}) === false) {
|
1849
1946
|
return;
|
1850
1947
|
}
|
1851
1948
|
|
1852
|
-
if (
|
1853
|
-
forEach(
|
1949
|
+
if (event.changedTouches) {
|
1950
|
+
forEach(event.changedTouches, function (touch) {
|
1854
1951
|
// The first parameter should not be undefined (#432)
|
1855
1952
|
assign(pointers[touch.identifier] || {}, getPointer(touch, true));
|
1856
1953
|
});
|
1857
1954
|
} else {
|
1858
|
-
assign(pointers[
|
1955
|
+
assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));
|
1859
1956
|
}
|
1860
1957
|
|
1861
|
-
this.change(
|
1958
|
+
this.change(event);
|
1862
1959
|
},
|
1863
|
-
cropEnd: function cropEnd(
|
1960
|
+
cropEnd: function cropEnd(event) {
|
1864
1961
|
if (this.disabled) {
|
1865
1962
|
return;
|
1866
1963
|
}
|
@@ -1868,19 +1965,19 @@
|
|
1868
1965
|
var action = this.action,
|
1869
1966
|
pointers = this.pointers;
|
1870
1967
|
|
1871
|
-
if (
|
1872
|
-
forEach(
|
1968
|
+
if (event.changedTouches) {
|
1969
|
+
forEach(event.changedTouches, function (touch) {
|
1873
1970
|
delete pointers[touch.identifier];
|
1874
1971
|
});
|
1875
1972
|
} else {
|
1876
|
-
delete pointers[
|
1973
|
+
delete pointers[event.pointerId || 0];
|
1877
1974
|
}
|
1878
1975
|
|
1879
1976
|
if (!action) {
|
1880
1977
|
return;
|
1881
1978
|
}
|
1882
1979
|
|
1883
|
-
|
1980
|
+
event.preventDefault();
|
1884
1981
|
|
1885
1982
|
if (!Object.keys(pointers).length) {
|
1886
1983
|
this.action = '';
|
@@ -1892,14 +1989,14 @@
|
|
1892
1989
|
}
|
1893
1990
|
|
1894
1991
|
dispatchEvent(this.element, EVENT_CROP_END, {
|
1895
|
-
originalEvent:
|
1992
|
+
originalEvent: event,
|
1896
1993
|
action: action
|
1897
1994
|
});
|
1898
1995
|
}
|
1899
1996
|
};
|
1900
1997
|
|
1901
1998
|
var change = {
|
1902
|
-
change: function change(
|
1999
|
+
change: function change(event) {
|
1903
2000
|
var options = this.options,
|
1904
2001
|
canvasData = this.canvasData,
|
1905
2002
|
containerData = this.containerData,
|
@@ -1920,7 +2017,7 @@
|
|
1920
2017
|
var renderable = true;
|
1921
2018
|
var offset; // Locking aspect ratio in "free mode" by holding shift key
|
1922
2019
|
|
1923
|
-
if (!aspectRatio &&
|
2020
|
+
if (!aspectRatio && event.shiftKey) {
|
1924
2021
|
aspectRatio = width && height ? width / height : 1;
|
1925
2022
|
}
|
1926
2023
|
|
@@ -1966,8 +2063,6 @@
|
|
1966
2063
|
}
|
1967
2064
|
|
1968
2065
|
break;
|
1969
|
-
|
1970
|
-
default:
|
1971
2066
|
}
|
1972
2067
|
};
|
1973
2068
|
|
@@ -2293,7 +2388,7 @@
|
|
2293
2388
|
// Zoom canvas
|
2294
2389
|
|
2295
2390
|
case ACTION_ZOOM:
|
2296
|
-
this.zoom(getMaxZoomRatio(pointers),
|
2391
|
+
this.zoom(getMaxZoomRatio(pointers), event);
|
2297
2392
|
renderable = false;
|
2298
2393
|
break;
|
2299
2394
|
// Create crop box
|
@@ -2332,8 +2427,6 @@
|
|
2332
2427
|
}
|
2333
2428
|
|
2334
2429
|
break;
|
2335
|
-
|
2336
|
-
default:
|
2337
2430
|
}
|
2338
2431
|
|
2339
2432
|
if (renderable) {
|
@@ -2685,7 +2778,7 @@
|
|
2685
2778
|
* @param {boolean} [rounded=false] - Indicate if round the data values or not.
|
2686
2779
|
* @returns {Object} The result cropped data.
|
2687
2780
|
*/
|
2688
|
-
getData: function getData
|
2781
|
+
getData: function getData() {
|
2689
2782
|
var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
2690
2783
|
var options = this.options,
|
2691
2784
|
imageData = this.imageData,
|
@@ -2741,7 +2834,7 @@
|
|
2741
2834
|
* @param {Object} data - The new data.
|
2742
2835
|
* @returns {Cropper} this
|
2743
2836
|
*/
|
2744
|
-
setData: function setData
|
2837
|
+
setData: function setData(data) {
|
2745
2838
|
var options = this.options,
|
2746
2839
|
imageData = this.imageData,
|
2747
2840
|
canvasData = this.canvasData;
|
@@ -3115,9 +3208,7 @@
|
|
3115
3208
|
|
3116
3209
|
var AnotherCropper = WINDOW.Cropper;
|
3117
3210
|
|
3118
|
-
var Cropper =
|
3119
|
-
/*#__PURE__*/
|
3120
|
-
function () {
|
3211
|
+
var Cropper = /*#__PURE__*/function () {
|
3121
3212
|
/**
|
3122
3213
|
* Create a new Cropper.
|
3123
3214
|
* @param {Element} element - The target element for cropping.
|
@@ -3166,7 +3257,7 @@
|
|
3166
3257
|
|
3167
3258
|
if (!url) {
|
3168
3259
|
return;
|
3169
|
-
} // e.g.: "
|
3260
|
+
} // e.g.: "https://example.com/img/picture.jpg"
|
3170
3261
|
|
3171
3262
|
|
3172
3263
|
url = element.src;
|
@@ -3198,28 +3289,38 @@
|
|
3198
3289
|
if (!options.checkOrientation || !window.ArrayBuffer) {
|
3199
3290
|
this.clone();
|
3200
3291
|
return;
|
3201
|
-
} //
|
3292
|
+
} // Detect the mime type of the image directly if it is a Data URL
|
3202
3293
|
|
3203
3294
|
|
3204
3295
|
if (REGEXP_DATA_URL.test(url)) {
|
3296
|
+
// Read ArrayBuffer from Data URL of JPEG images directly for better performance
|
3205
3297
|
if (REGEXP_DATA_URL_JPEG.test(url)) {
|
3206
3298
|
this.read(dataURLToArrayBuffer(url));
|
3207
3299
|
} else {
|
3300
|
+
// Only a JPEG image may contains Exif Orientation information,
|
3301
|
+
// the rest types of Data URLs are not necessary to check orientation at all.
|
3208
3302
|
this.clone();
|
3209
3303
|
}
|
3210
3304
|
|
3211
3305
|
return;
|
3212
|
-
}
|
3306
|
+
} // 1. Detect the mime type of the image by a XMLHttpRequest.
|
3307
|
+
// 2. Load the image as ArrayBuffer for reading orientation if its a JPEG image.
|
3308
|
+
|
3213
3309
|
|
3214
3310
|
var xhr = new XMLHttpRequest();
|
3215
3311
|
var clone = this.clone.bind(this);
|
3216
3312
|
this.reloading = true;
|
3217
|
-
this.xhr = xhr;
|
3218
|
-
|
3313
|
+
this.xhr = xhr; // 1. Cross origin requests are only supported for protocol schemes:
|
3314
|
+
// http, https, data, chrome, chrome-extension.
|
3315
|
+
// 2. Access to XMLHttpRequest from a Data URL will be blocked by CORS policy
|
3316
|
+
// in some browsers as IE11 and Safari.
|
3317
|
+
|
3219
3318
|
xhr.onabort = clone;
|
3220
3319
|
xhr.onerror = clone;
|
3320
|
+
xhr.ontimeout = clone;
|
3221
3321
|
|
3222
3322
|
xhr.onprogress = function () {
|
3323
|
+
// Abort the request directly if it not a JPEG image for better performance
|
3223
3324
|
if (xhr.getResponseHeader('content-type') !== MIME_TYPE_JPEG) {
|
3224
3325
|
xhr.abort();
|
3225
3326
|
}
|
@@ -3237,9 +3338,10 @@
|
|
3237
3338
|
|
3238
3339
|
if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {
|
3239
3340
|
url = addTimestamp(url);
|
3240
|
-
}
|
3341
|
+
} // The third parameter is required for avoiding side-effect (#682)
|
3342
|
+
|
3241
3343
|
|
3242
|
-
xhr.open('GET', url);
|
3344
|
+
xhr.open('GET', url, true);
|
3243
3345
|
xhr.responseType = 'arraybuffer';
|
3244
3346
|
xhr.withCredentials = element.crossOrigin === 'use-credentials';
|
3245
3347
|
xhr.send();
|
@@ -3248,15 +3350,16 @@
|
|
3248
3350
|
key: "read",
|
3249
3351
|
value: function read(arrayBuffer) {
|
3250
3352
|
var options = this.options,
|
3251
|
-
imageData = this.imageData;
|
3353
|
+
imageData = this.imageData; // Reset the orientation value to its default value 1
|
3354
|
+
// as some iOS browsers will render image with its orientation
|
3355
|
+
|
3252
3356
|
var orientation = resetAndGetOrientation(arrayBuffer);
|
3253
3357
|
var rotate = 0;
|
3254
3358
|
var scaleX = 1;
|
3255
3359
|
var scaleY = 1;
|
3256
3360
|
|
3257
3361
|
if (orientation > 1) {
|
3258
|
-
// Generate a new
|
3259
|
-
// as some iOS browsers will render image with its orientation
|
3362
|
+
// Generate a new URL which has the default orientation value
|
3260
3363
|
this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
|
3261
3364
|
|
3262
3365
|
var _parseOrientation = parseOrientation(orientation);
|
@@ -3282,19 +3385,16 @@
|
|
3282
3385
|
value: function clone() {
|
3283
3386
|
var element = this.element,
|
3284
3387
|
url = this.url;
|
3285
|
-
var crossOrigin;
|
3286
|
-
var crossOriginUrl;
|
3388
|
+
var crossOrigin = element.crossOrigin;
|
3389
|
+
var crossOriginUrl = url;
|
3287
3390
|
|
3288
3391
|
if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
|
3289
|
-
crossOrigin
|
3392
|
+
if (!crossOrigin) {
|
3393
|
+
crossOrigin = 'anonymous';
|
3394
|
+
} // Bust cache when there is not a "crossOrigin" property (#519)
|
3290
3395
|
|
3291
|
-
if (crossOrigin) {
|
3292
|
-
crossOriginUrl = url;
|
3293
|
-
} else {
|
3294
|
-
crossOrigin = 'anonymous'; // Bust cache when there is not a "crossOrigin" property
|
3295
3396
|
|
3296
|
-
|
3297
|
-
}
|
3397
|
+
crossOriginUrl = addTimestamp(url);
|
3298
3398
|
}
|
3299
3399
|
|
3300
3400
|
this.crossOrigin = crossOrigin;
|
@@ -3306,6 +3406,7 @@
|
|
3306
3406
|
}
|
3307
3407
|
|
3308
3408
|
image.src = crossOriginUrl || url;
|
3409
|
+
image.alt = element.alt || 'The image to crop';
|
3309
3410
|
this.image = image;
|
3310
3411
|
image.onload = this.start.bind(this);
|
3311
3412
|
image.onerror = this.stop.bind(this);
|
@@ -3317,11 +3418,13 @@
|
|
3317
3418
|
value: function start() {
|
3318
3419
|
var _this2 = this;
|
3319
3420
|
|
3320
|
-
var image = this.
|
3421
|
+
var image = this.image;
|
3321
3422
|
image.onload = null;
|
3322
3423
|
image.onerror = null;
|
3323
|
-
this.sizing = true;
|
3324
|
-
|
3424
|
+
this.sizing = true; // Match all browsers that use WebKit as the layout engine in iOS devices,
|
3425
|
+
// such as Safari for iOS, Chrome for iOS, and in-app browsers.
|
3426
|
+
|
3427
|
+
var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent);
|
3325
3428
|
|
3326
3429
|
var done = function done(naturalWidth, naturalHeight) {
|
3327
3430
|
assign(_this2.imageData, {
|
@@ -3329,14 +3432,15 @@
|
|
3329
3432
|
naturalHeight: naturalHeight,
|
3330
3433
|
aspectRatio: naturalWidth / naturalHeight
|
3331
3434
|
});
|
3435
|
+
_this2.initialImageData = assign({}, _this2.imageData);
|
3332
3436
|
_this2.sizing = false;
|
3333
3437
|
_this2.sized = true;
|
3334
3438
|
|
3335
3439
|
_this2.build();
|
3336
|
-
}; //
|
3440
|
+
}; // Most modern browsers (excepts iOS WebKit)
|
3337
3441
|
|
3338
3442
|
|
3339
|
-
if (image.naturalWidth && !
|
3443
|
+
if (image.naturalWidth && !isIOSWebKit) {
|
3340
3444
|
done(image.naturalWidth, image.naturalHeight);
|
3341
3445
|
return;
|
3342
3446
|
}
|
@@ -3348,15 +3452,15 @@
|
|
3348
3452
|
sizingImage.onload = function () {
|
3349
3453
|
done(sizingImage.width, sizingImage.height);
|
3350
3454
|
|
3351
|
-
if (!
|
3455
|
+
if (!isIOSWebKit) {
|
3352
3456
|
body.removeChild(sizingImage);
|
3353
3457
|
}
|
3354
3458
|
};
|
3355
3459
|
|
3356
|
-
sizingImage.src = image.src; // iOS
|
3460
|
+
sizingImage.src = image.src; // iOS WebKit will convert the image automatically
|
3357
3461
|
// with its orientation once append it into DOM (#279)
|
3358
3462
|
|
3359
|
-
if (!
|
3463
|
+
if (!isIOSWebKit) {
|
3360
3464
|
sizingImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;';
|
3361
3465
|
body.appendChild(sizingImage);
|
3362
3466
|
}
|