cropper_rails 1.0.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
}
|