cropper_rails 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/ISSUE_TEMPLATE/bug_report.md +24 -0
- data/.github/ISSUE_TEMPLATE/feature_request.md +17 -0
- data/CODE_OF_CONDUCT.md +37 -59
- data/CONTRIBUTING.md +11 -0
- data/LICENSE +21 -0
- data/README.md +2 -2
- data/VERSIONS.md +1 -0
- data/lib/cropper_rails/version.rb +3 -3
- data/vendor/assets/javascripts/cropper.js +324 -532
- data/vendor/assets/stylesheets/cropper.css +2 -2
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4844080c44e64e78225fbbcbc9130f327ef3f07f835bc7a00074d218940fdbe7
|
|
4
|
+
data.tar.gz: 9679739fb40b7f96480ca411a53afa6abcb0a92364fa3ea7db572508c35a873d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ab94defbf2d9129e4dabc30a79c72264a9e8b1c5314a8123765c0ac9d1a0bb1627da02336ffcc4f0a8e7e5fb74e18263269a986eccc19564b3146fd37832823c
|
|
7
|
+
data.tar.gz: e3cb6c68edaa47f92ddf7f43c45a904ff3af127aacd0006c015d92b53106dd6987ef0e102aa8ac02eb796193157055cf07cb79b441583f10b95951d83a30790e
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Bug report
|
|
3
|
+
about: Create a report to help us improve
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
**Describe the bug**
|
|
8
|
+
A clear and concise description of what the bug is.
|
|
9
|
+
|
|
10
|
+
**To Reproduce**
|
|
11
|
+
Steps to reproduce the behavior:
|
|
12
|
+
1. Go to '...'
|
|
13
|
+
2. Click on '....'
|
|
14
|
+
3. Scroll down to '....'
|
|
15
|
+
4. See error
|
|
16
|
+
|
|
17
|
+
**Expected behavior**
|
|
18
|
+
A clear and concise description of what you expected to happen.
|
|
19
|
+
|
|
20
|
+
**Screenshots**
|
|
21
|
+
If applicable, add screenshots to help explain your problem.
|
|
22
|
+
|
|
23
|
+
**Additional context**
|
|
24
|
+
Add any other context about the problem here.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Feature request
|
|
3
|
+
about: Suggest an idea for this project
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
**Is your feature request related to a problem? Please describe.**
|
|
8
|
+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
|
9
|
+
|
|
10
|
+
**Describe the solution you'd like**
|
|
11
|
+
A clear and concise description of what you want to happen.
|
|
12
|
+
|
|
13
|
+
**Describe alternatives you've considered**
|
|
14
|
+
A clear and concise description of any alternative solutions or features you've considered.
|
|
15
|
+
|
|
16
|
+
**Additional context**
|
|
17
|
+
Add any other context or screenshots about the feature request here.
|
data/CODE_OF_CONDUCT.md
CHANGED
|
@@ -1,74 +1,52 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Code of Merit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
1. The project creators, lead developers, core team, constitute
|
|
4
|
+
the managing members of the project and have final say in every decision
|
|
5
|
+
of the project, technical or otherwise, including overruling previous decisions.
|
|
6
|
+
There are no limitations to this decisional power.
|
|
4
7
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
our community a harassment-free experience for everyone, regardless of age, body
|
|
8
|
-
size, disability, ethnicity, gender identity and expression, level of experience,
|
|
9
|
-
nationality, personal appearance, race, religion, or sexual identity and
|
|
10
|
-
orientation.
|
|
8
|
+
2. Contributions are an expected result of your membership on the project.
|
|
9
|
+
Don't expect others to do your work or help you with your work forever.
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
3. All members have the same opportunities to seek any challenge they want
|
|
12
|
+
within the project.
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
4. Authority or position in the project will be proportional
|
|
15
|
+
to the accrued contribution. Seniority must be earned.
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
* Gracefully accepting constructive criticism
|
|
20
|
-
* Focusing on what is best for the community
|
|
21
|
-
* Showing empathy towards other community members
|
|
17
|
+
5. Software is evolutive: the better implementations must supersede lesser
|
|
18
|
+
implementations. Technical advantage is the primary evaluation metric.
|
|
22
19
|
|
|
23
|
-
|
|
20
|
+
6. This is a space for technical prowess; topics outside of the project
|
|
21
|
+
will not be tolerated.
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
* Trolling, insulting/derogatory comments, and personal or political attacks
|
|
28
|
-
* Public or private harassment
|
|
29
|
-
* Publishing others' private information, such as a physical or electronic
|
|
30
|
-
address, without explicit permission
|
|
31
|
-
* Other conduct which could reasonably be considered inappropriate in a
|
|
32
|
-
professional setting
|
|
23
|
+
7. Non technical conflicts will be discussed in a separate space. Disruption
|
|
24
|
+
of the project will not be allowed.
|
|
33
25
|
|
|
34
|
-
|
|
26
|
+
8. Individual characteristics, including but not limited to,
|
|
27
|
+
body, sex, sexual preference, race, language, religion, nationality,
|
|
28
|
+
or political preferences are irrelevant in the scope of the project and
|
|
29
|
+
will not be taken into account concerning your value or that of your contribution
|
|
30
|
+
to the project.
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
behavior and are expected to take appropriate and fair corrective action in
|
|
38
|
-
response to any instances of unacceptable behavior.
|
|
32
|
+
9. Discuss or debate the idea, not the person.
|
|
39
33
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
permanently any contributor for other behaviors that they deem inappropriate,
|
|
44
|
-
threatening, offensive, or harmful.
|
|
34
|
+
10. There is no room for ambiguity: Ambiguity will be met with questioning;
|
|
35
|
+
further ambiguity will be met with silence. It is the responsibility
|
|
36
|
+
of the originator to provide requested context.
|
|
45
37
|
|
|
46
|
-
|
|
38
|
+
11. If something is illegal outside the scope of the project, it is illegal
|
|
39
|
+
in the scope of the project. This Code of Merit does not take precedence over
|
|
40
|
+
governing law.
|
|
47
41
|
|
|
48
|
-
This Code of
|
|
49
|
-
|
|
50
|
-
representing a project or community include using an official project e-mail
|
|
51
|
-
address, posting via an official social media account, or acting as an appointed
|
|
52
|
-
representative at an online or offline event. Representation of a project may be
|
|
53
|
-
further defined and clarified by project maintainers.
|
|
42
|
+
12. This Code of Merit governs the technical procedures of the project not the
|
|
43
|
+
activities outside of it.
|
|
54
44
|
|
|
55
|
-
|
|
45
|
+
13. Participation on the project equates to agreement of this Code of Merit.
|
|
56
46
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
obligated to maintain confidentiality with regard to the reporter of an incident.
|
|
62
|
-
Further details of specific enforcement policies may be posted separately.
|
|
47
|
+
14. No objectives beyond the stated objectives of this project are relevant
|
|
48
|
+
to the project. Any intent to deviate the project from its original purpose
|
|
49
|
+
of existence will constitute grounds for remedial action which may include
|
|
50
|
+
expulsion from the project.
|
|
63
51
|
|
|
64
|
-
|
|
65
|
-
faith may face temporary or permanent repercussions as determined by other
|
|
66
|
-
members of the project's leadership.
|
|
67
|
-
|
|
68
|
-
## Attribution
|
|
69
|
-
|
|
70
|
-
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
|
71
|
-
available at [http://contributor-covenant.org/version/1/4][version]
|
|
72
|
-
|
|
73
|
-
[homepage]: http://contributor-covenant.org
|
|
74
|
-
[version]: http://contributor-covenant.org/version/1/4/
|
|
52
|
+
This document is the Code of Merit (http://code-of-merit.org), version 1.0.
|
data/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
## Contributing
|
|
2
|
+
|
|
3
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/D1ceWard/cropper_rails. By contributing you agree to abide by the Code of Merit.
|
|
4
|
+
|
|
5
|
+
Example :
|
|
6
|
+
|
|
7
|
+
1. Fork it
|
|
8
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
9
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
|
10
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
|
11
|
+
5. Create new Pull Request
|
data/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Fabien LEFEBVRE
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
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 THE
|
|
21
|
+
SOFTWARE.
|
data/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Cropper for Rails
|
|
2
|
-
[](https://badge.fury.io/rb/cropper_rails)
|
|
3
3
|
[](https://github.com/D1ceWard/jquery-cropper-rails/graphs/commit-activity)
|
|
4
4
|
|
|
5
5
|
|
|
@@ -35,7 +35,7 @@ Add to your `app/assets/stylesheets/application.css`:
|
|
|
35
35
|
|
|
36
36
|
## Contributing
|
|
37
37
|
|
|
38
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/D1ceWard/cropper_rails.
|
|
38
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/D1ceWard/cropper_rails. By contributing you agree to abide by the Code of Merit.
|
|
39
39
|
|
|
40
40
|
## Code of Conduct
|
|
41
41
|
|
data/VERSIONS.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cropper.js v1.4.
|
|
2
|
+
* Cropper.js v1.4.2
|
|
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: 2018-
|
|
8
|
+
* Date: 2018-10-15T13:27:01.969Z
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
(function (global, factory) {
|
|
@@ -14,11 +14,66 @@
|
|
|
14
14
|
(global.Cropper = factory());
|
|
15
15
|
}(this, (function () { 'use strict';
|
|
16
16
|
|
|
17
|
+
function _typeof(obj) {
|
|
18
|
+
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
19
|
+
_typeof = function (obj) {
|
|
20
|
+
return typeof obj;
|
|
21
|
+
};
|
|
22
|
+
} else {
|
|
23
|
+
_typeof = function (obj) {
|
|
24
|
+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return _typeof(obj);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function _classCallCheck(instance, Constructor) {
|
|
32
|
+
if (!(instance instanceof Constructor)) {
|
|
33
|
+
throw new TypeError("Cannot call a class as a function");
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function _defineProperties(target, props) {
|
|
38
|
+
for (var i = 0; i < props.length; i++) {
|
|
39
|
+
var descriptor = props[i];
|
|
40
|
+
descriptor.enumerable = descriptor.enumerable || false;
|
|
41
|
+
descriptor.configurable = true;
|
|
42
|
+
if ("value" in descriptor) descriptor.writable = true;
|
|
43
|
+
Object.defineProperty(target, descriptor.key, descriptor);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function _createClass(Constructor, protoProps, staticProps) {
|
|
48
|
+
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
49
|
+
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
50
|
+
return Constructor;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function _toConsumableArray(arr) {
|
|
54
|
+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function _arrayWithoutHoles(arr) {
|
|
58
|
+
if (Array.isArray(arr)) {
|
|
59
|
+
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
|
60
|
+
|
|
61
|
+
return arr2;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function _iterableToArray(iter) {
|
|
66
|
+
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function _nonIterableSpread() {
|
|
70
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance");
|
|
71
|
+
}
|
|
72
|
+
|
|
17
73
|
var IN_BROWSER = typeof window !== 'undefined';
|
|
18
74
|
var WINDOW = IN_BROWSER ? window : {};
|
|
19
|
-
var NAMESPACE = 'cropper';
|
|
75
|
+
var NAMESPACE = 'cropper'; // Actions
|
|
20
76
|
|
|
21
|
-
// Actions
|
|
22
77
|
var ACTION_ALL = 'all';
|
|
23
78
|
var ACTION_CROP = 'crop';
|
|
24
79
|
var ACTION_MOVE = 'move';
|
|
@@ -30,27 +85,23 @@
|
|
|
30
85
|
var ACTION_NORTH_EAST = 'ne';
|
|
31
86
|
var ACTION_NORTH_WEST = 'nw';
|
|
32
87
|
var ACTION_SOUTH_EAST = 'se';
|
|
33
|
-
var ACTION_SOUTH_WEST = 'sw';
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
//
|
|
45
|
-
|
|
46
|
-
var DATA_PREVIEW = NAMESPACE + 'Preview';
|
|
47
|
-
|
|
48
|
-
// Drag modes
|
|
88
|
+
var ACTION_SOUTH_WEST = 'sw'; // Classes
|
|
89
|
+
|
|
90
|
+
var CLASS_CROP = "".concat(NAMESPACE, "-crop");
|
|
91
|
+
var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled");
|
|
92
|
+
var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden");
|
|
93
|
+
var CLASS_HIDE = "".concat(NAMESPACE, "-hide");
|
|
94
|
+
var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible");
|
|
95
|
+
var CLASS_MODAL = "".concat(NAMESPACE, "-modal");
|
|
96
|
+
var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys
|
|
97
|
+
|
|
98
|
+
var DATA_ACTION = "".concat(NAMESPACE, "Action");
|
|
99
|
+
var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes
|
|
100
|
+
|
|
49
101
|
var DRAG_MODE_CROP = 'crop';
|
|
50
102
|
var DRAG_MODE_MOVE = 'move';
|
|
51
|
-
var DRAG_MODE_NONE = 'none';
|
|
103
|
+
var DRAG_MODE_NONE = 'none'; // Events
|
|
52
104
|
|
|
53
|
-
// Events
|
|
54
105
|
var EVENT_CROP = 'crop';
|
|
55
106
|
var EVENT_CROP_END = 'cropend';
|
|
56
107
|
var EVENT_CROP_MOVE = 'cropmove';
|
|
@@ -62,9 +113,10 @@
|
|
|
62
113
|
var EVENT_READY = 'ready';
|
|
63
114
|
var EVENT_RESIZE = 'resize';
|
|
64
115
|
var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
|
|
65
|
-
var EVENT_ZOOM = 'zoom';
|
|
116
|
+
var EVENT_ZOOM = 'zoom'; // Mime types
|
|
117
|
+
|
|
118
|
+
var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps
|
|
66
119
|
|
|
67
|
-
// RegExps
|
|
68
120
|
var REGEXP_ACTIONS = /^(?:e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/;
|
|
69
121
|
var REGEXP_DATA_URL = /^data:/;
|
|
70
122
|
var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
|
|
@@ -72,86 +124,61 @@
|
|
|
72
124
|
|
|
73
125
|
var DEFAULTS = {
|
|
74
126
|
// Define the view mode of the cropper
|
|
75
|
-
viewMode: 0,
|
|
76
|
-
|
|
127
|
+
viewMode: 0,
|
|
128
|
+
// 0, 1, 2, 3
|
|
77
129
|
// Define the dragging mode of the cropper
|
|
78
|
-
dragMode: DRAG_MODE_CROP,
|
|
79
|
-
|
|
130
|
+
dragMode: DRAG_MODE_CROP,
|
|
131
|
+
// 'crop', 'move' or 'none'
|
|
80
132
|
// Define the initial aspect ratio of the crop box
|
|
81
133
|
initialAspectRatio: NaN,
|
|
82
|
-
|
|
83
134
|
// Define the aspect ratio of the crop box
|
|
84
135
|
aspectRatio: NaN,
|
|
85
|
-
|
|
86
136
|
// An object with the previous cropping result data
|
|
87
137
|
data: null,
|
|
88
|
-
|
|
89
138
|
// A selector for adding extra containers to preview
|
|
90
139
|
preview: '',
|
|
91
|
-
|
|
92
140
|
// Re-render the cropper when resize the window
|
|
93
141
|
responsive: true,
|
|
94
|
-
|
|
95
142
|
// Restore the cropped area after resize the window
|
|
96
143
|
restore: true,
|
|
97
|
-
|
|
98
144
|
// Check if the current image is a cross-origin image
|
|
99
145
|
checkCrossOrigin: true,
|
|
100
|
-
|
|
101
146
|
// Check the current image's Exif Orientation information
|
|
102
147
|
checkOrientation: true,
|
|
103
|
-
|
|
104
148
|
// Show the black modal
|
|
105
149
|
modal: true,
|
|
106
|
-
|
|
107
150
|
// Show the dashed lines for guiding
|
|
108
151
|
guides: true,
|
|
109
|
-
|
|
110
152
|
// Show the center indicator for guiding
|
|
111
153
|
center: true,
|
|
112
|
-
|
|
113
154
|
// Show the white modal to highlight the crop box
|
|
114
155
|
highlight: true,
|
|
115
|
-
|
|
116
156
|
// Show the grid background
|
|
117
157
|
background: true,
|
|
118
|
-
|
|
119
158
|
// Enable to crop the image automatically when initialize
|
|
120
159
|
autoCrop: true,
|
|
121
|
-
|
|
122
160
|
// Define the percentage of automatic cropping area when initializes
|
|
123
161
|
autoCropArea: 0.8,
|
|
124
|
-
|
|
125
162
|
// Enable to move the image
|
|
126
163
|
movable: true,
|
|
127
|
-
|
|
128
164
|
// Enable to rotate the image
|
|
129
165
|
rotatable: true,
|
|
130
|
-
|
|
131
166
|
// Enable to scale the image
|
|
132
167
|
scalable: true,
|
|
133
|
-
|
|
134
168
|
// Enable to zoom the image
|
|
135
169
|
zoomable: true,
|
|
136
|
-
|
|
137
170
|
// Enable to zoom the image by dragging touch
|
|
138
171
|
zoomOnTouch: true,
|
|
139
|
-
|
|
140
172
|
// Enable to zoom the image by wheeling mouse
|
|
141
173
|
zoomOnWheel: true,
|
|
142
|
-
|
|
143
174
|
// Define zoom ratio when zoom the image by wheeling mouse
|
|
144
175
|
wheelZoomRatio: 0.1,
|
|
145
|
-
|
|
146
176
|
// Enable to move the crop box
|
|
147
177
|
cropBoxMovable: true,
|
|
148
|
-
|
|
149
178
|
// Enable to resize the crop box
|
|
150
179
|
cropBoxResizable: true,
|
|
151
|
-
|
|
152
180
|
// Toggle drag mode between "crop" and "move" when click twice on the cropper
|
|
153
181
|
toggleDragModeOnDblclick: true,
|
|
154
|
-
|
|
155
182
|
// Size limitation
|
|
156
183
|
minCanvasWidth: 0,
|
|
157
184
|
minCanvasHeight: 0,
|
|
@@ -159,7 +186,6 @@
|
|
|
159
186
|
minCropBoxHeight: 0,
|
|
160
187
|
minContainerWidth: 200,
|
|
161
188
|
minContainerHeight: 100,
|
|
162
|
-
|
|
163
189
|
// Shortcuts of events
|
|
164
190
|
ready: null,
|
|
165
191
|
cropstart: null,
|
|
@@ -171,80 +197,39 @@
|
|
|
171
197
|
|
|
172
198
|
var TEMPLATE = '<div class="cropper-container" touch-action="none">' + '<div class="cropper-wrap-box">' + '<div class="cropper-canvas"></div>' + '</div>' + '<div class="cropper-drag-box"></div>' + '<div class="cropper-crop-box">' + '<span class="cropper-view-box"></span>' + '<span class="cropper-dashed dashed-h"></span>' + '<span class="cropper-dashed dashed-v"></span>' + '<span class="cropper-center"></span>' + '<span class="cropper-face"></span>' + '<span class="cropper-line line-e" data-cropper-action="e"></span>' + '<span class="cropper-line line-n" data-cropper-action="n"></span>' + '<span class="cropper-line line-w" data-cropper-action="w"></span>' + '<span class="cropper-line line-s" data-cropper-action="s"></span>' + '<span class="cropper-point point-e" data-cropper-action="e"></span>' + '<span class="cropper-point point-n" data-cropper-action="n"></span>' + '<span class="cropper-point point-w" data-cropper-action="w"></span>' + '<span class="cropper-point point-s" data-cropper-action="s"></span>' + '<span class="cropper-point point-ne" data-cropper-action="ne"></span>' + '<span class="cropper-point point-nw" data-cropper-action="nw"></span>' + '<span class="cropper-point point-sw" data-cropper-action="sw"></span>' + '<span class="cropper-point point-se" data-cropper-action="se"></span>' + '</div>' + '</div>';
|
|
173
199
|
|
|
174
|
-
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
|
175
|
-
return typeof obj;
|
|
176
|
-
} : function (obj) {
|
|
177
|
-
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
var classCallCheck = function (instance, Constructor) {
|
|
181
|
-
if (!(instance instanceof Constructor)) {
|
|
182
|
-
throw new TypeError("Cannot call a class as a function");
|
|
183
|
-
}
|
|
184
|
-
};
|
|
185
|
-
|
|
186
|
-
var createClass = function () {
|
|
187
|
-
function defineProperties(target, props) {
|
|
188
|
-
for (var i = 0; i < props.length; i++) {
|
|
189
|
-
var descriptor = props[i];
|
|
190
|
-
descriptor.enumerable = descriptor.enumerable || false;
|
|
191
|
-
descriptor.configurable = true;
|
|
192
|
-
if ("value" in descriptor) descriptor.writable = true;
|
|
193
|
-
Object.defineProperty(target, descriptor.key, descriptor);
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
return function (Constructor, protoProps, staticProps) {
|
|
198
|
-
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
199
|
-
if (staticProps) defineProperties(Constructor, staticProps);
|
|
200
|
-
return Constructor;
|
|
201
|
-
};
|
|
202
|
-
}();
|
|
203
|
-
|
|
204
|
-
var toConsumableArray = function (arr) {
|
|
205
|
-
if (Array.isArray(arr)) {
|
|
206
|
-
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
|
207
|
-
|
|
208
|
-
return arr2;
|
|
209
|
-
} else {
|
|
210
|
-
return Array.from(arr);
|
|
211
|
-
}
|
|
212
|
-
};
|
|
213
|
-
|
|
214
200
|
/**
|
|
215
201
|
* Check if the given value is not a number.
|
|
216
202
|
*/
|
|
217
|
-
var isNaN = Number.isNaN || WINDOW.isNaN;
|
|
218
203
|
|
|
204
|
+
var isNaN = Number.isNaN || WINDOW.isNaN;
|
|
219
205
|
/**
|
|
220
206
|
* Check if the given value is a number.
|
|
221
207
|
* @param {*} value - The value to check.
|
|
222
208
|
* @returns {boolean} Returns `true` if the given value is a number, else `false`.
|
|
223
209
|
*/
|
|
210
|
+
|
|
224
211
|
function isNumber(value) {
|
|
225
212
|
return typeof value === 'number' && !isNaN(value);
|
|
226
213
|
}
|
|
227
|
-
|
|
228
214
|
/**
|
|
229
215
|
* Check if the given value is undefined.
|
|
230
216
|
* @param {*} value - The value to check.
|
|
231
217
|
* @returns {boolean} Returns `true` if the given value is undefined, else `false`.
|
|
232
218
|
*/
|
|
219
|
+
|
|
233
220
|
function isUndefined(value) {
|
|
234
221
|
return typeof value === 'undefined';
|
|
235
222
|
}
|
|
236
|
-
|
|
237
223
|
/**
|
|
238
224
|
* Check if the given value is an object.
|
|
239
225
|
* @param {*} value - The value to check.
|
|
240
226
|
* @returns {boolean} Returns `true` if the given value is an object, else `false`.
|
|
241
227
|
*/
|
|
228
|
+
|
|
242
229
|
function isObject(value) {
|
|
243
|
-
return
|
|
230
|
+
return _typeof(value) === 'object' && value !== null;
|
|
244
231
|
}
|
|
245
|
-
|
|
246
232
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
247
|
-
|
|
248
233
|
/**
|
|
249
234
|
* Check if the given value is a plain object.
|
|
250
235
|
* @param {*} value - The value to check.
|
|
@@ -259,35 +244,34 @@
|
|
|
259
244
|
try {
|
|
260
245
|
var _constructor = value.constructor;
|
|
261
246
|
var prototype = _constructor.prototype;
|
|
262
|
-
|
|
263
|
-
|
|
264
247
|
return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
|
|
265
248
|
} catch (e) {
|
|
266
249
|
return false;
|
|
267
250
|
}
|
|
268
251
|
}
|
|
269
|
-
|
|
270
252
|
/**
|
|
271
253
|
* Check if the given value is a function.
|
|
272
254
|
* @param {*} value - The value to check.
|
|
273
255
|
* @returns {boolean} Returns `true` if the given value is a function, else `false`.
|
|
274
256
|
*/
|
|
257
|
+
|
|
275
258
|
function isFunction(value) {
|
|
276
259
|
return typeof value === 'function';
|
|
277
260
|
}
|
|
278
|
-
|
|
279
261
|
/**
|
|
280
262
|
* Iterate the given data.
|
|
281
263
|
* @param {*} data - The data to iterate.
|
|
282
264
|
* @param {Function} callback - The process function for each element.
|
|
283
265
|
* @returns {*} The original data.
|
|
284
266
|
*/
|
|
267
|
+
|
|
285
268
|
function forEach(data, callback) {
|
|
286
269
|
if (data && isFunction(callback)) {
|
|
287
|
-
if (Array.isArray(data) || isNumber(data.length)
|
|
270
|
+
if (Array.isArray(data) || isNumber(data.length)
|
|
271
|
+
/* array-like */
|
|
272
|
+
) {
|
|
288
273
|
var length = data.length;
|
|
289
|
-
|
|
290
|
-
var i = void 0;
|
|
274
|
+
var i;
|
|
291
275
|
|
|
292
276
|
for (i = 0; i < length; i += 1) {
|
|
293
277
|
if (callback.call(data, data[i], i, data) === false) {
|
|
@@ -303,15 +287,15 @@
|
|
|
303
287
|
|
|
304
288
|
return data;
|
|
305
289
|
}
|
|
306
|
-
|
|
307
290
|
/**
|
|
308
291
|
* Extend the given object.
|
|
309
292
|
* @param {*} obj - The object to be extended.
|
|
310
293
|
* @param {*} args - The rest objects which will be merged to the first object.
|
|
311
294
|
* @returns {Object} The extended object.
|
|
312
295
|
*/
|
|
296
|
+
|
|
313
297
|
var assign = Object.assign || function assign(obj) {
|
|
314
|
-
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
298
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
315
299
|
args[_key - 1] = arguments[_key];
|
|
316
300
|
}
|
|
317
301
|
|
|
@@ -327,9 +311,7 @@
|
|
|
327
311
|
|
|
328
312
|
return obj;
|
|
329
313
|
};
|
|
330
|
-
|
|
331
|
-
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/i;
|
|
332
|
-
|
|
314
|
+
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
|
|
333
315
|
/**
|
|
334
316
|
* Normalize decimal number.
|
|
335
317
|
* Check out {@link http://0.30000000000000004.com/}
|
|
@@ -337,23 +319,20 @@
|
|
|
337
319
|
* @param {number} [times=100000000000] - The times for normalizing.
|
|
338
320
|
* @returns {number} Returns the normalized number.
|
|
339
321
|
*/
|
|
322
|
+
|
|
340
323
|
function normalizeDecimalNumber(value) {
|
|
341
324
|
var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;
|
|
342
|
-
|
|
343
325
|
return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
|
|
344
326
|
}
|
|
345
|
-
|
|
346
327
|
var REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;
|
|
347
|
-
|
|
348
328
|
/**
|
|
349
329
|
* Apply styles to the given element.
|
|
350
330
|
* @param {Element} element - The target element.
|
|
351
331
|
* @param {Object} styles - The styles for applying.
|
|
352
332
|
*/
|
|
333
|
+
|
|
353
334
|
function setStyle(element, styles) {
|
|
354
335
|
var style = element.style;
|
|
355
|
-
|
|
356
|
-
|
|
357
336
|
forEach(styles, function (value, property) {
|
|
358
337
|
if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
|
|
359
338
|
value += 'px';
|
|
@@ -362,22 +341,22 @@
|
|
|
362
341
|
style[property] = value;
|
|
363
342
|
});
|
|
364
343
|
}
|
|
365
|
-
|
|
366
344
|
/**
|
|
367
345
|
* Check if the given element has a special class.
|
|
368
346
|
* @param {Element} element - The element to check.
|
|
369
347
|
* @param {string} value - The class to search.
|
|
370
348
|
* @returns {boolean} Returns `true` if the special class was found.
|
|
371
349
|
*/
|
|
350
|
+
|
|
372
351
|
function hasClass(element, value) {
|
|
373
352
|
return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;
|
|
374
353
|
}
|
|
375
|
-
|
|
376
354
|
/**
|
|
377
355
|
* Add classes to the given element.
|
|
378
356
|
* @param {Element} element - The target element.
|
|
379
357
|
* @param {string} value - The classes to be added.
|
|
380
358
|
*/
|
|
359
|
+
|
|
381
360
|
function addClass(element, value) {
|
|
382
361
|
if (!value) {
|
|
383
362
|
return;
|
|
@@ -400,15 +379,15 @@
|
|
|
400
379
|
if (!className) {
|
|
401
380
|
element.className = value;
|
|
402
381
|
} else if (className.indexOf(value) < 0) {
|
|
403
|
-
element.className = className
|
|
382
|
+
element.className = "".concat(className, " ").concat(value);
|
|
404
383
|
}
|
|
405
384
|
}
|
|
406
|
-
|
|
407
385
|
/**
|
|
408
386
|
* Remove classes from the given element.
|
|
409
387
|
* @param {Element} element - The target element.
|
|
410
388
|
* @param {string} value - The classes to be removed.
|
|
411
389
|
*/
|
|
390
|
+
|
|
412
391
|
function removeClass(element, value) {
|
|
413
392
|
if (!value) {
|
|
414
393
|
return;
|
|
@@ -430,13 +409,13 @@
|
|
|
430
409
|
element.className = element.className.replace(value, '');
|
|
431
410
|
}
|
|
432
411
|
}
|
|
433
|
-
|
|
434
412
|
/**
|
|
435
413
|
* Add or remove classes from the given element.
|
|
436
414
|
* @param {Element} element - The target element.
|
|
437
415
|
* @param {string} value - The classes to be toggled.
|
|
438
416
|
* @param {boolean} added - Add only.
|
|
439
417
|
*/
|
|
418
|
+
|
|
440
419
|
function toggleClass(element, value, added) {
|
|
441
420
|
if (!value) {
|
|
442
421
|
return;
|
|
@@ -447,33 +426,32 @@
|
|
|
447
426
|
toggleClass(elem, value, added);
|
|
448
427
|
});
|
|
449
428
|
return;
|
|
450
|
-
}
|
|
429
|
+
} // IE10-11 doesn't support the second parameter of `classList.toggle`
|
|
430
|
+
|
|
451
431
|
|
|
452
|
-
// IE10-11 doesn't support the second parameter of `classList.toggle`
|
|
453
432
|
if (added) {
|
|
454
433
|
addClass(element, value);
|
|
455
434
|
} else {
|
|
456
435
|
removeClass(element, value);
|
|
457
436
|
}
|
|
458
437
|
}
|
|
459
|
-
|
|
460
438
|
var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;
|
|
461
|
-
|
|
462
439
|
/**
|
|
463
440
|
* Transform the given string from camelCase to kebab-case
|
|
464
441
|
* @param {string} value - The value to transform.
|
|
465
442
|
* @returns {string} The transformed value.
|
|
466
443
|
*/
|
|
444
|
+
|
|
467
445
|
function hyphenate(value) {
|
|
468
446
|
return value.replace(REGEXP_HYPHENATE, '$1-$2').toLowerCase();
|
|
469
447
|
}
|
|
470
|
-
|
|
471
448
|
/**
|
|
472
449
|
* Get data from the given element.
|
|
473
450
|
* @param {Element} element - The target element.
|
|
474
451
|
* @param {string} name - The data key to get.
|
|
475
452
|
* @returns {string} The data value.
|
|
476
453
|
*/
|
|
454
|
+
|
|
477
455
|
function getData(element, name) {
|
|
478
456
|
if (isObject(element[name])) {
|
|
479
457
|
return element[name];
|
|
@@ -483,30 +461,30 @@
|
|
|
483
461
|
return element.dataset[name];
|
|
484
462
|
}
|
|
485
463
|
|
|
486
|
-
return element.getAttribute(
|
|
464
|
+
return element.getAttribute("data-".concat(hyphenate(name)));
|
|
487
465
|
}
|
|
488
|
-
|
|
489
466
|
/**
|
|
490
467
|
* Set data to the given element.
|
|
491
468
|
* @param {Element} element - The target element.
|
|
492
469
|
* @param {string} name - The data key to set.
|
|
493
470
|
* @param {string} data - The data value.
|
|
494
471
|
*/
|
|
472
|
+
|
|
495
473
|
function setData(element, name, data) {
|
|
496
474
|
if (isObject(data)) {
|
|
497
475
|
element[name] = data;
|
|
498
476
|
} else if (element.dataset) {
|
|
499
477
|
element.dataset[name] = data;
|
|
500
478
|
} else {
|
|
501
|
-
element.setAttribute(
|
|
479
|
+
element.setAttribute("data-".concat(hyphenate(name)), data);
|
|
502
480
|
}
|
|
503
481
|
}
|
|
504
|
-
|
|
505
482
|
/**
|
|
506
483
|
* Remove data from the given element.
|
|
507
484
|
* @param {Element} element - The target element.
|
|
508
485
|
* @param {string} name - The data key to remove.
|
|
509
486
|
*/
|
|
487
|
+
|
|
510
488
|
function removeData(element, name) {
|
|
511
489
|
if (isObject(element[name])) {
|
|
512
490
|
try {
|
|
@@ -522,41 +500,40 @@
|
|
|
522
500
|
element.dataset[name] = undefined;
|
|
523
501
|
}
|
|
524
502
|
} else {
|
|
525
|
-
element.removeAttribute(
|
|
503
|
+
element.removeAttribute("data-".concat(hyphenate(name)));
|
|
526
504
|
}
|
|
527
505
|
}
|
|
528
|
-
|
|
529
506
|
var REGEXP_SPACES = /\s\s*/;
|
|
507
|
+
|
|
530
508
|
var onceSupported = function () {
|
|
531
509
|
var supported = false;
|
|
532
510
|
|
|
533
511
|
if (IN_BROWSER) {
|
|
534
512
|
var once = false;
|
|
513
|
+
|
|
535
514
|
var listener = function listener() {};
|
|
515
|
+
|
|
536
516
|
var options = Object.defineProperty({}, 'once', {
|
|
537
|
-
get: function get
|
|
517
|
+
get: function get() {
|
|
538
518
|
supported = true;
|
|
539
519
|
return once;
|
|
540
520
|
},
|
|
541
521
|
|
|
542
|
-
|
|
543
522
|
/**
|
|
544
523
|
* This setter can fix a `TypeError` in strict mode
|
|
545
524
|
* {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}
|
|
546
525
|
* @param {boolean} value - The value to set
|
|
547
526
|
*/
|
|
548
|
-
set: function set
|
|
527
|
+
set: function set(value) {
|
|
549
528
|
once = value;
|
|
550
529
|
}
|
|
551
530
|
});
|
|
552
|
-
|
|
553
531
|
WINDOW.addEventListener('test', listener, options);
|
|
554
532
|
WINDOW.removeEventListener('test', listener, options);
|
|
555
533
|
}
|
|
556
534
|
|
|
557
535
|
return supported;
|
|
558
536
|
}();
|
|
559
|
-
|
|
560
537
|
/**
|
|
561
538
|
* Remove event listener from the target element.
|
|
562
539
|
* @param {Element} element - The event target.
|
|
@@ -564,16 +541,15 @@
|
|
|
564
541
|
* @param {Function} listener - The event listener.
|
|
565
542
|
* @param {Object} options - The event options.
|
|
566
543
|
*/
|
|
544
|
+
|
|
545
|
+
|
|
567
546
|
function removeListener(element, type, listener) {
|
|
568
547
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
569
|
-
|
|
570
548
|
var handler = listener;
|
|
571
|
-
|
|
572
549
|
type.trim().split(REGEXP_SPACES).forEach(function (event) {
|
|
573
550
|
if (!onceSupported) {
|
|
574
551
|
var listeners = element.listeners;
|
|
575
552
|
|
|
576
|
-
|
|
577
553
|
if (listeners && listeners[event] && listeners[event][listener]) {
|
|
578
554
|
handler = listeners[event][listener];
|
|
579
555
|
delete listeners[event][listener];
|
|
@@ -591,7 +567,6 @@
|
|
|
591
567
|
element.removeEventListener(event, handler, options);
|
|
592
568
|
});
|
|
593
569
|
}
|
|
594
|
-
|
|
595
570
|
/**
|
|
596
571
|
* Add event listener to the target element.
|
|
597
572
|
* @param {Element} element - The event target.
|
|
@@ -599,24 +574,23 @@
|
|
|
599
574
|
* @param {Function} listener - The event listener.
|
|
600
575
|
* @param {Object} options - The event options.
|
|
601
576
|
*/
|
|
577
|
+
|
|
602
578
|
function addListener(element, type, listener) {
|
|
603
579
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
604
|
-
|
|
605
580
|
var _handler = listener;
|
|
606
|
-
|
|
607
581
|
type.trim().split(REGEXP_SPACES).forEach(function (event) {
|
|
608
582
|
if (options.once && !onceSupported) {
|
|
609
583
|
var _element$listeners = element.listeners,
|
|
610
|
-
listeners = _element$listeners ===
|
|
611
|
-
|
|
584
|
+
listeners = _element$listeners === void 0 ? {} : _element$listeners;
|
|
612
585
|
|
|
613
586
|
_handler = function handler() {
|
|
614
|
-
|
|
587
|
+
delete listeners[event][listener];
|
|
588
|
+
element.removeEventListener(event, _handler, options);
|
|
589
|
+
|
|
590
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
615
591
|
args[_key2] = arguments[_key2];
|
|
616
592
|
}
|
|
617
593
|
|
|
618
|
-
delete listeners[event][listener];
|
|
619
|
-
element.removeEventListener(event, _handler, options);
|
|
620
594
|
listener.apply(element, args);
|
|
621
595
|
};
|
|
622
596
|
|
|
@@ -635,7 +609,6 @@
|
|
|
635
609
|
element.addEventListener(event, _handler, options);
|
|
636
610
|
});
|
|
637
611
|
}
|
|
638
|
-
|
|
639
612
|
/**
|
|
640
613
|
* Dispatch event on the target element.
|
|
641
614
|
* @param {Element} element - The event target.
|
|
@@ -643,10 +616,10 @@
|
|
|
643
616
|
* @param {Object} data - The additional event data.
|
|
644
617
|
* @returns {boolean} Indicate if the event is default prevented or not.
|
|
645
618
|
*/
|
|
619
|
+
|
|
646
620
|
function dispatchEvent(element, type, data) {
|
|
647
|
-
var event
|
|
621
|
+
var event; // Event and CustomEvent on IE9-11 are global objects, not constructors
|
|
648
622
|
|
|
649
|
-
// Event and CustomEvent on IE9-11 are global objects, not constructors
|
|
650
623
|
if (isFunction(Event) && isFunction(CustomEvent)) {
|
|
651
624
|
event = new CustomEvent(type, {
|
|
652
625
|
detail: data,
|
|
@@ -660,103 +633,94 @@
|
|
|
660
633
|
|
|
661
634
|
return element.dispatchEvent(event);
|
|
662
635
|
}
|
|
663
|
-
|
|
664
636
|
/**
|
|
665
637
|
* Get the offset base on the document.
|
|
666
638
|
* @param {Element} element - The target element.
|
|
667
639
|
* @returns {Object} The offset data.
|
|
668
640
|
*/
|
|
641
|
+
|
|
669
642
|
function getOffset(element) {
|
|
670
643
|
var box = element.getBoundingClientRect();
|
|
671
|
-
|
|
672
644
|
return {
|
|
673
645
|
left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
|
|
674
646
|
top: box.top + (window.pageYOffset - document.documentElement.clientTop)
|
|
675
647
|
};
|
|
676
648
|
}
|
|
677
|
-
|
|
678
649
|
var location = WINDOW.location;
|
|
679
|
-
|
|
680
650
|
var REGEXP_ORIGINS = /^(https?:)\/\/([^:/?#]+):?(\d*)/i;
|
|
681
|
-
|
|
682
651
|
/**
|
|
683
652
|
* Check if the given URL is a cross origin URL.
|
|
684
653
|
* @param {string} url - The target URL.
|
|
685
654
|
* @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`.
|
|
686
655
|
*/
|
|
656
|
+
|
|
687
657
|
function isCrossOriginURL(url) {
|
|
688
658
|
var parts = url.match(REGEXP_ORIGINS);
|
|
689
|
-
|
|
690
659
|
return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
|
|
691
660
|
}
|
|
692
|
-
|
|
693
661
|
/**
|
|
694
662
|
* Add timestamp to the given URL.
|
|
695
663
|
* @param {string} url - The target URL.
|
|
696
664
|
* @returns {string} The result URL.
|
|
697
665
|
*/
|
|
698
|
-
function addTimestamp(url) {
|
|
699
|
-
var timestamp = 'timestamp=' + new Date().getTime();
|
|
700
666
|
|
|
667
|
+
function addTimestamp(url) {
|
|
668
|
+
var timestamp = "timestamp=".concat(new Date().getTime());
|
|
701
669
|
return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;
|
|
702
670
|
}
|
|
703
|
-
|
|
704
671
|
/**
|
|
705
672
|
* Get transforms base on the given object.
|
|
706
673
|
* @param {Object} obj - The target object.
|
|
707
674
|
* @returns {string} A string contains transform values.
|
|
708
675
|
*/
|
|
676
|
+
|
|
709
677
|
function getTransforms(_ref) {
|
|
710
678
|
var rotate = _ref.rotate,
|
|
711
679
|
scaleX = _ref.scaleX,
|
|
712
680
|
scaleY = _ref.scaleY,
|
|
713
681
|
translateX = _ref.translateX,
|
|
714
682
|
translateY = _ref.translateY;
|
|
715
|
-
|
|
716
683
|
var values = [];
|
|
717
684
|
|
|
718
685
|
if (isNumber(translateX) && translateX !== 0) {
|
|
719
|
-
values.push(
|
|
686
|
+
values.push("translateX(".concat(translateX, "px)"));
|
|
720
687
|
}
|
|
721
688
|
|
|
722
689
|
if (isNumber(translateY) && translateY !== 0) {
|
|
723
|
-
values.push(
|
|
724
|
-
}
|
|
690
|
+
values.push("translateY(".concat(translateY, "px)"));
|
|
691
|
+
} // Rotate should come first before scale to match orientation transform
|
|
692
|
+
|
|
725
693
|
|
|
726
|
-
// Rotate should come first before scale to match orientation transform
|
|
727
694
|
if (isNumber(rotate) && rotate !== 0) {
|
|
728
|
-
values.push(
|
|
695
|
+
values.push("rotate(".concat(rotate, "deg)"));
|
|
729
696
|
}
|
|
730
697
|
|
|
731
698
|
if (isNumber(scaleX) && scaleX !== 1) {
|
|
732
|
-
values.push(
|
|
699
|
+
values.push("scaleX(".concat(scaleX, ")"));
|
|
733
700
|
}
|
|
734
701
|
|
|
735
702
|
if (isNumber(scaleY) && scaleY !== 1) {
|
|
736
|
-
values.push(
|
|
703
|
+
values.push("scaleY(".concat(scaleY, ")"));
|
|
737
704
|
}
|
|
738
705
|
|
|
739
706
|
var transform = values.length ? values.join(' ') : 'none';
|
|
740
|
-
|
|
741
707
|
return {
|
|
742
708
|
WebkitTransform: transform,
|
|
743
709
|
msTransform: transform,
|
|
744
710
|
transform: transform
|
|
745
711
|
};
|
|
746
712
|
}
|
|
747
|
-
|
|
748
713
|
/**
|
|
749
714
|
* Get the max ratio of a group of pointers.
|
|
750
715
|
* @param {string} pointers - The target pointers.
|
|
751
716
|
* @returns {number} The result ratio.
|
|
752
717
|
*/
|
|
718
|
+
|
|
753
719
|
function getMaxZoomRatio(pointers) {
|
|
754
720
|
var pointers2 = assign({}, pointers);
|
|
755
721
|
var ratios = [];
|
|
756
|
-
|
|
757
722
|
forEach(pointers, function (pointer, pointerId) {
|
|
758
723
|
delete pointers2[pointerId];
|
|
759
|
-
|
|
760
724
|
forEach(pointers2, function (pointer2) {
|
|
761
725
|
var x1 = Math.abs(pointer.startX - pointer2.startX);
|
|
762
726
|
var y1 = Math.abs(pointer.startY - pointer2.startY);
|
|
@@ -765,78 +729,69 @@
|
|
|
765
729
|
var z1 = Math.sqrt(x1 * x1 + y1 * y1);
|
|
766
730
|
var z2 = Math.sqrt(x2 * x2 + y2 * y2);
|
|
767
731
|
var ratio = (z2 - z1) / z1;
|
|
768
|
-
|
|
769
732
|
ratios.push(ratio);
|
|
770
733
|
});
|
|
771
734
|
});
|
|
772
|
-
|
|
773
735
|
ratios.sort(function (a, b) {
|
|
774
736
|
return Math.abs(a) < Math.abs(b);
|
|
775
737
|
});
|
|
776
|
-
|
|
777
738
|
return ratios[0];
|
|
778
739
|
}
|
|
779
|
-
|
|
780
740
|
/**
|
|
781
741
|
* Get a pointer from an event object.
|
|
782
742
|
* @param {Object} event - The target event object.
|
|
783
743
|
* @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.
|
|
784
744
|
* @returns {Object} The result pointer contains start and/or end point coordinates.
|
|
785
745
|
*/
|
|
746
|
+
|
|
786
747
|
function getPointer(_ref2, endOnly) {
|
|
787
748
|
var pageX = _ref2.pageX,
|
|
788
749
|
pageY = _ref2.pageY;
|
|
789
|
-
|
|
790
750
|
var end = {
|
|
791
751
|
endX: pageX,
|
|
792
752
|
endY: pageY
|
|
793
753
|
};
|
|
794
|
-
|
|
795
754
|
return endOnly ? end : assign({
|
|
796
755
|
startX: pageX,
|
|
797
756
|
startY: pageY
|
|
798
757
|
}, end);
|
|
799
758
|
}
|
|
800
|
-
|
|
801
759
|
/**
|
|
802
760
|
* Get the center point coordinate of a group of pointers.
|
|
803
761
|
* @param {Object} pointers - The target pointers.
|
|
804
762
|
* @returns {Object} The center point coordinate.
|
|
805
763
|
*/
|
|
764
|
+
|
|
806
765
|
function getPointersCenter(pointers) {
|
|
807
766
|
var pageX = 0;
|
|
808
767
|
var pageY = 0;
|
|
809
768
|
var count = 0;
|
|
810
|
-
|
|
811
769
|
forEach(pointers, function (_ref3) {
|
|
812
770
|
var startX = _ref3.startX,
|
|
813
771
|
startY = _ref3.startY;
|
|
814
|
-
|
|
815
772
|
pageX += startX;
|
|
816
773
|
pageY += startY;
|
|
817
774
|
count += 1;
|
|
818
775
|
});
|
|
819
|
-
|
|
820
776
|
pageX /= count;
|
|
821
777
|
pageY /= count;
|
|
822
|
-
|
|
823
778
|
return {
|
|
824
779
|
pageX: pageX,
|
|
825
780
|
pageY: pageY
|
|
826
781
|
};
|
|
827
782
|
}
|
|
828
|
-
|
|
829
783
|
/**
|
|
830
784
|
* Check if the given value is a finite number.
|
|
831
785
|
*/
|
|
832
|
-
var isFinite = Number.isFinite || WINDOW.isFinite;
|
|
833
786
|
|
|
787
|
+
var isFinite = Number.isFinite || WINDOW.isFinite;
|
|
834
788
|
/**
|
|
835
789
|
* Get the max sizes in a rectangle under the given aspect ratio.
|
|
836
790
|
* @param {Object} data - The original sizes.
|
|
837
791
|
* @param {string} [type='contain'] - The adjust type.
|
|
838
792
|
* @returns {Object} The result sizes.
|
|
839
793
|
*/
|
|
794
|
+
|
|
840
795
|
function getAdjustedSizes(_ref4) // or 'cover'
|
|
841
796
|
{
|
|
842
797
|
var aspectRatio = _ref4.aspectRatio,
|
|
@@ -867,17 +822,16 @@
|
|
|
867
822
|
height: height
|
|
868
823
|
};
|
|
869
824
|
}
|
|
870
|
-
|
|
871
825
|
/**
|
|
872
826
|
* Get the new sizes of a rectangle after rotated.
|
|
873
827
|
* @param {Object} data - The original sizes.
|
|
874
828
|
* @returns {Object} The result sizes.
|
|
875
829
|
*/
|
|
830
|
+
|
|
876
831
|
function getRotatedSizes(_ref5) {
|
|
877
832
|
var width = _ref5.width,
|
|
878
833
|
height = _ref5.height,
|
|
879
834
|
degree = _ref5.degree;
|
|
880
|
-
|
|
881
835
|
degree = Math.abs(degree) % 180;
|
|
882
836
|
|
|
883
837
|
if (degree === 90) {
|
|
@@ -892,7 +846,6 @@
|
|
|
892
846
|
var cosArc = Math.cos(arc);
|
|
893
847
|
var newWidth = width * cosArc + height * sinArc;
|
|
894
848
|
var newHeight = width * sinArc + height * cosArc;
|
|
895
|
-
|
|
896
849
|
return degree > 90 ? {
|
|
897
850
|
width: newHeight,
|
|
898
851
|
height: newWidth
|
|
@@ -901,7 +854,6 @@
|
|
|
901
854
|
height: newHeight
|
|
902
855
|
};
|
|
903
856
|
}
|
|
904
|
-
|
|
905
857
|
/**
|
|
906
858
|
* Get a canvas which drew the given image.
|
|
907
859
|
* @param {HTMLImageElement} image - The image for drawing.
|
|
@@ -910,34 +862,34 @@
|
|
|
910
862
|
* @param {Object} options - The options.
|
|
911
863
|
* @returns {HTMLCanvasElement} The result canvas.
|
|
912
864
|
*/
|
|
865
|
+
|
|
913
866
|
function getSourceCanvas(image, _ref6, _ref7, _ref8) {
|
|
914
867
|
var imageAspectRatio = _ref6.aspectRatio,
|
|
915
868
|
imageNaturalWidth = _ref6.naturalWidth,
|
|
916
869
|
imageNaturalHeight = _ref6.naturalHeight,
|
|
917
870
|
_ref6$rotate = _ref6.rotate,
|
|
918
|
-
rotate = _ref6$rotate ===
|
|
871
|
+
rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate,
|
|
919
872
|
_ref6$scaleX = _ref6.scaleX,
|
|
920
|
-
scaleX = _ref6$scaleX ===
|
|
873
|
+
scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX,
|
|
921
874
|
_ref6$scaleY = _ref6.scaleY,
|
|
922
|
-
scaleY = _ref6$scaleY ===
|
|
875
|
+
scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY;
|
|
923
876
|
var aspectRatio = _ref7.aspectRatio,
|
|
924
877
|
naturalWidth = _ref7.naturalWidth,
|
|
925
878
|
naturalHeight = _ref7.naturalHeight;
|
|
926
879
|
var _ref8$fillColor = _ref8.fillColor,
|
|
927
|
-
fillColor = _ref8$fillColor ===
|
|
880
|
+
fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor,
|
|
928
881
|
_ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,
|
|
929
|
-
imageSmoothingEnabled = _ref8$imageSmoothingE ===
|
|
882
|
+
imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,
|
|
930
883
|
_ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,
|
|
931
|
-
imageSmoothingQuality = _ref8$imageSmoothingQ ===
|
|
884
|
+
imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ,
|
|
932
885
|
_ref8$maxWidth = _ref8.maxWidth,
|
|
933
|
-
maxWidth = _ref8$maxWidth ===
|
|
886
|
+
maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,
|
|
934
887
|
_ref8$maxHeight = _ref8.maxHeight,
|
|
935
|
-
maxHeight = _ref8$maxHeight ===
|
|
888
|
+
maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight,
|
|
936
889
|
_ref8$minWidth = _ref8.minWidth,
|
|
937
|
-
minWidth = _ref8$minWidth ===
|
|
890
|
+
minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,
|
|
938
891
|
_ref8$minHeight = _ref8.minHeight,
|
|
939
|
-
minHeight = _ref8$minHeight ===
|
|
940
|
-
|
|
892
|
+
minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;
|
|
941
893
|
var canvas = document.createElement('canvas');
|
|
942
894
|
var context = canvas.getContext('2d');
|
|
943
895
|
var maxSizes = getAdjustedSizes({
|
|
@@ -951,10 +903,9 @@
|
|
|
951
903
|
height: minHeight
|
|
952
904
|
}, 'cover');
|
|
953
905
|
var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
|
|
954
|
-
var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
|
|
955
|
-
|
|
956
|
-
// Note: should always use image's natural sizes for drawing as
|
|
906
|
+
var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight)); // Note: should always use image's natural sizes for drawing as
|
|
957
907
|
// imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
|
|
908
|
+
|
|
958
909
|
var destMaxSizes = getAdjustedSizes({
|
|
959
910
|
aspectRatio: imageAspectRatio,
|
|
960
911
|
width: maxWidth,
|
|
@@ -968,7 +919,6 @@
|
|
|
968
919
|
var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));
|
|
969
920
|
var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));
|
|
970
921
|
var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
|
|
971
|
-
|
|
972
922
|
canvas.width = normalizeDecimalNumber(width);
|
|
973
923
|
canvas.height = normalizeDecimalNumber(height);
|
|
974
924
|
context.fillStyle = fillColor;
|
|
@@ -979,15 +929,13 @@
|
|
|
979
929
|
context.scale(scaleX, scaleY);
|
|
980
930
|
context.imageSmoothingEnabled = imageSmoothingEnabled;
|
|
981
931
|
context.imageSmoothingQuality = imageSmoothingQuality;
|
|
982
|
-
context.drawImage.apply(context, [image].concat(
|
|
932
|
+
context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {
|
|
983
933
|
return Math.floor(normalizeDecimalNumber(param));
|
|
984
934
|
}))));
|
|
985
935
|
context.restore();
|
|
986
936
|
return canvas;
|
|
987
937
|
}
|
|
988
|
-
|
|
989
938
|
var fromCharCode = String.fromCharCode;
|
|
990
|
-
|
|
991
939
|
/**
|
|
992
940
|
* Get string from char code in data view.
|
|
993
941
|
* @param {DataView} dataView - The data view for read.
|
|
@@ -998,8 +946,7 @@
|
|
|
998
946
|
|
|
999
947
|
function getStringFromCharCode(dataView, start, length) {
|
|
1000
948
|
var str = '';
|
|
1001
|
-
var i
|
|
1002
|
-
|
|
949
|
+
var i;
|
|
1003
950
|
length += start;
|
|
1004
951
|
|
|
1005
952
|
for (i = start; i < length; i += 1) {
|
|
@@ -1008,65 +955,55 @@
|
|
|
1008
955
|
|
|
1009
956
|
return str;
|
|
1010
957
|
}
|
|
1011
|
-
|
|
1012
958
|
var REGEXP_DATA_URL_HEAD = /^data:.*,/;
|
|
1013
|
-
|
|
1014
959
|
/**
|
|
1015
960
|
* Transform Data URL to array buffer.
|
|
1016
961
|
* @param {string} dataURL - The Data URL to transform.
|
|
1017
962
|
* @returns {ArrayBuffer} The result array buffer.
|
|
1018
963
|
*/
|
|
964
|
+
|
|
1019
965
|
function dataURLToArrayBuffer(dataURL) {
|
|
1020
966
|
var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');
|
|
1021
967
|
var binary = atob(base64);
|
|
1022
968
|
var arrayBuffer = new ArrayBuffer(binary.length);
|
|
1023
969
|
var uint8 = new Uint8Array(arrayBuffer);
|
|
1024
|
-
|
|
1025
970
|
forEach(uint8, function (value, i) {
|
|
1026
971
|
uint8[i] = binary.charCodeAt(i);
|
|
1027
972
|
});
|
|
1028
|
-
|
|
1029
973
|
return arrayBuffer;
|
|
1030
974
|
}
|
|
1031
|
-
|
|
1032
975
|
/**
|
|
1033
976
|
* Transform array buffer to Data URL.
|
|
1034
977
|
* @param {ArrayBuffer} arrayBuffer - The array buffer to transform.
|
|
1035
978
|
* @param {string} mimeType - The mime type of the Data URL.
|
|
1036
979
|
* @returns {string} The result Data URL.
|
|
1037
980
|
*/
|
|
981
|
+
|
|
1038
982
|
function arrayBufferToDataURL(arrayBuffer, mimeType) {
|
|
983
|
+
var chunks = [];
|
|
984
|
+
var chunkSize = 8192;
|
|
1039
985
|
var uint8 = new Uint8Array(arrayBuffer);
|
|
1040
|
-
var data = '';
|
|
1041
986
|
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
uint8.forEach(function (value) {
|
|
1046
|
-
data += fromCharCode(value);
|
|
1047
|
-
});
|
|
1048
|
-
} else {
|
|
1049
|
-
forEach(uint8, function (value) {
|
|
1050
|
-
data += fromCharCode(value);
|
|
1051
|
-
});
|
|
987
|
+
while (uint8.length > 0) {
|
|
988
|
+
chunks.push(fromCharCode.apply(void 0, _toConsumableArray(uint8.subarray(0, chunkSize))));
|
|
989
|
+
uint8 = uint8.subarray(chunkSize);
|
|
1052
990
|
}
|
|
1053
991
|
|
|
1054
|
-
return
|
|
992
|
+
return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join('')));
|
|
1055
993
|
}
|
|
1056
|
-
|
|
1057
994
|
/**
|
|
1058
995
|
* Get orientation value from given array buffer.
|
|
1059
996
|
* @param {ArrayBuffer} arrayBuffer - The array buffer to read.
|
|
1060
997
|
* @returns {number} The read orientation value.
|
|
1061
998
|
*/
|
|
1062
|
-
|
|
999
|
+
|
|
1000
|
+
function resetAndGetOrientation(arrayBuffer) {
|
|
1063
1001
|
var dataView = new DataView(arrayBuffer);
|
|
1064
|
-
var orientation
|
|
1065
|
-
var littleEndian
|
|
1066
|
-
var app1Start
|
|
1067
|
-
var ifdStart
|
|
1002
|
+
var orientation;
|
|
1003
|
+
var littleEndian;
|
|
1004
|
+
var app1Start;
|
|
1005
|
+
var ifdStart; // Only handle JPEG image (start by 0xFFD8)
|
|
1068
1006
|
|
|
1069
|
-
// Only handle JPEG image (start by 0xFFD8)
|
|
1070
1007
|
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
|
|
1071
1008
|
var length = dataView.byteLength;
|
|
1072
1009
|
var offset = 2;
|
|
@@ -1087,10 +1024,11 @@
|
|
|
1087
1024
|
|
|
1088
1025
|
if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
|
|
1089
1026
|
var endianness = dataView.getUint16(tiffOffset);
|
|
1090
|
-
|
|
1091
1027
|
littleEndian = endianness === 0x4949;
|
|
1092
1028
|
|
|
1093
|
-
if (littleEndian || endianness === 0x4D4D
|
|
1029
|
+
if (littleEndian || endianness === 0x4D4D
|
|
1030
|
+
/* bigEndian */
|
|
1031
|
+
) {
|
|
1094
1032
|
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
|
|
1095
1033
|
var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
|
|
1096
1034
|
|
|
@@ -1104,20 +1042,22 @@
|
|
|
1104
1042
|
|
|
1105
1043
|
if (ifdStart) {
|
|
1106
1044
|
var _length = dataView.getUint16(ifdStart, littleEndian);
|
|
1107
|
-
|
|
1108
|
-
var
|
|
1045
|
+
|
|
1046
|
+
var _offset;
|
|
1047
|
+
|
|
1048
|
+
var i;
|
|
1109
1049
|
|
|
1110
1050
|
for (i = 0; i < _length; i += 1) {
|
|
1111
1051
|
_offset = ifdStart + i * 12 + 2;
|
|
1112
1052
|
|
|
1113
|
-
if (dataView.getUint16(_offset, littleEndian) === 0x0112
|
|
1053
|
+
if (dataView.getUint16(_offset, littleEndian) === 0x0112
|
|
1054
|
+
/* Orientation */
|
|
1055
|
+
) {
|
|
1114
1056
|
// 8 is the offset of the current tag's value
|
|
1115
|
-
_offset += 8;
|
|
1057
|
+
_offset += 8; // Get the original orientation value
|
|
1116
1058
|
|
|
1117
|
-
//
|
|
1118
|
-
orientation = dataView.getUint16(_offset, littleEndian);
|
|
1059
|
+
orientation = dataView.getUint16(_offset, littleEndian); // Override the orientation with its default value
|
|
1119
1060
|
|
|
1120
|
-
// Override the orientation with its default value
|
|
1121
1061
|
dataView.setUint16(_offset, 1, littleEndian);
|
|
1122
1062
|
break;
|
|
1123
1063
|
}
|
|
@@ -1126,12 +1066,12 @@
|
|
|
1126
1066
|
|
|
1127
1067
|
return orientation;
|
|
1128
1068
|
}
|
|
1129
|
-
|
|
1130
1069
|
/**
|
|
1131
1070
|
* Parse Exif Orientation value.
|
|
1132
1071
|
* @param {number} orientation - The orientation to parse.
|
|
1133
1072
|
* @returns {Object} The parsed result.
|
|
1134
1073
|
*/
|
|
1074
|
+
|
|
1135
1075
|
function parseOrientation(orientation) {
|
|
1136
1076
|
var rotate = 0;
|
|
1137
1077
|
var scaleX = 1;
|
|
@@ -1142,35 +1082,35 @@
|
|
|
1142
1082
|
case 2:
|
|
1143
1083
|
scaleX = -1;
|
|
1144
1084
|
break;
|
|
1145
|
-
|
|
1146
1085
|
// Rotate left 180°
|
|
1086
|
+
|
|
1147
1087
|
case 3:
|
|
1148
1088
|
rotate = -180;
|
|
1149
1089
|
break;
|
|
1150
|
-
|
|
1151
1090
|
// Flip vertical
|
|
1091
|
+
|
|
1152
1092
|
case 4:
|
|
1153
1093
|
scaleY = -1;
|
|
1154
1094
|
break;
|
|
1155
|
-
|
|
1156
1095
|
// Flip vertical and rotate right 90°
|
|
1096
|
+
|
|
1157
1097
|
case 5:
|
|
1158
1098
|
rotate = 90;
|
|
1159
1099
|
scaleY = -1;
|
|
1160
1100
|
break;
|
|
1161
|
-
|
|
1162
1101
|
// Rotate right 90°
|
|
1102
|
+
|
|
1163
1103
|
case 6:
|
|
1164
1104
|
rotate = 90;
|
|
1165
1105
|
break;
|
|
1166
|
-
|
|
1167
1106
|
// Flip horizontal and rotate right 90°
|
|
1107
|
+
|
|
1168
1108
|
case 7:
|
|
1169
1109
|
rotate = 90;
|
|
1170
1110
|
scaleX = -1;
|
|
1171
1111
|
break;
|
|
1172
|
-
|
|
1173
1112
|
// Rotate left 90°
|
|
1113
|
+
|
|
1174
1114
|
case 8:
|
|
1175
1115
|
rotate = -90;
|
|
1176
1116
|
break;
|
|
@@ -1201,34 +1141,25 @@
|
|
|
1201
1141
|
options = this.options,
|
|
1202
1142
|
container = this.container,
|
|
1203
1143
|
cropper = this.cropper;
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
1144
|
addClass(cropper, CLASS_HIDDEN);
|
|
1207
1145
|
removeClass(element, CLASS_HIDDEN);
|
|
1208
|
-
|
|
1209
1146
|
var containerData = {
|
|
1210
1147
|
width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200),
|
|
1211
1148
|
height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100)
|
|
1212
1149
|
};
|
|
1213
|
-
|
|
1214
1150
|
this.containerData = containerData;
|
|
1215
|
-
|
|
1216
1151
|
setStyle(cropper, {
|
|
1217
1152
|
width: containerData.width,
|
|
1218
1153
|
height: containerData.height
|
|
1219
1154
|
});
|
|
1220
|
-
|
|
1221
1155
|
addClass(element, CLASS_HIDDEN);
|
|
1222
1156
|
removeClass(cropper, CLASS_HIDDEN);
|
|
1223
1157
|
},
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
1158
|
// Canvas (image wrapper)
|
|
1227
1159
|
initCanvas: function initCanvas() {
|
|
1228
1160
|
var containerData = this.containerData,
|
|
1229
1161
|
imageData = this.imageData;
|
|
1230
1162
|
var viewMode = this.options.viewMode;
|
|
1231
|
-
|
|
1232
1163
|
var rotated = Math.abs(imageData.rotate) % 180 === 90;
|
|
1233
1164
|
var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;
|
|
1234
1165
|
var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;
|
|
@@ -1255,12 +1186,10 @@
|
|
|
1255
1186
|
width: canvasWidth,
|
|
1256
1187
|
height: canvasHeight
|
|
1257
1188
|
};
|
|
1258
|
-
|
|
1259
1189
|
canvasData.left = (containerData.width - canvasWidth) / 2;
|
|
1260
1190
|
canvasData.top = (containerData.height - canvasHeight) / 2;
|
|
1261
1191
|
canvasData.oldLeft = canvasData.left;
|
|
1262
1192
|
canvasData.oldTop = canvasData.top;
|
|
1263
|
-
|
|
1264
1193
|
this.canvasData = canvasData;
|
|
1265
1194
|
this.limited = viewMode === 1 || viewMode === 2;
|
|
1266
1195
|
this.limitCanvas(true, true);
|
|
@@ -1274,7 +1203,6 @@
|
|
|
1274
1203
|
cropBoxData = this.cropBoxData;
|
|
1275
1204
|
var viewMode = options.viewMode;
|
|
1276
1205
|
var aspectRatio = canvasData.aspectRatio;
|
|
1277
|
-
|
|
1278
1206
|
var cropped = this.cropped && cropBoxData;
|
|
1279
1207
|
|
|
1280
1208
|
if (sizeLimited) {
|
|
@@ -1317,8 +1245,6 @@
|
|
|
1317
1245
|
|
|
1318
1246
|
minCanvasWidth = _getAdjustedSizes.width;
|
|
1319
1247
|
minCanvasHeight = _getAdjustedSizes.height;
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
1248
|
canvasData.minWidth = minCanvasWidth;
|
|
1323
1249
|
canvasData.minHeight = minCanvasHeight;
|
|
1324
1250
|
canvasData.maxWidth = Infinity;
|
|
@@ -1329,7 +1255,6 @@
|
|
|
1329
1255
|
if (viewMode > (cropped ? 0 : 1)) {
|
|
1330
1256
|
var newCanvasLeft = containerData.width - canvasData.width;
|
|
1331
1257
|
var newCanvasTop = containerData.height - canvasData.height;
|
|
1332
|
-
|
|
1333
1258
|
canvasData.minLeft = Math.min(0, newCanvasLeft);
|
|
1334
1259
|
canvasData.minTop = Math.min(0, newCanvasTop);
|
|
1335
1260
|
canvasData.maxLeft = Math.max(0, newCanvasLeft);
|
|
@@ -1365,7 +1290,6 @@
|
|
|
1365
1290
|
var canvasData = this.canvasData,
|
|
1366
1291
|
imageData = this.imageData;
|
|
1367
1292
|
|
|
1368
|
-
|
|
1369
1293
|
if (transformed) {
|
|
1370
1294
|
var _getRotatedSizes = getRotatedSizes({
|
|
1371
1295
|
width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),
|
|
@@ -1377,7 +1301,6 @@
|
|
|
1377
1301
|
|
|
1378
1302
|
var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);
|
|
1379
1303
|
var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);
|
|
1380
|
-
|
|
1381
1304
|
canvasData.left -= (width - canvasData.width) / 2;
|
|
1382
1305
|
canvasData.top -= (height - canvasData.height) / 2;
|
|
1383
1306
|
canvasData.width = width;
|
|
@@ -1398,14 +1321,11 @@
|
|
|
1398
1321
|
|
|
1399
1322
|
canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
|
|
1400
1323
|
canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
|
|
1401
|
-
|
|
1402
1324
|
this.limitCanvas(false, true);
|
|
1403
|
-
|
|
1404
1325
|
canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);
|
|
1405
1326
|
canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop);
|
|
1406
1327
|
canvasData.oldLeft = canvasData.left;
|
|
1407
1328
|
canvasData.oldTop = canvasData.top;
|
|
1408
|
-
|
|
1409
1329
|
setStyle(this.canvas, assign({
|
|
1410
1330
|
width: canvasData.width,
|
|
1411
1331
|
height: canvasData.height
|
|
@@ -1413,7 +1333,6 @@
|
|
|
1413
1333
|
translateX: canvasData.left,
|
|
1414
1334
|
translateY: canvasData.top
|
|
1415
1335
|
})));
|
|
1416
|
-
|
|
1417
1336
|
this.renderImage(changed);
|
|
1418
1337
|
|
|
1419
1338
|
if (this.cropped && this.limited) {
|
|
@@ -1423,10 +1342,8 @@
|
|
|
1423
1342
|
renderImage: function renderImage(changed) {
|
|
1424
1343
|
var canvasData = this.canvasData,
|
|
1425
1344
|
imageData = this.imageData;
|
|
1426
|
-
|
|
1427
1345
|
var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
|
|
1428
1346
|
var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);
|
|
1429
|
-
|
|
1430
1347
|
assign(imageData, {
|
|
1431
1348
|
width: width,
|
|
1432
1349
|
height: height,
|
|
@@ -1448,7 +1365,6 @@
|
|
|
1448
1365
|
initCropBox: function initCropBox() {
|
|
1449
1366
|
var options = this.options,
|
|
1450
1367
|
canvasData = this.canvasData;
|
|
1451
|
-
|
|
1452
1368
|
var aspectRatio = options.aspectRatio || options.initialAspectRatio;
|
|
1453
1369
|
var autoCropArea = Number(options.autoCropArea) || 0.8;
|
|
1454
1370
|
var cropBoxData = {
|
|
@@ -1465,20 +1381,17 @@
|
|
|
1465
1381
|
}
|
|
1466
1382
|
|
|
1467
1383
|
this.cropBoxData = cropBoxData;
|
|
1468
|
-
this.limitCropBox(true, true);
|
|
1384
|
+
this.limitCropBox(true, true); // Initialize auto crop area
|
|
1469
1385
|
|
|
1470
|
-
// Initialize auto crop area
|
|
1471
1386
|
cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
|
|
1472
|
-
cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
|
|
1387
|
+
cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); // The width/height of auto crop area must large than "minWidth/Height"
|
|
1473
1388
|
|
|
1474
|
-
// The width/height of auto crop area must large than "minWidth/Height"
|
|
1475
1389
|
cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);
|
|
1476
1390
|
cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);
|
|
1477
1391
|
cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2;
|
|
1478
1392
|
cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2;
|
|
1479
1393
|
cropBoxData.oldLeft = cropBoxData.left;
|
|
1480
1394
|
cropBoxData.oldTop = cropBoxData.top;
|
|
1481
|
-
|
|
1482
1395
|
this.initialCropBoxData = assign({}, cropBoxData);
|
|
1483
1396
|
},
|
|
1484
1397
|
limitCropBox: function limitCropBox(sizeLimited, positionLimited) {
|
|
@@ -1489,14 +1402,12 @@
|
|
|
1489
1402
|
limited = this.limited;
|
|
1490
1403
|
var aspectRatio = options.aspectRatio;
|
|
1491
1404
|
|
|
1492
|
-
|
|
1493
1405
|
if (sizeLimited) {
|
|
1494
1406
|
var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
|
|
1495
1407
|
var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
|
|
1496
1408
|
var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;
|
|
1497
|
-
var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height;
|
|
1409
|
+
var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height; // The min/maxCropBoxWidth/Height must be less than container's width/height
|
|
1498
1410
|
|
|
1499
|
-
// The min/maxCropBoxWidth/Height must be less than container's width/height
|
|
1500
1411
|
minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);
|
|
1501
1412
|
minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);
|
|
1502
1413
|
|
|
@@ -1518,9 +1429,9 @@
|
|
|
1518
1429
|
} else {
|
|
1519
1430
|
maxCropBoxWidth = maxCropBoxHeight * aspectRatio;
|
|
1520
1431
|
}
|
|
1521
|
-
}
|
|
1432
|
+
} // The minWidth/Height must be less than maxWidth/Height
|
|
1433
|
+
|
|
1522
1434
|
|
|
1523
|
-
// The minWidth/Height must be less than maxWidth/Height
|
|
1524
1435
|
cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);
|
|
1525
1436
|
cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);
|
|
1526
1437
|
cropBoxData.maxWidth = maxCropBoxWidth;
|
|
@@ -1546,7 +1457,6 @@
|
|
|
1546
1457
|
containerData = this.containerData,
|
|
1547
1458
|
cropBoxData = this.cropBoxData;
|
|
1548
1459
|
|
|
1549
|
-
|
|
1550
1460
|
if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {
|
|
1551
1461
|
cropBoxData.left = cropBoxData.oldLeft;
|
|
1552
1462
|
}
|
|
@@ -1557,9 +1467,7 @@
|
|
|
1557
1467
|
|
|
1558
1468
|
cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
|
|
1559
1469
|
cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
|
|
1560
|
-
|
|
1561
1470
|
this.limitCropBox(false, true);
|
|
1562
|
-
|
|
1563
1471
|
cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);
|
|
1564
1472
|
cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);
|
|
1565
1473
|
cropBoxData.oldLeft = cropBoxData.left;
|
|
@@ -1596,7 +1504,6 @@
|
|
|
1596
1504
|
initPreview: function initPreview() {
|
|
1597
1505
|
var crossOrigin = this.crossOrigin;
|
|
1598
1506
|
var preview = this.options.preview;
|
|
1599
|
-
|
|
1600
1507
|
var url = crossOrigin ? this.crossOriginUrl : this.url;
|
|
1601
1508
|
var image = document.createElement('img');
|
|
1602
1509
|
|
|
@@ -1621,11 +1528,9 @@
|
|
|
1621
1528
|
}
|
|
1622
1529
|
|
|
1623
1530
|
this.previews = previews;
|
|
1624
|
-
|
|
1625
1531
|
forEach(previews, function (el) {
|
|
1626
|
-
var img = document.createElement('img');
|
|
1532
|
+
var img = document.createElement('img'); // Save the original size for recover
|
|
1627
1533
|
|
|
1628
|
-
// Save the original size for recover
|
|
1629
1534
|
setData(el, DATA_PREVIEW, {
|
|
1630
1535
|
width: el.offsetWidth,
|
|
1631
1536
|
height: el.offsetHeight,
|
|
@@ -1637,15 +1542,14 @@
|
|
|
1637
1542
|
}
|
|
1638
1543
|
|
|
1639
1544
|
img.src = url;
|
|
1640
|
-
|
|
1641
1545
|
/**
|
|
1642
1546
|
* Override img element styles
|
|
1643
1547
|
* Add `display:block` to avoid margin top issue
|
|
1644
1548
|
* Add `height:auto` to override `height` attribute on IE8
|
|
1645
1549
|
* (Occur only when margin-top <= -height)
|
|
1646
1550
|
*/
|
|
1647
|
-
img.style.cssText = 'display:block;' + 'width:100%;' + 'height:auto;' + 'min-width:0!important;' + 'min-height:0!important;' + 'max-width:none!important;' + 'max-height:none!important;' + 'image-orientation:0deg!important;"';
|
|
1648
1551
|
|
|
1552
|
+
img.style.cssText = 'display:block;' + 'width:100%;' + 'height:auto;' + 'min-width:0!important;' + 'min-height:0!important;' + 'max-width:none!important;' + 'max-height:none!important;' + 'image-orientation:0deg!important;"';
|
|
1649
1553
|
el.innerHTML = '';
|
|
1650
1554
|
el.appendChild(img);
|
|
1651
1555
|
});
|
|
@@ -1653,12 +1557,10 @@
|
|
|
1653
1557
|
resetPreview: function resetPreview() {
|
|
1654
1558
|
forEach(this.previews, function (element) {
|
|
1655
1559
|
var data = getData(element, DATA_PREVIEW);
|
|
1656
|
-
|
|
1657
1560
|
setStyle(element, {
|
|
1658
1561
|
width: data.width,
|
|
1659
1562
|
height: data.height
|
|
1660
1563
|
});
|
|
1661
|
-
|
|
1662
1564
|
element.innerHTML = data.html;
|
|
1663
1565
|
removeData(element, DATA_PREVIEW);
|
|
1664
1566
|
});
|
|
@@ -1671,7 +1573,6 @@
|
|
|
1671
1573
|
cropBoxHeight = cropBoxData.height;
|
|
1672
1574
|
var width = imageData.width,
|
|
1673
1575
|
height = imageData.height;
|
|
1674
|
-
|
|
1675
1576
|
var left = cropBoxData.left - canvasData.left - imageData.left;
|
|
1676
1577
|
var top = cropBoxData.top - canvasData.top - imageData.top;
|
|
1677
1578
|
|
|
@@ -1686,7 +1587,6 @@
|
|
|
1686
1587
|
translateX: -left,
|
|
1687
1588
|
translateY: -top
|
|
1688
1589
|
}, imageData))));
|
|
1689
|
-
|
|
1690
1590
|
forEach(this.previews, function (element) {
|
|
1691
1591
|
var data = getData(element, DATA_PREVIEW);
|
|
1692
1592
|
var originalWidth = data.width;
|
|
@@ -1710,7 +1610,6 @@
|
|
|
1710
1610
|
width: newWidth,
|
|
1711
1611
|
height: newHeight
|
|
1712
1612
|
});
|
|
1713
|
-
|
|
1714
1613
|
setStyle(element.getElementsByTagName('img')[0], assign({
|
|
1715
1614
|
width: width * ratio,
|
|
1716
1615
|
height: height * ratio
|
|
@@ -1728,7 +1627,6 @@
|
|
|
1728
1627
|
options = this.options,
|
|
1729
1628
|
cropper = this.cropper;
|
|
1730
1629
|
|
|
1731
|
-
|
|
1732
1630
|
if (isFunction(options.cropstart)) {
|
|
1733
1631
|
addListener(element, EVENT_CROP_START, options.cropstart);
|
|
1734
1632
|
}
|
|
@@ -1771,7 +1669,6 @@
|
|
|
1771
1669
|
options = this.options,
|
|
1772
1670
|
cropper = this.cropper;
|
|
1773
1671
|
|
|
1774
|
-
|
|
1775
1672
|
if (isFunction(options.cropstart)) {
|
|
1776
1673
|
removeListener(element, EVENT_CROP_START, options.cropstart);
|
|
1777
1674
|
}
|
|
@@ -1816,7 +1713,6 @@
|
|
|
1816
1713
|
var options = this.options,
|
|
1817
1714
|
container = this.container,
|
|
1818
1715
|
containerData = this.containerData;
|
|
1819
|
-
|
|
1820
1716
|
var minContainerWidth = Number(options.minContainerWidth) || 200;
|
|
1821
1717
|
var minContainerHeight = Number(options.minContainerHeight) || 100;
|
|
1822
1718
|
|
|
@@ -1824,12 +1720,11 @@
|
|
|
1824
1720
|
return;
|
|
1825
1721
|
}
|
|
1826
1722
|
|
|
1827
|
-
var ratio = container.offsetWidth / containerData.width;
|
|
1723
|
+
var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
|
|
1828
1724
|
|
|
1829
|
-
// Resize when width changed or height changed
|
|
1830
1725
|
if (ratio !== 1 || container.offsetHeight !== containerData.height) {
|
|
1831
|
-
var canvasData
|
|
1832
|
-
var cropBoxData
|
|
1726
|
+
var canvasData;
|
|
1727
|
+
var cropBoxData;
|
|
1833
1728
|
|
|
1834
1729
|
if (options.restore) {
|
|
1835
1730
|
canvasData = this.getCanvasData();
|
|
@@ -1865,15 +1760,13 @@
|
|
|
1865
1760
|
return;
|
|
1866
1761
|
}
|
|
1867
1762
|
|
|
1868
|
-
e.preventDefault();
|
|
1763
|
+
e.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21)
|
|
1869
1764
|
|
|
1870
|
-
// Limit wheel speed to prevent zoom too fast (#21)
|
|
1871
1765
|
if (this.wheeling) {
|
|
1872
1766
|
return;
|
|
1873
1767
|
}
|
|
1874
1768
|
|
|
1875
1769
|
this.wheeling = true;
|
|
1876
|
-
|
|
1877
1770
|
setTimeout(function () {
|
|
1878
1771
|
_this.wheeling = false;
|
|
1879
1772
|
}, 50);
|
|
@@ -1895,8 +1788,7 @@
|
|
|
1895
1788
|
|
|
1896
1789
|
var options = this.options,
|
|
1897
1790
|
pointers = this.pointers;
|
|
1898
|
-
|
|
1899
|
-
var action = void 0;
|
|
1791
|
+
var action;
|
|
1900
1792
|
|
|
1901
1793
|
if (e.changedTouches) {
|
|
1902
1794
|
// Handle touch event
|
|
@@ -1923,11 +1815,10 @@
|
|
|
1923
1815
|
action: action
|
|
1924
1816
|
}) === false) {
|
|
1925
1817
|
return;
|
|
1926
|
-
}
|
|
1818
|
+
} // This line is required for preventing page zooming in iOS browsers
|
|
1927
1819
|
|
|
1928
|
-
// This line is required for preventing page zooming in iOS browsers
|
|
1929
|
-
e.preventDefault();
|
|
1930
1820
|
|
|
1821
|
+
e.preventDefault();
|
|
1931
1822
|
this.action = action;
|
|
1932
1823
|
this.cropping = false;
|
|
1933
1824
|
|
|
@@ -1939,14 +1830,11 @@
|
|
|
1939
1830
|
cropMove: function cropMove(e) {
|
|
1940
1831
|
var action = this.action;
|
|
1941
1832
|
|
|
1942
|
-
|
|
1943
1833
|
if (this.disabled || !action) {
|
|
1944
1834
|
return;
|
|
1945
1835
|
}
|
|
1946
1836
|
|
|
1947
1837
|
var pointers = this.pointers;
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
1838
|
e.preventDefault();
|
|
1951
1839
|
|
|
1952
1840
|
if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
|
|
@@ -1958,10 +1846,11 @@
|
|
|
1958
1846
|
|
|
1959
1847
|
if (e.changedTouches) {
|
|
1960
1848
|
forEach(e.changedTouches, function (touch) {
|
|
1961
|
-
|
|
1849
|
+
// The first parameter should not be undefined (#432)
|
|
1850
|
+
assign(pointers[touch.identifier] || {}, getPointer(touch, true));
|
|
1962
1851
|
});
|
|
1963
1852
|
} else {
|
|
1964
|
-
assign(pointers[e.pointerId || 0], getPointer(e, true));
|
|
1853
|
+
assign(pointers[e.pointerId || 0] || {}, getPointer(e, true));
|
|
1965
1854
|
}
|
|
1966
1855
|
|
|
1967
1856
|
this.change(e);
|
|
@@ -1974,7 +1863,6 @@
|
|
|
1974
1863
|
var action = this.action,
|
|
1975
1864
|
pointers = this.pointers;
|
|
1976
1865
|
|
|
1977
|
-
|
|
1978
1866
|
if (e.changedTouches) {
|
|
1979
1867
|
forEach(e.changedTouches, function (touch) {
|
|
1980
1868
|
delete pointers[touch.identifier];
|
|
@@ -2018,7 +1906,6 @@
|
|
|
2018
1906
|
top = cropBoxData.top,
|
|
2019
1907
|
width = cropBoxData.width,
|
|
2020
1908
|
height = cropBoxData.height;
|
|
2021
|
-
|
|
2022
1909
|
var right = left + width;
|
|
2023
1910
|
var bottom = top + height;
|
|
2024
1911
|
var minLeft = 0;
|
|
@@ -2026,9 +1913,8 @@
|
|
|
2026
1913
|
var maxWidth = containerData.width;
|
|
2027
1914
|
var maxHeight = containerData.height;
|
|
2028
1915
|
var renderable = true;
|
|
2029
|
-
var offset
|
|
1916
|
+
var offset; // Locking aspect ratio in "free mode" by holding shift key
|
|
2030
1917
|
|
|
2031
|
-
// Locking aspect ratio in "free mode" by holding shift key
|
|
2032
1918
|
if (!aspectRatio && e.shiftKey) {
|
|
2033
1919
|
aspectRatio = width && height ? width / height : 1;
|
|
2034
1920
|
}
|
|
@@ -2036,7 +1922,6 @@
|
|
|
2036
1922
|
if (this.limited) {
|
|
2037
1923
|
minLeft = cropBoxData.minLeft;
|
|
2038
1924
|
minTop = cropBoxData.minTop;
|
|
2039
|
-
|
|
2040
1925
|
maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);
|
|
2041
1926
|
maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);
|
|
2042
1927
|
}
|
|
@@ -2046,6 +1931,7 @@
|
|
|
2046
1931
|
x: pointer.endX - pointer.startX,
|
|
2047
1932
|
y: pointer.endY - pointer.startY
|
|
2048
1933
|
};
|
|
1934
|
+
|
|
2049
1935
|
var check = function check(side) {
|
|
2050
1936
|
switch (side) {
|
|
2051
1937
|
case ACTION_EAST:
|
|
@@ -2086,8 +1972,8 @@
|
|
|
2086
1972
|
left += range.x;
|
|
2087
1973
|
top += range.y;
|
|
2088
1974
|
break;
|
|
2089
|
-
|
|
2090
1975
|
// Resize crop box
|
|
1976
|
+
|
|
2091
1977
|
case ACTION_EAST:
|
|
2092
1978
|
if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) {
|
|
2093
1979
|
renderable = false;
|
|
@@ -2393,20 +2279,20 @@
|
|
|
2393
2279
|
}
|
|
2394
2280
|
|
|
2395
2281
|
break;
|
|
2396
|
-
|
|
2397
2282
|
// Move canvas
|
|
2283
|
+
|
|
2398
2284
|
case ACTION_MOVE:
|
|
2399
2285
|
this.move(range.x, range.y);
|
|
2400
2286
|
renderable = false;
|
|
2401
2287
|
break;
|
|
2402
|
-
|
|
2403
2288
|
// Zoom canvas
|
|
2289
|
+
|
|
2404
2290
|
case ACTION_ZOOM:
|
|
2405
2291
|
this.zoom(getMaxZoomRatio(pointers), e);
|
|
2406
2292
|
renderable = false;
|
|
2407
2293
|
break;
|
|
2408
|
-
|
|
2409
2294
|
// Create crop box
|
|
2295
|
+
|
|
2410
2296
|
case ACTION_CROP:
|
|
2411
2297
|
if (!range.x || !range.y) {
|
|
2412
2298
|
renderable = false;
|
|
@@ -2428,9 +2314,9 @@
|
|
|
2428
2314
|
|
|
2429
2315
|
if (range.y < 0) {
|
|
2430
2316
|
top -= height;
|
|
2431
|
-
}
|
|
2317
|
+
} // Show the crop box if is hidden
|
|
2318
|
+
|
|
2432
2319
|
|
|
2433
|
-
// Show the crop box if is hidden
|
|
2434
2320
|
if (!this.cropped) {
|
|
2435
2321
|
removeClass(this.cropBox, CLASS_HIDDEN);
|
|
2436
2322
|
this.cropped = true;
|
|
@@ -2452,9 +2338,9 @@
|
|
|
2452
2338
|
cropBoxData.top = top;
|
|
2453
2339
|
this.action = action;
|
|
2454
2340
|
this.renderCropBox();
|
|
2455
|
-
}
|
|
2341
|
+
} // Override
|
|
2342
|
+
|
|
2456
2343
|
|
|
2457
|
-
// Override
|
|
2458
2344
|
forEach(pointers, function (p) {
|
|
2459
2345
|
p.startX = p.endX;
|
|
2460
2346
|
p.startY = p.endY;
|
|
@@ -2479,8 +2365,6 @@
|
|
|
2479
2365
|
|
|
2480
2366
|
return this;
|
|
2481
2367
|
},
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
2368
|
// Reset the image and crop box to their initial states
|
|
2485
2369
|
reset: function reset() {
|
|
2486
2370
|
if (this.ready && !this.disabled) {
|
|
@@ -2496,8 +2380,6 @@
|
|
|
2496
2380
|
|
|
2497
2381
|
return this;
|
|
2498
2382
|
},
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
2383
|
// Clear the crop box
|
|
2502
2384
|
clear: function clear() {
|
|
2503
2385
|
if (this.cropped && !this.disabled) {
|
|
@@ -2507,12 +2389,10 @@
|
|
|
2507
2389
|
width: 0,
|
|
2508
2390
|
height: 0
|
|
2509
2391
|
});
|
|
2510
|
-
|
|
2511
2392
|
this.cropped = false;
|
|
2512
2393
|
this.renderCropBox();
|
|
2513
|
-
this.limitCanvas(true, true);
|
|
2394
|
+
this.limitCanvas(true, true); // Render canvas after crop box rendered
|
|
2514
2395
|
|
|
2515
|
-
// Render canvas after crop box rendered
|
|
2516
2396
|
this.renderCanvas();
|
|
2517
2397
|
removeClass(this.dragBox, CLASS_MODAL);
|
|
2518
2398
|
addClass(this.cropBox, CLASS_HIDDEN);
|
|
@@ -2521,7 +2401,6 @@
|
|
|
2521
2401
|
return this;
|
|
2522
2402
|
},
|
|
2523
2403
|
|
|
2524
|
-
|
|
2525
2404
|
/**
|
|
2526
2405
|
* Replace the image's src and rebuild the cropper
|
|
2527
2406
|
* @param {string} url - The new URL.
|
|
@@ -2542,7 +2421,6 @@
|
|
|
2542
2421
|
|
|
2543
2422
|
if (this.ready) {
|
|
2544
2423
|
this.viewBoxImage.src = url;
|
|
2545
|
-
|
|
2546
2424
|
forEach(this.previews, function (element) {
|
|
2547
2425
|
element.getElementsByTagName('img')[0].src = url;
|
|
2548
2426
|
});
|
|
@@ -2560,8 +2438,6 @@
|
|
|
2560
2438
|
|
|
2561
2439
|
return this;
|
|
2562
2440
|
},
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
2441
|
// Enable (unfreeze) the cropper
|
|
2566
2442
|
enable: function enable() {
|
|
2567
2443
|
if (this.ready && this.disabled) {
|
|
@@ -2571,8 +2447,6 @@
|
|
|
2571
2447
|
|
|
2572
2448
|
return this;
|
|
2573
2449
|
},
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
2450
|
// Disable (freeze) the cropper
|
|
2577
2451
|
disable: function disable() {
|
|
2578
2452
|
if (this.ready && !this.disabled) {
|
|
@@ -2583,7 +2457,6 @@
|
|
|
2583
2457
|
return this;
|
|
2584
2458
|
},
|
|
2585
2459
|
|
|
2586
|
-
|
|
2587
2460
|
/**
|
|
2588
2461
|
* Destroy the cropper and remove the instance from the image
|
|
2589
2462
|
* @returns {Cropper} this
|
|
@@ -2591,22 +2464,20 @@
|
|
|
2591
2464
|
destroy: function destroy() {
|
|
2592
2465
|
var element = this.element;
|
|
2593
2466
|
|
|
2594
|
-
|
|
2595
|
-
if (!getData(element, NAMESPACE)) {
|
|
2467
|
+
if (!element[NAMESPACE]) {
|
|
2596
2468
|
return this;
|
|
2597
2469
|
}
|
|
2598
2470
|
|
|
2471
|
+
element[NAMESPACE] = undefined;
|
|
2472
|
+
|
|
2599
2473
|
if (this.isImg && this.replaced) {
|
|
2600
2474
|
element.src = this.originalUrl;
|
|
2601
2475
|
}
|
|
2602
2476
|
|
|
2603
2477
|
this.uncreate();
|
|
2604
|
-
removeData(element, NAMESPACE);
|
|
2605
|
-
|
|
2606
2478
|
return this;
|
|
2607
2479
|
},
|
|
2608
2480
|
|
|
2609
|
-
|
|
2610
2481
|
/**
|
|
2611
2482
|
* Move the canvas with relative offsets
|
|
2612
2483
|
* @param {number} offsetX - The relative offset distance on the x-axis.
|
|
@@ -2615,15 +2486,12 @@
|
|
|
2615
2486
|
*/
|
|
2616
2487
|
move: function move(offsetX) {
|
|
2617
2488
|
var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX;
|
|
2618
|
-
var
|
|
2619
|
-
left =
|
|
2620
|
-
top =
|
|
2621
|
-
|
|
2622
|
-
|
|
2489
|
+
var _this$canvasData = this.canvasData,
|
|
2490
|
+
left = _this$canvasData.left,
|
|
2491
|
+
top = _this$canvasData.top;
|
|
2623
2492
|
return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));
|
|
2624
2493
|
},
|
|
2625
2494
|
|
|
2626
|
-
|
|
2627
2495
|
/**
|
|
2628
2496
|
* Move the canvas to an absolute point
|
|
2629
2497
|
* @param {number} x - The x-axis coordinate.
|
|
@@ -2633,9 +2501,7 @@
|
|
|
2633
2501
|
moveTo: function moveTo(x) {
|
|
2634
2502
|
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
|
|
2635
2503
|
var canvasData = this.canvasData;
|
|
2636
|
-
|
|
2637
2504
|
var changed = false;
|
|
2638
|
-
|
|
2639
2505
|
x = Number(x);
|
|
2640
2506
|
y = Number(y);
|
|
2641
2507
|
|
|
@@ -2658,7 +2524,6 @@
|
|
|
2658
2524
|
return this;
|
|
2659
2525
|
},
|
|
2660
2526
|
|
|
2661
|
-
|
|
2662
2527
|
/**
|
|
2663
2528
|
* Zoom the canvas with a relative ratio
|
|
2664
2529
|
* @param {number} ratio - The target ratio.
|
|
@@ -2667,8 +2532,6 @@
|
|
|
2667
2532
|
*/
|
|
2668
2533
|
zoom: function zoom(ratio, _originalEvent) {
|
|
2669
2534
|
var canvasData = this.canvasData;
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
2535
|
ratio = Number(ratio);
|
|
2673
2536
|
|
|
2674
2537
|
if (ratio < 0) {
|
|
@@ -2680,7 +2543,6 @@
|
|
|
2680
2543
|
return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);
|
|
2681
2544
|
},
|
|
2682
2545
|
|
|
2683
|
-
|
|
2684
2546
|
/**
|
|
2685
2547
|
* Zoom the canvas to an absolute ratio
|
|
2686
2548
|
* @param {number} ratio - The target ratio.
|
|
@@ -2695,8 +2557,6 @@
|
|
|
2695
2557
|
height = canvasData.height,
|
|
2696
2558
|
naturalWidth = canvasData.naturalWidth,
|
|
2697
2559
|
naturalHeight = canvasData.naturalHeight;
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
2560
|
ratio = Number(ratio);
|
|
2701
2561
|
|
|
2702
2562
|
if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {
|
|
@@ -2713,14 +2573,12 @@
|
|
|
2713
2573
|
|
|
2714
2574
|
if (_originalEvent) {
|
|
2715
2575
|
var pointers = this.pointers;
|
|
2716
|
-
|
|
2717
2576
|
var offset = getOffset(this.cropper);
|
|
2718
2577
|
var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
|
|
2719
2578
|
pageX: _originalEvent.pageX,
|
|
2720
2579
|
pageY: _originalEvent.pageY
|
|
2721
|
-
};
|
|
2580
|
+
}; // Zoom from the triggering point of the event
|
|
2722
2581
|
|
|
2723
|
-
// Zoom from the triggering point of the event
|
|
2724
2582
|
canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width);
|
|
2725
2583
|
canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height);
|
|
2726
2584
|
} else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
|
|
@@ -2740,7 +2598,6 @@
|
|
|
2740
2598
|
return this;
|
|
2741
2599
|
},
|
|
2742
2600
|
|
|
2743
|
-
|
|
2744
2601
|
/**
|
|
2745
2602
|
* Rotate the canvas with a relative degree
|
|
2746
2603
|
* @param {number} degree - The rotate degree.
|
|
@@ -2750,7 +2607,6 @@
|
|
|
2750
2607
|
return this.rotateTo((this.imageData.rotate || 0) + Number(degree));
|
|
2751
2608
|
},
|
|
2752
2609
|
|
|
2753
|
-
|
|
2754
2610
|
/**
|
|
2755
2611
|
* Rotate the canvas to an absolute degree
|
|
2756
2612
|
* @param {number} degree - The rotate degree.
|
|
@@ -2767,7 +2623,6 @@
|
|
|
2767
2623
|
return this;
|
|
2768
2624
|
},
|
|
2769
2625
|
|
|
2770
|
-
|
|
2771
2626
|
/**
|
|
2772
2627
|
* Scale the image on the x-axis.
|
|
2773
2628
|
* @param {number} scaleX - The scale ratio on the x-axis.
|
|
@@ -2775,12 +2630,9 @@
|
|
|
2775
2630
|
*/
|
|
2776
2631
|
scaleX: function scaleX(_scaleX) {
|
|
2777
2632
|
var scaleY = this.imageData.scaleY;
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
2633
|
return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1);
|
|
2781
2634
|
},
|
|
2782
2635
|
|
|
2783
|
-
|
|
2784
2636
|
/**
|
|
2785
2637
|
* Scale the image on the y-axis.
|
|
2786
2638
|
* @param {number} scaleY - The scale ratio on the y-axis.
|
|
@@ -2788,12 +2640,9 @@
|
|
|
2788
2640
|
*/
|
|
2789
2641
|
scaleY: function scaleY(_scaleY) {
|
|
2790
2642
|
var scaleX = this.imageData.scaleX;
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
2643
|
return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY);
|
|
2794
2644
|
},
|
|
2795
2645
|
|
|
2796
|
-
|
|
2797
2646
|
/**
|
|
2798
2647
|
* Scale the image
|
|
2799
2648
|
* @param {number} scaleX - The scale ratio on the x-axis.
|
|
@@ -2803,9 +2652,7 @@
|
|
|
2803
2652
|
scale: function scale(scaleX) {
|
|
2804
2653
|
var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;
|
|
2805
2654
|
var imageData = this.imageData;
|
|
2806
|
-
|
|
2807
2655
|
var transformed = false;
|
|
2808
|
-
|
|
2809
2656
|
scaleX = Number(scaleX);
|
|
2810
2657
|
scaleY = Number(scaleY);
|
|
2811
2658
|
|
|
@@ -2828,7 +2675,6 @@
|
|
|
2828
2675
|
return this;
|
|
2829
2676
|
},
|
|
2830
2677
|
|
|
2831
|
-
|
|
2832
2678
|
/**
|
|
2833
2679
|
* Get the cropped area position and size data (base on the original image)
|
|
2834
2680
|
* @param {boolean} [rounded=false] - Indicate if round the data values or not.
|
|
@@ -2840,8 +2686,7 @@
|
|
|
2840
2686
|
imageData = this.imageData,
|
|
2841
2687
|
canvasData = this.canvasData,
|
|
2842
2688
|
cropBoxData = this.cropBoxData;
|
|
2843
|
-
|
|
2844
|
-
var data = void 0;
|
|
2689
|
+
var data;
|
|
2845
2690
|
|
|
2846
2691
|
if (this.ready && this.cropped) {
|
|
2847
2692
|
data = {
|
|
@@ -2850,9 +2695,7 @@
|
|
|
2850
2695
|
width: cropBoxData.width,
|
|
2851
2696
|
height: cropBoxData.height
|
|
2852
2697
|
};
|
|
2853
|
-
|
|
2854
2698
|
var ratio = imageData.width / imageData.naturalWidth;
|
|
2855
|
-
|
|
2856
2699
|
forEach(data, function (n, i) {
|
|
2857
2700
|
data[i] = n / ratio;
|
|
2858
2701
|
});
|
|
@@ -2862,7 +2705,6 @@
|
|
|
2862
2705
|
// we should round the top-left corner and the dimension (#343).
|
|
2863
2706
|
var bottom = Math.round(data.y + data.height);
|
|
2864
2707
|
var right = Math.round(data.x + data.width);
|
|
2865
|
-
|
|
2866
2708
|
data.x = Math.round(data.x);
|
|
2867
2709
|
data.y = Math.round(data.y);
|
|
2868
2710
|
data.width = right - data.x;
|
|
@@ -2889,7 +2731,6 @@
|
|
|
2889
2731
|
return data;
|
|
2890
2732
|
},
|
|
2891
2733
|
|
|
2892
|
-
|
|
2893
2734
|
/**
|
|
2894
2735
|
* Set the cropped area position and size with new data
|
|
2895
2736
|
* @param {Object} data - The new data.
|
|
@@ -2899,7 +2740,6 @@
|
|
|
2899
2740
|
var options = this.options,
|
|
2900
2741
|
imageData = this.imageData,
|
|
2901
2742
|
canvasData = this.canvasData;
|
|
2902
|
-
|
|
2903
2743
|
var cropBoxData = {};
|
|
2904
2744
|
|
|
2905
2745
|
if (this.ready && !this.disabled && isPlainObject(data)) {
|
|
@@ -2952,7 +2792,6 @@
|
|
|
2952
2792
|
return this;
|
|
2953
2793
|
},
|
|
2954
2794
|
|
|
2955
|
-
|
|
2956
2795
|
/**
|
|
2957
2796
|
* Get the container size data.
|
|
2958
2797
|
* @returns {Object} The result container data.
|
|
@@ -2961,7 +2800,6 @@
|
|
|
2961
2800
|
return this.ready ? assign({}, this.containerData) : {};
|
|
2962
2801
|
},
|
|
2963
2802
|
|
|
2964
|
-
|
|
2965
2803
|
/**
|
|
2966
2804
|
* Get the image position and size data.
|
|
2967
2805
|
* @returns {Object} The result image data.
|
|
@@ -2970,14 +2808,12 @@
|
|
|
2970
2808
|
return this.sized ? assign({}, this.imageData) : {};
|
|
2971
2809
|
},
|
|
2972
2810
|
|
|
2973
|
-
|
|
2974
2811
|
/**
|
|
2975
2812
|
* Get the canvas position and size data.
|
|
2976
2813
|
* @returns {Object} The result canvas data.
|
|
2977
2814
|
*/
|
|
2978
2815
|
getCanvasData: function getCanvasData() {
|
|
2979
2816
|
var canvasData = this.canvasData;
|
|
2980
|
-
|
|
2981
2817
|
var data = {};
|
|
2982
2818
|
|
|
2983
2819
|
if (this.ready) {
|
|
@@ -2989,7 +2825,6 @@
|
|
|
2989
2825
|
return data;
|
|
2990
2826
|
},
|
|
2991
2827
|
|
|
2992
|
-
|
|
2993
2828
|
/**
|
|
2994
2829
|
* Set the canvas position and size with new data.
|
|
2995
2830
|
* @param {Object} data - The new canvas data.
|
|
@@ -2999,7 +2834,6 @@
|
|
|
2999
2834
|
var canvasData = this.canvasData;
|
|
3000
2835
|
var aspectRatio = canvasData.aspectRatio;
|
|
3001
2836
|
|
|
3002
|
-
|
|
3003
2837
|
if (this.ready && !this.disabled && isPlainObject(data)) {
|
|
3004
2838
|
if (isNumber(data.left)) {
|
|
3005
2839
|
canvasData.left = data.left;
|
|
@@ -3023,15 +2857,13 @@
|
|
|
3023
2857
|
return this;
|
|
3024
2858
|
},
|
|
3025
2859
|
|
|
3026
|
-
|
|
3027
2860
|
/**
|
|
3028
2861
|
* Get the crop box position and size data.
|
|
3029
2862
|
* @returns {Object} The result crop box data.
|
|
3030
2863
|
*/
|
|
3031
2864
|
getCropBoxData: function getCropBoxData() {
|
|
3032
2865
|
var cropBoxData = this.cropBoxData;
|
|
3033
|
-
|
|
3034
|
-
var data = void 0;
|
|
2866
|
+
var data;
|
|
3035
2867
|
|
|
3036
2868
|
if (this.ready && this.cropped) {
|
|
3037
2869
|
data = {
|
|
@@ -3045,7 +2877,6 @@
|
|
|
3045
2877
|
return data || {};
|
|
3046
2878
|
},
|
|
3047
2879
|
|
|
3048
|
-
|
|
3049
2880
|
/**
|
|
3050
2881
|
* Set the crop box position and size with new data.
|
|
3051
2882
|
* @param {Object} data - The new crop box data.
|
|
@@ -3054,9 +2885,8 @@
|
|
|
3054
2885
|
setCropBoxData: function setCropBoxData(data) {
|
|
3055
2886
|
var cropBoxData = this.cropBoxData;
|
|
3056
2887
|
var aspectRatio = this.options.aspectRatio;
|
|
3057
|
-
|
|
3058
|
-
var
|
|
3059
|
-
var heightChanged = void 0;
|
|
2888
|
+
var widthChanged;
|
|
2889
|
+
var heightChanged;
|
|
3060
2890
|
|
|
3061
2891
|
if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {
|
|
3062
2892
|
if (isNumber(data.left)) {
|
|
@@ -3091,7 +2921,6 @@
|
|
|
3091
2921
|
return this;
|
|
3092
2922
|
},
|
|
3093
2923
|
|
|
3094
|
-
|
|
3095
2924
|
/**
|
|
3096
2925
|
* Get a canvas drawn the cropped image.
|
|
3097
2926
|
* @param {Object} [options={}] - The config options.
|
|
@@ -3105,19 +2934,17 @@
|
|
|
3105
2934
|
}
|
|
3106
2935
|
|
|
3107
2936
|
var canvasData = this.canvasData;
|
|
2937
|
+
var source = getSourceCanvas(this.image, this.imageData, canvasData, options); // Returns the source canvas if it is not cropped.
|
|
3108
2938
|
|
|
3109
|
-
var source = getSourceCanvas(this.image, this.imageData, canvasData, options);
|
|
3110
|
-
|
|
3111
|
-
// Returns the source canvas if it is not cropped.
|
|
3112
2939
|
if (!this.cropped) {
|
|
3113
2940
|
return source;
|
|
3114
2941
|
}
|
|
3115
2942
|
|
|
3116
|
-
var
|
|
3117
|
-
initialX =
|
|
3118
|
-
initialY =
|
|
3119
|
-
initialWidth =
|
|
3120
|
-
initialHeight =
|
|
2943
|
+
var _this$getData = this.getData(),
|
|
2944
|
+
initialX = _this$getData.x,
|
|
2945
|
+
initialY = _this$getData.y,
|
|
2946
|
+
initialWidth = _this$getData.width,
|
|
2947
|
+
initialHeight = _this$getData.height;
|
|
3121
2948
|
|
|
3122
2949
|
var ratio = source.width / Math.floor(canvasData.naturalWidth);
|
|
3123
2950
|
|
|
@@ -3150,42 +2977,34 @@
|
|
|
3150
2977
|
|
|
3151
2978
|
width = Math.min(maxSizes.width, Math.max(minSizes.width, width));
|
|
3152
2979
|
height = Math.min(maxSizes.height, Math.max(minSizes.height, height));
|
|
3153
|
-
|
|
3154
2980
|
var canvas = document.createElement('canvas');
|
|
3155
2981
|
var context = canvas.getContext('2d');
|
|
3156
|
-
|
|
3157
2982
|
canvas.width = normalizeDecimalNumber(width);
|
|
3158
2983
|
canvas.height = normalizeDecimalNumber(height);
|
|
3159
|
-
|
|
3160
2984
|
context.fillStyle = options.fillColor || 'transparent';
|
|
3161
2985
|
context.fillRect(0, 0, width, height);
|
|
3162
|
-
|
|
3163
2986
|
var _options$imageSmoothi = options.imageSmoothingEnabled,
|
|
3164
|
-
imageSmoothingEnabled = _options$imageSmoothi ===
|
|
2987
|
+
imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,
|
|
3165
2988
|
imageSmoothingQuality = options.imageSmoothingQuality;
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
2989
|
context.imageSmoothingEnabled = imageSmoothingEnabled;
|
|
3169
2990
|
|
|
3170
2991
|
if (imageSmoothingQuality) {
|
|
3171
2992
|
context.imageSmoothingQuality = imageSmoothingQuality;
|
|
3172
|
-
}
|
|
2993
|
+
} // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage
|
|
2994
|
+
|
|
3173
2995
|
|
|
3174
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage
|
|
3175
2996
|
var sourceWidth = source.width;
|
|
3176
|
-
var sourceHeight = source.height;
|
|
2997
|
+
var sourceHeight = source.height; // Source canvas parameters
|
|
3177
2998
|
|
|
3178
|
-
// Source canvas parameters
|
|
3179
2999
|
var srcX = initialX;
|
|
3180
3000
|
var srcY = initialY;
|
|
3181
|
-
var srcWidth
|
|
3182
|
-
var srcHeight
|
|
3001
|
+
var srcWidth;
|
|
3002
|
+
var srcHeight; // Destination canvas parameters
|
|
3183
3003
|
|
|
3184
|
-
|
|
3185
|
-
var
|
|
3186
|
-
var
|
|
3187
|
-
var
|
|
3188
|
-
var dstHeight = void 0;
|
|
3004
|
+
var dstX;
|
|
3005
|
+
var dstY;
|
|
3006
|
+
var dstWidth;
|
|
3007
|
+
var dstHeight;
|
|
3189
3008
|
|
|
3190
3009
|
if (srcX <= -initialWidth || srcX > sourceWidth) {
|
|
3191
3010
|
srcX = 0;
|
|
@@ -3219,25 +3038,21 @@
|
|
|
3219
3038
|
dstHeight = srcHeight;
|
|
3220
3039
|
}
|
|
3221
3040
|
|
|
3222
|
-
var params = [srcX, srcY, srcWidth, srcHeight];
|
|
3041
|
+
var params = [srcX, srcY, srcWidth, srcHeight]; // Avoid "IndexSizeError"
|
|
3223
3042
|
|
|
3224
|
-
// Avoid "IndexSizeError"
|
|
3225
3043
|
if (dstWidth > 0 && dstHeight > 0) {
|
|
3226
3044
|
var scale = width / initialWidth;
|
|
3227
|
-
|
|
3228
3045
|
params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);
|
|
3229
|
-
}
|
|
3230
|
-
|
|
3231
|
-
// All the numerical parameters should be integer for `drawImage`
|
|
3046
|
+
} // All the numerical parameters should be integer for `drawImage`
|
|
3232
3047
|
// https://github.com/fengyuanchen/cropper/issues/476
|
|
3233
|
-
|
|
3048
|
+
|
|
3049
|
+
|
|
3050
|
+
context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) {
|
|
3234
3051
|
return Math.floor(normalizeDecimalNumber(param));
|
|
3235
3052
|
}))));
|
|
3236
|
-
|
|
3237
3053
|
return canvas;
|
|
3238
3054
|
},
|
|
3239
3055
|
|
|
3240
|
-
|
|
3241
3056
|
/**
|
|
3242
3057
|
* Change the aspect ratio of the crop box.
|
|
3243
3058
|
* @param {number} aspectRatio - The new aspect ratio.
|
|
@@ -3246,7 +3061,6 @@
|
|
|
3246
3061
|
setAspectRatio: function setAspectRatio(aspectRatio) {
|
|
3247
3062
|
var options = this.options;
|
|
3248
3063
|
|
|
3249
|
-
|
|
3250
3064
|
if (!this.disabled && !isUndefined(aspectRatio)) {
|
|
3251
3065
|
// 0 -> NaN
|
|
3252
3066
|
options.aspectRatio = Math.max(0, aspectRatio) || NaN;
|
|
@@ -3263,7 +3077,6 @@
|
|
|
3263
3077
|
return this;
|
|
3264
3078
|
},
|
|
3265
3079
|
|
|
3266
|
-
|
|
3267
3080
|
/**
|
|
3268
3081
|
* Change the drag mode.
|
|
3269
3082
|
* @param {string} mode - The new drag mode.
|
|
@@ -3274,13 +3087,10 @@
|
|
|
3274
3087
|
dragBox = this.dragBox,
|
|
3275
3088
|
face = this.face;
|
|
3276
3089
|
|
|
3277
|
-
|
|
3278
3090
|
if (this.ready && !this.disabled) {
|
|
3279
3091
|
var croppable = mode === DRAG_MODE_CROP;
|
|
3280
3092
|
var movable = options.movable && mode === DRAG_MODE_MOVE;
|
|
3281
|
-
|
|
3282
3093
|
mode = croppable || movable ? mode : DRAG_MODE_NONE;
|
|
3283
|
-
|
|
3284
3094
|
options.dragMode = mode;
|
|
3285
3095
|
setData(dragBox, DATA_ACTION, mode);
|
|
3286
3096
|
toggleClass(dragBox, CLASS_CROP, croppable);
|
|
@@ -3300,7 +3110,9 @@
|
|
|
3300
3110
|
|
|
3301
3111
|
var AnotherCropper = WINDOW.Cropper;
|
|
3302
3112
|
|
|
3303
|
-
var Cropper =
|
|
3113
|
+
var Cropper =
|
|
3114
|
+
/*#__PURE__*/
|
|
3115
|
+
function () {
|
|
3304
3116
|
/**
|
|
3305
3117
|
* Create a new Cropper.
|
|
3306
3118
|
* @param {Element} element - The target element for cropping.
|
|
@@ -3308,7 +3120,8 @@
|
|
|
3308
3120
|
*/
|
|
3309
3121
|
function Cropper(element) {
|
|
3310
3122
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
3311
|
-
|
|
3123
|
+
|
|
3124
|
+
_classCallCheck(this, Cropper);
|
|
3312
3125
|
|
|
3313
3126
|
if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {
|
|
3314
3127
|
throw new Error('The first argument is required and must be an <img> or <canvas> element.');
|
|
@@ -3327,33 +3140,30 @@
|
|
|
3327
3140
|
this.init();
|
|
3328
3141
|
}
|
|
3329
3142
|
|
|
3330
|
-
|
|
3331
|
-
key:
|
|
3143
|
+
_createClass(Cropper, [{
|
|
3144
|
+
key: "init",
|
|
3332
3145
|
value: function init() {
|
|
3333
3146
|
var element = this.element;
|
|
3334
|
-
|
|
3335
3147
|
var tagName = element.tagName.toLowerCase();
|
|
3336
|
-
var url
|
|
3148
|
+
var url;
|
|
3337
3149
|
|
|
3338
|
-
if (
|
|
3150
|
+
if (element[NAMESPACE]) {
|
|
3339
3151
|
return;
|
|
3340
3152
|
}
|
|
3341
3153
|
|
|
3342
|
-
|
|
3154
|
+
element[NAMESPACE] = this;
|
|
3343
3155
|
|
|
3344
3156
|
if (tagName === 'img') {
|
|
3345
|
-
this.isImg = true;
|
|
3157
|
+
this.isImg = true; // e.g.: "img/picture.jpg"
|
|
3346
3158
|
|
|
3347
|
-
// e.g.: "img/picture.jpg"
|
|
3348
3159
|
url = element.getAttribute('src') || '';
|
|
3349
|
-
this.originalUrl = url;
|
|
3160
|
+
this.originalUrl = url; // Stop when it's a blank image
|
|
3350
3161
|
|
|
3351
|
-
// Stop when it's a blank image
|
|
3352
3162
|
if (!url) {
|
|
3353
3163
|
return;
|
|
3354
|
-
}
|
|
3164
|
+
} // e.g.: "http://example.com/img/picture.jpg"
|
|
3165
|
+
|
|
3355
3166
|
|
|
3356
|
-
// e.g.: "http://example.com/img/picture.jpg"
|
|
3357
3167
|
url = element.src;
|
|
3358
3168
|
} else if (tagName === 'canvas' && window.HTMLCanvasElement) {
|
|
3359
3169
|
url = element.toDataURL();
|
|
@@ -3362,7 +3172,7 @@
|
|
|
3362
3172
|
this.load(url);
|
|
3363
3173
|
}
|
|
3364
3174
|
}, {
|
|
3365
|
-
key:
|
|
3175
|
+
key: "load",
|
|
3366
3176
|
value: function load(url) {
|
|
3367
3177
|
var _this = this;
|
|
3368
3178
|
|
|
@@ -3372,21 +3182,20 @@
|
|
|
3372
3182
|
|
|
3373
3183
|
this.url = url;
|
|
3374
3184
|
this.imageData = {};
|
|
3375
|
-
|
|
3376
3185
|
var element = this.element,
|
|
3377
3186
|
options = this.options;
|
|
3378
3187
|
|
|
3379
|
-
|
|
3380
3188
|
if (!options.rotatable && !options.scalable) {
|
|
3381
3189
|
options.checkOrientation = false;
|
|
3382
|
-
}
|
|
3190
|
+
} // Only IE10+ supports Typed Arrays
|
|
3191
|
+
|
|
3383
3192
|
|
|
3384
3193
|
if (!options.checkOrientation || !window.ArrayBuffer) {
|
|
3385
3194
|
this.clone();
|
|
3386
3195
|
return;
|
|
3387
|
-
}
|
|
3196
|
+
} // XMLHttpRequest disallows to open a Data URL in some browsers like IE11 and Safari
|
|
3197
|
+
|
|
3388
3198
|
|
|
3389
|
-
// XMLHttpRequest disallows to open a Data URL in some browsers like IE11 and Safari
|
|
3390
3199
|
if (REGEXP_DATA_URL.test(url)) {
|
|
3391
3200
|
if (REGEXP_DATA_URL_JPEG.test(url)) {
|
|
3392
3201
|
this.read(dataURLToArrayBuffer(url));
|
|
@@ -3398,50 +3207,52 @@
|
|
|
3398
3207
|
}
|
|
3399
3208
|
|
|
3400
3209
|
var xhr = new XMLHttpRequest();
|
|
3401
|
-
|
|
3210
|
+
var clone = this.clone.bind(this);
|
|
3402
3211
|
this.reloading = true;
|
|
3403
3212
|
this.xhr = xhr;
|
|
3213
|
+
xhr.ontimeout = clone;
|
|
3214
|
+
xhr.onabort = clone;
|
|
3215
|
+
xhr.onerror = clone;
|
|
3404
3216
|
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
xhr.ontimeout = done;
|
|
3411
|
-
xhr.onabort = done;
|
|
3412
|
-
xhr.onerror = function () {
|
|
3413
|
-
done();
|
|
3414
|
-
_this.clone();
|
|
3217
|
+
xhr.onprogress = function () {
|
|
3218
|
+
if (xhr.getResponseHeader('content-type') !== MIME_TYPE_JPEG) {
|
|
3219
|
+
xhr.abort();
|
|
3220
|
+
}
|
|
3415
3221
|
};
|
|
3416
3222
|
|
|
3417
3223
|
xhr.onload = function () {
|
|
3418
|
-
done();
|
|
3419
3224
|
_this.read(xhr.response);
|
|
3420
3225
|
};
|
|
3421
3226
|
|
|
3422
|
-
|
|
3227
|
+
xhr.onloadend = function () {
|
|
3228
|
+
_this.reloading = false;
|
|
3229
|
+
_this.xhr = null;
|
|
3230
|
+
}; // Bust cache when there is a "crossOrigin" property to avoid browser cache error
|
|
3231
|
+
|
|
3232
|
+
|
|
3423
3233
|
if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {
|
|
3424
3234
|
url = addTimestamp(url);
|
|
3425
3235
|
}
|
|
3426
3236
|
|
|
3427
|
-
xhr.open('
|
|
3237
|
+
xhr.open('GET', url);
|
|
3428
3238
|
xhr.responseType = 'arraybuffer';
|
|
3429
3239
|
xhr.withCredentials = element.crossOrigin === 'use-credentials';
|
|
3430
3240
|
xhr.send();
|
|
3431
3241
|
}
|
|
3432
3242
|
}, {
|
|
3433
|
-
key:
|
|
3243
|
+
key: "read",
|
|
3434
3244
|
value: function read(arrayBuffer) {
|
|
3435
3245
|
var options = this.options,
|
|
3436
3246
|
imageData = this.imageData;
|
|
3437
|
-
|
|
3438
|
-
var orientation = getOrientation(arrayBuffer);
|
|
3247
|
+
var orientation = resetAndGetOrientation(arrayBuffer);
|
|
3439
3248
|
var rotate = 0;
|
|
3440
3249
|
var scaleX = 1;
|
|
3441
3250
|
var scaleY = 1;
|
|
3442
3251
|
|
|
3443
3252
|
if (orientation > 1) {
|
|
3444
|
-
|
|
3253
|
+
// Generate a new Data URL with the orientation value set to 1
|
|
3254
|
+
// as some iOS browsers will render image with its orientation
|
|
3255
|
+
this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
|
|
3445
3256
|
|
|
3446
3257
|
var _parseOrientation = parseOrientation(orientation);
|
|
3447
3258
|
|
|
@@ -3462,31 +3273,27 @@
|
|
|
3462
3273
|
this.clone();
|
|
3463
3274
|
}
|
|
3464
3275
|
}, {
|
|
3465
|
-
key:
|
|
3276
|
+
key: "clone",
|
|
3466
3277
|
value: function clone() {
|
|
3467
3278
|
var element = this.element,
|
|
3468
3279
|
url = this.url;
|
|
3469
|
-
|
|
3470
|
-
var
|
|
3471
|
-
var crossOriginUrl = void 0;
|
|
3280
|
+
var crossOrigin;
|
|
3281
|
+
var crossOriginUrl;
|
|
3472
3282
|
|
|
3473
3283
|
if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
|
|
3474
3284
|
crossOrigin = element.crossOrigin;
|
|
3475
3285
|
|
|
3476
|
-
|
|
3477
3286
|
if (crossOrigin) {
|
|
3478
3287
|
crossOriginUrl = url;
|
|
3479
3288
|
} else {
|
|
3480
|
-
crossOrigin = 'anonymous';
|
|
3289
|
+
crossOrigin = 'anonymous'; // Bust cache when there is not a "crossOrigin" property
|
|
3481
3290
|
|
|
3482
|
-
// Bust cache when there is not a "crossOrigin" property
|
|
3483
3291
|
crossOriginUrl = addTimestamp(url);
|
|
3484
3292
|
}
|
|
3485
3293
|
}
|
|
3486
3294
|
|
|
3487
3295
|
this.crossOrigin = crossOrigin;
|
|
3488
3296
|
this.crossOriginUrl = crossOriginUrl;
|
|
3489
|
-
|
|
3490
3297
|
var image = document.createElement('img');
|
|
3491
3298
|
|
|
3492
3299
|
if (crossOrigin) {
|
|
@@ -3501,17 +3308,16 @@
|
|
|
3501
3308
|
element.parentNode.insertBefore(image, element.nextSibling);
|
|
3502
3309
|
}
|
|
3503
3310
|
}, {
|
|
3504
|
-
key:
|
|
3311
|
+
key: "start",
|
|
3505
3312
|
value: function start() {
|
|
3506
3313
|
var _this2 = this;
|
|
3507
3314
|
|
|
3508
3315
|
var image = this.isImg ? this.element : this.image;
|
|
3509
|
-
|
|
3510
3316
|
image.onload = null;
|
|
3511
3317
|
image.onerror = null;
|
|
3512
3318
|
this.sizing = true;
|
|
3513
|
-
|
|
3514
3319
|
var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);
|
|
3320
|
+
|
|
3515
3321
|
var done = function done(naturalWidth, naturalHeight) {
|
|
3516
3322
|
assign(_this2.imageData, {
|
|
3517
3323
|
naturalWidth: naturalWidth,
|
|
@@ -3520,10 +3326,11 @@
|
|
|
3520
3326
|
});
|
|
3521
3327
|
_this2.sizing = false;
|
|
3522
3328
|
_this2.sized = true;
|
|
3329
|
+
|
|
3523
3330
|
_this2.build();
|
|
3524
|
-
};
|
|
3331
|
+
}; // Modern browsers (except Safari)
|
|
3332
|
+
|
|
3525
3333
|
|
|
3526
|
-
// Modern browsers (except Safari)
|
|
3527
3334
|
if (image.naturalWidth && !IS_SAFARI) {
|
|
3528
3335
|
done(image.naturalWidth, image.naturalHeight);
|
|
3529
3336
|
return;
|
|
@@ -3531,7 +3338,6 @@
|
|
|
3531
3338
|
|
|
3532
3339
|
var sizingImage = document.createElement('img');
|
|
3533
3340
|
var body = document.body || document.documentElement;
|
|
3534
|
-
|
|
3535
3341
|
this.sizingImage = sizingImage;
|
|
3536
3342
|
|
|
3537
3343
|
sizingImage.onload = function () {
|
|
@@ -3542,28 +3348,25 @@
|
|
|
3542
3348
|
}
|
|
3543
3349
|
};
|
|
3544
3350
|
|
|
3545
|
-
sizingImage.src = image.src;
|
|
3546
|
-
|
|
3547
|
-
// iOS Safari will convert the image automatically
|
|
3351
|
+
sizingImage.src = image.src; // iOS Safari will convert the image automatically
|
|
3548
3352
|
// with its orientation once append it into DOM (#279)
|
|
3353
|
+
|
|
3549
3354
|
if (!IS_SAFARI) {
|
|
3550
3355
|
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;';
|
|
3551
3356
|
body.appendChild(sizingImage);
|
|
3552
3357
|
}
|
|
3553
3358
|
}
|
|
3554
3359
|
}, {
|
|
3555
|
-
key:
|
|
3360
|
+
key: "stop",
|
|
3556
3361
|
value: function stop() {
|
|
3557
3362
|
var image = this.image;
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
3363
|
image.onload = null;
|
|
3561
3364
|
image.onerror = null;
|
|
3562
3365
|
image.parentNode.removeChild(image);
|
|
3563
3366
|
this.image = null;
|
|
3564
3367
|
}
|
|
3565
3368
|
}, {
|
|
3566
|
-
key:
|
|
3369
|
+
key: "build",
|
|
3567
3370
|
value: function build() {
|
|
3568
3371
|
if (!this.sized || this.ready) {
|
|
3569
3372
|
return;
|
|
@@ -3571,61 +3374,50 @@
|
|
|
3571
3374
|
|
|
3572
3375
|
var element = this.element,
|
|
3573
3376
|
options = this.options,
|
|
3574
|
-
image = this.image;
|
|
3575
|
-
|
|
3576
|
-
// Create cropper elements
|
|
3377
|
+
image = this.image; // Create cropper elements
|
|
3577
3378
|
|
|
3578
3379
|
var container = element.parentNode;
|
|
3579
3380
|
var template = document.createElement('div');
|
|
3580
|
-
|
|
3581
3381
|
template.innerHTML = TEMPLATE;
|
|
3582
|
-
|
|
3583
|
-
var
|
|
3584
|
-
var
|
|
3585
|
-
var
|
|
3586
|
-
var
|
|
3587
|
-
var face = cropBox.querySelector('.' + NAMESPACE + '-face');
|
|
3588
|
-
|
|
3382
|
+
var cropper = template.querySelector(".".concat(NAMESPACE, "-container"));
|
|
3383
|
+
var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas"));
|
|
3384
|
+
var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box"));
|
|
3385
|
+
var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box"));
|
|
3386
|
+
var face = cropBox.querySelector(".".concat(NAMESPACE, "-face"));
|
|
3589
3387
|
this.container = container;
|
|
3590
3388
|
this.cropper = cropper;
|
|
3591
3389
|
this.canvas = canvas;
|
|
3592
3390
|
this.dragBox = dragBox;
|
|
3593
3391
|
this.cropBox = cropBox;
|
|
3594
|
-
this.viewBox = cropper.querySelector(
|
|
3392
|
+
this.viewBox = cropper.querySelector(".".concat(NAMESPACE, "-view-box"));
|
|
3595
3393
|
this.face = face;
|
|
3394
|
+
canvas.appendChild(image); // Hide the original image
|
|
3596
3395
|
|
|
3597
|
-
|
|
3396
|
+
addClass(element, CLASS_HIDDEN); // Inserts the cropper after to the current image
|
|
3598
3397
|
|
|
3599
|
-
//
|
|
3600
|
-
addClass(element, CLASS_HIDDEN);
|
|
3398
|
+
container.insertBefore(cropper, element.nextSibling); // Show the image if is hidden
|
|
3601
3399
|
|
|
3602
|
-
// Inserts the cropper after to the current image
|
|
3603
|
-
container.insertBefore(cropper, element.nextSibling);
|
|
3604
|
-
|
|
3605
|
-
// Show the image if is hidden
|
|
3606
3400
|
if (!this.isImg) {
|
|
3607
3401
|
removeClass(image, CLASS_HIDE);
|
|
3608
3402
|
}
|
|
3609
3403
|
|
|
3610
3404
|
this.initPreview();
|
|
3611
3405
|
this.bind();
|
|
3612
|
-
|
|
3613
3406
|
options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN;
|
|
3614
3407
|
options.aspectRatio = Math.max(0, options.aspectRatio) || NaN;
|
|
3615
3408
|
options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0;
|
|
3616
|
-
|
|
3617
3409
|
addClass(cropBox, CLASS_HIDDEN);
|
|
3618
3410
|
|
|
3619
3411
|
if (!options.guides) {
|
|
3620
|
-
addClass(cropBox.getElementsByClassName(NAMESPACE
|
|
3412
|
+
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN);
|
|
3621
3413
|
}
|
|
3622
3414
|
|
|
3623
3415
|
if (!options.center) {
|
|
3624
|
-
addClass(cropBox.getElementsByClassName(NAMESPACE
|
|
3416
|
+
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN);
|
|
3625
3417
|
}
|
|
3626
3418
|
|
|
3627
3419
|
if (options.background) {
|
|
3628
|
-
addClass(cropper, NAMESPACE
|
|
3420
|
+
addClass(cropper, "".concat(NAMESPACE, "-bg"));
|
|
3629
3421
|
}
|
|
3630
3422
|
|
|
3631
3423
|
if (!options.highlight) {
|
|
@@ -3638,8 +3430,8 @@
|
|
|
3638
3430
|
}
|
|
3639
3431
|
|
|
3640
3432
|
if (!options.cropBoxResizable) {
|
|
3641
|
-
addClass(cropBox.getElementsByClassName(NAMESPACE
|
|
3642
|
-
addClass(cropBox.getElementsByClassName(NAMESPACE
|
|
3433
|
+
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-line")), CLASS_HIDDEN);
|
|
3434
|
+
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-point")), CLASS_HIDDEN);
|
|
3643
3435
|
}
|
|
3644
3436
|
|
|
3645
3437
|
this.render();
|
|
@@ -3661,7 +3453,7 @@
|
|
|
3661
3453
|
dispatchEvent(element, EVENT_READY);
|
|
3662
3454
|
}
|
|
3663
3455
|
}, {
|
|
3664
|
-
key:
|
|
3456
|
+
key: "unbuild",
|
|
3665
3457
|
value: function unbuild() {
|
|
3666
3458
|
if (!this.ready) {
|
|
3667
3459
|
return;
|
|
@@ -3674,7 +3466,7 @@
|
|
|
3674
3466
|
removeClass(this.element, CLASS_HIDDEN);
|
|
3675
3467
|
}
|
|
3676
3468
|
}, {
|
|
3677
|
-
key:
|
|
3469
|
+
key: "uncreate",
|
|
3678
3470
|
value: function uncreate() {
|
|
3679
3471
|
if (this.ready) {
|
|
3680
3472
|
this.unbuild();
|
|
@@ -3685,35 +3477,35 @@
|
|
|
3685
3477
|
this.sizing = false;
|
|
3686
3478
|
this.sized = false;
|
|
3687
3479
|
} else if (this.reloading) {
|
|
3480
|
+
this.xhr.onabort = null;
|
|
3688
3481
|
this.xhr.abort();
|
|
3689
3482
|
} else if (this.image) {
|
|
3690
3483
|
this.stop();
|
|
3691
3484
|
}
|
|
3692
3485
|
}
|
|
3693
|
-
|
|
3694
3486
|
/**
|
|
3695
3487
|
* Get the no conflict cropper class.
|
|
3696
3488
|
* @returns {Cropper} The cropper class.
|
|
3697
3489
|
*/
|
|
3698
3490
|
|
|
3699
3491
|
}], [{
|
|
3700
|
-
key:
|
|
3492
|
+
key: "noConflict",
|
|
3701
3493
|
value: function noConflict() {
|
|
3702
3494
|
window.Cropper = AnotherCropper;
|
|
3703
3495
|
return Cropper;
|
|
3704
3496
|
}
|
|
3705
|
-
|
|
3706
3497
|
/**
|
|
3707
3498
|
* Change the default options.
|
|
3708
3499
|
* @param {Object} options - The new default options.
|
|
3709
3500
|
*/
|
|
3710
3501
|
|
|
3711
3502
|
}, {
|
|
3712
|
-
key:
|
|
3503
|
+
key: "setDefaults",
|
|
3713
3504
|
value: function setDefaults(options) {
|
|
3714
3505
|
assign(DEFAULTS, isPlainObject(options) && options);
|
|
3715
3506
|
}
|
|
3716
3507
|
}]);
|
|
3508
|
+
|
|
3717
3509
|
return Cropper;
|
|
3718
3510
|
}();
|
|
3719
3511
|
|