react-native-expo-cropper 1.2.36 → 1.2.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/babel.config.js +6 -0
- package/dist/CustomCamera.js +343 -245
- package/dist/ImageCropper.js +1700 -513
- package/dist/ImageCropperStyles.js +217 -217
- package/dist/ImageMaskProcessor.js +177 -0
- package/dist/ImageProcessor.js +40 -52
- package/package.json +5 -5
- package/src/CustomCamera.js +92 -18
- package/src/ImageCropper.js +1039 -170
|
@@ -1,218 +1,218 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
var _reactNative = require("react-native");
|
|
8
|
-
var _Dimensions$get = _reactNative.Dimensions.get('window'),
|
|
9
|
-
SCREEN_WIDTH = _Dimensions$get.width,
|
|
10
|
-
SCREEN_HEIGHT = _Dimensions$get.height;
|
|
11
|
-
var IMAGE_HEIGHT = SCREEN_HEIGHT;
|
|
12
|
-
var IMAGE_WIDTH = SCREEN_WIDTH;
|
|
13
|
-
var PRIMARY_GREEN = '#198754';
|
|
14
|
-
var DEEP_BLACK = '#0B0B0B';
|
|
15
|
-
var GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
|
|
16
|
-
var styles = _reactNative.StyleSheet.create({
|
|
17
|
-
container: {
|
|
18
|
-
flex: 1,
|
|
19
|
-
alignItems: 'center',
|
|
20
|
-
backgroundColor: DEEP_BLACK
|
|
21
|
-
},
|
|
22
|
-
buttonContainer: {
|
|
23
|
-
position: 'absolute',
|
|
24
|
-
bottom: 50,
|
|
25
|
-
left: 0,
|
|
26
|
-
right: 0,
|
|
27
|
-
flexDirection: 'row',
|
|
28
|
-
flexWrap: 'wrap',
|
|
29
|
-
justifyContent: 'center',
|
|
30
|
-
alignItems: 'center',
|
|
31
|
-
paddingHorizontal: 10,
|
|
32
|
-
zIndex: 10,
|
|
33
|
-
gap: 10
|
|
34
|
-
},
|
|
35
|
-
iconButton: {
|
|
36
|
-
backgroundColor: PRIMARY_GREEN,
|
|
37
|
-
width: 60,
|
|
38
|
-
height: 60,
|
|
39
|
-
borderRadius: 30,
|
|
40
|
-
alignItems: 'center',
|
|
41
|
-
justifyContent: 'center',
|
|
42
|
-
marginRight: 5
|
|
43
|
-
},
|
|
44
|
-
button: {
|
|
45
|
-
flex: 1,
|
|
46
|
-
width: "100%",
|
|
47
|
-
padding: 10,
|
|
48
|
-
alignItems: "center",
|
|
49
|
-
justifyContent: "center",
|
|
50
|
-
backgroundColor: "#549433",
|
|
51
|
-
borderRadius: 5,
|
|
52
|
-
marginBottom: 20,
|
|
53
|
-
marginRight: 5
|
|
54
|
-
},
|
|
55
|
-
buttonText: {
|
|
56
|
-
color: 'white',
|
|
57
|
-
fontSize: 18,
|
|
58
|
-
fontWeight: '600',
|
|
59
|
-
textAlign: 'center'
|
|
60
|
-
},
|
|
61
|
-
iconText: {
|
|
62
|
-
color: PRIMARY_GREEN,
|
|
63
|
-
fontSize: 16,
|
|
64
|
-
fontWeight: '600',
|
|
65
|
-
textAlign: 'center'
|
|
66
|
-
},
|
|
67
|
-
imageContainer: {
|
|
68
|
-
width: IMAGE_WIDTH,
|
|
69
|
-
height: "80%",
|
|
70
|
-
justifyContent: 'center',
|
|
71
|
-
alignItems: 'center',
|
|
72
|
-
overflow: 'hidden',
|
|
73
|
-
backgroundColor: 'black'
|
|
74
|
-
},
|
|
75
|
-
image: {
|
|
76
|
-
width: '100%',
|
|
77
|
-
height: '100%',
|
|
78
|
-
resizeMode: 'contain'
|
|
79
|
-
},
|
|
80
|
-
overlay: {
|
|
81
|
-
position: 'absolute',
|
|
82
|
-
top: 0,
|
|
83
|
-
left: 0,
|
|
84
|
-
width: '100%',
|
|
85
|
-
height: '100%',
|
|
86
|
-
zIndex: 1
|
|
87
|
-
},
|
|
88
|
-
croppedImage: {
|
|
89
|
-
width: IMAGE_WIDTH,
|
|
90
|
-
height: IMAGE_HEIGHT,
|
|
91
|
-
resizeMode: 'cover',
|
|
92
|
-
marginTop: 10,
|
|
93
|
-
borderWidth: 2,
|
|
94
|
-
borderColor: 'white',
|
|
95
|
-
borderRadius: 10
|
|
96
|
-
},
|
|
97
|
-
fixedButtonContainer: {
|
|
98
|
-
position: 'absolute',
|
|
99
|
-
bottom: 100,
|
|
100
|
-
left: 0,
|
|
101
|
-
right: 0,
|
|
102
|
-
flexDirection: 'row',
|
|
103
|
-
justifyContent: 'center',
|
|
104
|
-
flexWrap: 'wrap',
|
|
105
|
-
gap: 10,
|
|
106
|
-
paddingHorizontal: 10
|
|
107
|
-
},
|
|
108
|
-
fixedButton: {
|
|
109
|
-
backgroundColor: PRIMARY_GREEN,
|
|
110
|
-
paddingVertical: 18,
|
|
111
|
-
paddingHorizontal: 30,
|
|
112
|
-
borderRadius: 12,
|
|
113
|
-
margin: 6,
|
|
114
|
-
alignItems: 'center',
|
|
115
|
-
justifyContent: 'center',
|
|
116
|
-
borderWidth: 0,
|
|
117
|
-
width: SCREEN_WIDTH * 0.4,
|
|
118
|
-
height: 60
|
|
119
|
-
},
|
|
120
|
-
centerButtonsContainer: {
|
|
121
|
-
position: 'absolute',
|
|
122
|
-
bottom: 20,
|
|
123
|
-
left: 0,
|
|
124
|
-
right: 0,
|
|
125
|
-
alignItems: 'center',
|
|
126
|
-
justifyContent: 'center',
|
|
127
|
-
zIndex: 10,
|
|
128
|
-
gap: 10
|
|
129
|
-
},
|
|
130
|
-
welcomeText: {
|
|
131
|
-
position: 'absolute',
|
|
132
|
-
top: '40%',
|
|
133
|
-
left: 20,
|
|
134
|
-
right: 20,
|
|
135
|
-
textAlign: 'center',
|
|
136
|
-
color: GLOW_WHITE,
|
|
137
|
-
fontSize: 40,
|
|
138
|
-
fontWeight: '800',
|
|
139
|
-
zIndex: 10
|
|
140
|
-
},
|
|
141
|
-
startButton: {
|
|
142
|
-
backgroundColor: PRIMARY_GREEN,
|
|
143
|
-
paddingVertical: 18,
|
|
144
|
-
paddingHorizontal: 30,
|
|
145
|
-
borderRadius: 12,
|
|
146
|
-
margin: 6,
|
|
147
|
-
alignItems: 'center',
|
|
148
|
-
justifyContent: 'center',
|
|
149
|
-
borderWidth: 0,
|
|
150
|
-
width: SCREEN_WIDTH * 0.9,
|
|
151
|
-
height: 70
|
|
152
|
-
},
|
|
153
|
-
startButtonText: {
|
|
154
|
-
color: 'white',
|
|
155
|
-
fontSize: 18,
|
|
156
|
-
fontWeight: '600',
|
|
157
|
-
textAlign: 'center'
|
|
158
|
-
},
|
|
159
|
-
loadingOverlay: {
|
|
160
|
-
flex: 1,
|
|
161
|
-
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
162
|
-
justifyContent: 'center',
|
|
163
|
-
alignItems: 'center',
|
|
164
|
-
position: 'absolute',
|
|
165
|
-
top: 0,
|
|
166
|
-
bottom: 0,
|
|
167
|
-
left: 0,
|
|
168
|
-
right: 0,
|
|
169
|
-
zIndex: 9999
|
|
170
|
-
},
|
|
171
|
-
loadingGif: {
|
|
172
|
-
width: 120,
|
|
173
|
-
height: 120
|
|
174
|
-
},
|
|
175
|
-
fullscreenImageContainer: {
|
|
176
|
-
position: 'absolute',
|
|
177
|
-
top: 0,
|
|
178
|
-
left: 0,
|
|
179
|
-
width: SCREEN_WIDTH,
|
|
180
|
-
height: SCREEN_HEIGHT,
|
|
181
|
-
backgroundColor: 'black',
|
|
182
|
-
justifyContent: 'center',
|
|
183
|
-
alignItems: 'center',
|
|
184
|
-
zIndex: 9999
|
|
185
|
-
},
|
|
186
|
-
previewContainer: {
|
|
187
|
-
flex: 1,
|
|
188
|
-
backgroundColor: DEEP_BLACK,
|
|
189
|
-
justifyContent: 'center',
|
|
190
|
-
alignItems: 'center',
|
|
191
|
-
width: '100%'
|
|
192
|
-
},
|
|
193
|
-
previewImage: {
|
|
194
|
-
width: SCREEN_WIDTH,
|
|
195
|
-
height: '80%'
|
|
196
|
-
},
|
|
197
|
-
previewButtonContainer: {
|
|
198
|
-
position: 'absolute',
|
|
199
|
-
bottom: 50,
|
|
200
|
-
left: 0,
|
|
201
|
-
right: 0,
|
|
202
|
-
flexDirection: 'row',
|
|
203
|
-
justifyContent: 'space-around',
|
|
204
|
-
paddingHorizontal: 20
|
|
205
|
-
},
|
|
206
|
-
previewButton: {
|
|
207
|
-
backgroundColor: PRIMARY_GREEN,
|
|
208
|
-
width: 60,
|
|
209
|
-
height: 60,
|
|
210
|
-
borderRadius: 30,
|
|
211
|
-
alignItems: 'center',
|
|
212
|
-
justifyContent: 'center'
|
|
213
|
-
},
|
|
214
|
-
useButton: {
|
|
215
|
-
backgroundColor: GLOW_WHITE
|
|
216
|
-
}
|
|
217
|
-
});
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
8
|
+
var _Dimensions$get = _reactNative.Dimensions.get('window'),
|
|
9
|
+
SCREEN_WIDTH = _Dimensions$get.width,
|
|
10
|
+
SCREEN_HEIGHT = _Dimensions$get.height;
|
|
11
|
+
var IMAGE_HEIGHT = SCREEN_HEIGHT;
|
|
12
|
+
var IMAGE_WIDTH = SCREEN_WIDTH;
|
|
13
|
+
var PRIMARY_GREEN = '#198754';
|
|
14
|
+
var DEEP_BLACK = '#0B0B0B';
|
|
15
|
+
var GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
|
|
16
|
+
var styles = _reactNative.StyleSheet.create({
|
|
17
|
+
container: {
|
|
18
|
+
flex: 1,
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
backgroundColor: DEEP_BLACK
|
|
21
|
+
},
|
|
22
|
+
buttonContainer: {
|
|
23
|
+
position: 'absolute',
|
|
24
|
+
bottom: 50,
|
|
25
|
+
left: 0,
|
|
26
|
+
right: 0,
|
|
27
|
+
flexDirection: 'row',
|
|
28
|
+
flexWrap: 'wrap',
|
|
29
|
+
justifyContent: 'center',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
paddingHorizontal: 10,
|
|
32
|
+
zIndex: 10,
|
|
33
|
+
gap: 10
|
|
34
|
+
},
|
|
35
|
+
iconButton: {
|
|
36
|
+
backgroundColor: PRIMARY_GREEN,
|
|
37
|
+
width: 60,
|
|
38
|
+
height: 60,
|
|
39
|
+
borderRadius: 30,
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
marginRight: 5
|
|
43
|
+
},
|
|
44
|
+
button: {
|
|
45
|
+
flex: 1,
|
|
46
|
+
width: "100%",
|
|
47
|
+
padding: 10,
|
|
48
|
+
alignItems: "center",
|
|
49
|
+
justifyContent: "center",
|
|
50
|
+
backgroundColor: "#549433",
|
|
51
|
+
borderRadius: 5,
|
|
52
|
+
marginBottom: 20,
|
|
53
|
+
marginRight: 5
|
|
54
|
+
},
|
|
55
|
+
buttonText: {
|
|
56
|
+
color: 'white',
|
|
57
|
+
fontSize: 18,
|
|
58
|
+
fontWeight: '600',
|
|
59
|
+
textAlign: 'center'
|
|
60
|
+
},
|
|
61
|
+
iconText: {
|
|
62
|
+
color: PRIMARY_GREEN,
|
|
63
|
+
fontSize: 16,
|
|
64
|
+
fontWeight: '600',
|
|
65
|
+
textAlign: 'center'
|
|
66
|
+
},
|
|
67
|
+
imageContainer: {
|
|
68
|
+
width: IMAGE_WIDTH,
|
|
69
|
+
height: "80%",
|
|
70
|
+
justifyContent: 'center',
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
overflow: 'hidden',
|
|
73
|
+
backgroundColor: 'black'
|
|
74
|
+
},
|
|
75
|
+
image: {
|
|
76
|
+
width: '100%',
|
|
77
|
+
height: '100%',
|
|
78
|
+
resizeMode: 'contain'
|
|
79
|
+
},
|
|
80
|
+
overlay: {
|
|
81
|
+
position: 'absolute',
|
|
82
|
+
top: 0,
|
|
83
|
+
left: 0,
|
|
84
|
+
width: '100%',
|
|
85
|
+
height: '100%',
|
|
86
|
+
zIndex: 1
|
|
87
|
+
},
|
|
88
|
+
croppedImage: {
|
|
89
|
+
width: IMAGE_WIDTH,
|
|
90
|
+
height: IMAGE_HEIGHT,
|
|
91
|
+
resizeMode: 'cover',
|
|
92
|
+
marginTop: 10,
|
|
93
|
+
borderWidth: 2,
|
|
94
|
+
borderColor: 'white',
|
|
95
|
+
borderRadius: 10
|
|
96
|
+
},
|
|
97
|
+
fixedButtonContainer: {
|
|
98
|
+
position: 'absolute',
|
|
99
|
+
bottom: 100,
|
|
100
|
+
left: 0,
|
|
101
|
+
right: 0,
|
|
102
|
+
flexDirection: 'row',
|
|
103
|
+
justifyContent: 'center',
|
|
104
|
+
flexWrap: 'wrap',
|
|
105
|
+
gap: 10,
|
|
106
|
+
paddingHorizontal: 10
|
|
107
|
+
},
|
|
108
|
+
fixedButton: {
|
|
109
|
+
backgroundColor: PRIMARY_GREEN,
|
|
110
|
+
paddingVertical: 18,
|
|
111
|
+
paddingHorizontal: 30,
|
|
112
|
+
borderRadius: 12,
|
|
113
|
+
margin: 6,
|
|
114
|
+
alignItems: 'center',
|
|
115
|
+
justifyContent: 'center',
|
|
116
|
+
borderWidth: 0,
|
|
117
|
+
width: SCREEN_WIDTH * 0.4,
|
|
118
|
+
height: 60
|
|
119
|
+
},
|
|
120
|
+
centerButtonsContainer: {
|
|
121
|
+
position: 'absolute',
|
|
122
|
+
bottom: 20,
|
|
123
|
+
left: 0,
|
|
124
|
+
right: 0,
|
|
125
|
+
alignItems: 'center',
|
|
126
|
+
justifyContent: 'center',
|
|
127
|
+
zIndex: 10,
|
|
128
|
+
gap: 10
|
|
129
|
+
},
|
|
130
|
+
welcomeText: {
|
|
131
|
+
position: 'absolute',
|
|
132
|
+
top: '40%',
|
|
133
|
+
left: 20,
|
|
134
|
+
right: 20,
|
|
135
|
+
textAlign: 'center',
|
|
136
|
+
color: GLOW_WHITE,
|
|
137
|
+
fontSize: 40,
|
|
138
|
+
fontWeight: '800',
|
|
139
|
+
zIndex: 10
|
|
140
|
+
},
|
|
141
|
+
startButton: {
|
|
142
|
+
backgroundColor: PRIMARY_GREEN,
|
|
143
|
+
paddingVertical: 18,
|
|
144
|
+
paddingHorizontal: 30,
|
|
145
|
+
borderRadius: 12,
|
|
146
|
+
margin: 6,
|
|
147
|
+
alignItems: 'center',
|
|
148
|
+
justifyContent: 'center',
|
|
149
|
+
borderWidth: 0,
|
|
150
|
+
width: SCREEN_WIDTH * 0.9,
|
|
151
|
+
height: 70
|
|
152
|
+
},
|
|
153
|
+
startButtonText: {
|
|
154
|
+
color: 'white',
|
|
155
|
+
fontSize: 18,
|
|
156
|
+
fontWeight: '600',
|
|
157
|
+
textAlign: 'center'
|
|
158
|
+
},
|
|
159
|
+
loadingOverlay: {
|
|
160
|
+
flex: 1,
|
|
161
|
+
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
162
|
+
justifyContent: 'center',
|
|
163
|
+
alignItems: 'center',
|
|
164
|
+
position: 'absolute',
|
|
165
|
+
top: 0,
|
|
166
|
+
bottom: 0,
|
|
167
|
+
left: 0,
|
|
168
|
+
right: 0,
|
|
169
|
+
zIndex: 9999
|
|
170
|
+
},
|
|
171
|
+
loadingGif: {
|
|
172
|
+
width: 120,
|
|
173
|
+
height: 120
|
|
174
|
+
},
|
|
175
|
+
fullscreenImageContainer: {
|
|
176
|
+
position: 'absolute',
|
|
177
|
+
top: 0,
|
|
178
|
+
left: 0,
|
|
179
|
+
width: SCREEN_WIDTH,
|
|
180
|
+
height: SCREEN_HEIGHT,
|
|
181
|
+
backgroundColor: 'black',
|
|
182
|
+
justifyContent: 'center',
|
|
183
|
+
alignItems: 'center',
|
|
184
|
+
zIndex: 9999
|
|
185
|
+
},
|
|
186
|
+
previewContainer: {
|
|
187
|
+
flex: 1,
|
|
188
|
+
backgroundColor: DEEP_BLACK,
|
|
189
|
+
justifyContent: 'center',
|
|
190
|
+
alignItems: 'center',
|
|
191
|
+
width: '100%'
|
|
192
|
+
},
|
|
193
|
+
previewImage: {
|
|
194
|
+
width: SCREEN_WIDTH,
|
|
195
|
+
height: '80%'
|
|
196
|
+
},
|
|
197
|
+
previewButtonContainer: {
|
|
198
|
+
position: 'absolute',
|
|
199
|
+
bottom: 50,
|
|
200
|
+
left: 0,
|
|
201
|
+
right: 0,
|
|
202
|
+
flexDirection: 'row',
|
|
203
|
+
justifyContent: 'space-around',
|
|
204
|
+
paddingHorizontal: 20
|
|
205
|
+
},
|
|
206
|
+
previewButton: {
|
|
207
|
+
backgroundColor: PRIMARY_GREEN,
|
|
208
|
+
width: 60,
|
|
209
|
+
height: 60,
|
|
210
|
+
borderRadius: 30,
|
|
211
|
+
alignItems: 'center',
|
|
212
|
+
justifyContent: 'center'
|
|
213
|
+
},
|
|
214
|
+
useButton: {
|
|
215
|
+
backgroundColor: GLOW_WHITE
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
218
|
var _default = exports["default"] = styles;
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.applyMaskToImage = exports.MaskView = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactNative = require("react-native");
|
|
10
|
+
var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
|
|
11
|
+
var _reactNativeViewShot = require("react-native-view-shot");
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
|
|
13
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
14
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
15
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
16
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
17
|
+
/**
|
|
18
|
+
* ImageMaskProcessor - Module pour appliquer un masque alpha à une image
|
|
19
|
+
*
|
|
20
|
+
* NOTE: Ce module est actuellement désactivé par défaut (enableMask = false)
|
|
21
|
+
* car captureRef peut se bloquer sur certaines configurations.
|
|
22
|
+
*
|
|
23
|
+
* Pour activer le masque, mettre enableMask = true dans ImageCropper.js
|
|
24
|
+
* ATTENTION: Peut causer des blocages sur certaines configurations
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Crée un chemin SVG à partir de points
|
|
29
|
+
*/
|
|
30
|
+
var createPathFromPoints = function createPathFromPoints(points) {
|
|
31
|
+
if (points.length < 3) return '';
|
|
32
|
+
var path = "M ".concat(points[0].x, " ").concat(points[0].y, " ");
|
|
33
|
+
for (var i = 1; i < points.length; i++) {
|
|
34
|
+
path += "L ".concat(points[i].x, " ").concat(points[i].y, " ");
|
|
35
|
+
}
|
|
36
|
+
return path + 'Z';
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Composant MaskView - Vue avec image et masque SVG
|
|
41
|
+
* Utilisé pour capturer l'image avec le masque appliqué
|
|
42
|
+
*/
|
|
43
|
+
var MaskView = exports.MaskView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
44
|
+
var imageUri = _ref.imageUri,
|
|
45
|
+
points = _ref.points,
|
|
46
|
+
width = _ref.width,
|
|
47
|
+
height = _ref.height;
|
|
48
|
+
var path = createPathFromPoints(points);
|
|
49
|
+
|
|
50
|
+
// ✅ CORRECTION CRITIQUE :
|
|
51
|
+
// Utiliser un VRAI clip SVG (ClipPath + SvgImage) au lieu d'un overlay noir.
|
|
52
|
+
// Sinon captureRef peut capturer seulement l'overlay (noir/transparence) si l'Image RN n'est pas prête.
|
|
53
|
+
return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
|
|
54
|
+
ref: ref,
|
|
55
|
+
collapsable: false,
|
|
56
|
+
style: {
|
|
57
|
+
width: width,
|
|
58
|
+
height: height,
|
|
59
|
+
overflow: 'hidden',
|
|
60
|
+
backgroundColor: 'transparent'
|
|
61
|
+
}
|
|
62
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg["default"], {
|
|
63
|
+
width: width,
|
|
64
|
+
height: height
|
|
65
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Defs, null, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.ClipPath, {
|
|
66
|
+
id: "cropClip"
|
|
67
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
|
|
68
|
+
d: path
|
|
69
|
+
}))), /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Image, {
|
|
70
|
+
width: width,
|
|
71
|
+
height: height,
|
|
72
|
+
href: {
|
|
73
|
+
uri: imageUri
|
|
74
|
+
},
|
|
75
|
+
preserveAspectRatio: "xMidYMid slice",
|
|
76
|
+
clipPath: "url(#cropClip)"
|
|
77
|
+
})));
|
|
78
|
+
});
|
|
79
|
+
MaskView.displayName = 'MaskView';
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Applique un masque alpha à une image en utilisant captureRef
|
|
83
|
+
*
|
|
84
|
+
* @param {string} imageUri - URI de l'image à masquer
|
|
85
|
+
* @param {Array} points - Points définissant le masque (coordonnées normalisées)
|
|
86
|
+
* @param {number} width - Largeur de l'image
|
|
87
|
+
* @param {number} height - Hauteur de l'image
|
|
88
|
+
* @param {React.Ref} maskViewRef - Référence à la vue MaskView
|
|
89
|
+
* @returns {Promise<string>} URI de l'image masquée
|
|
90
|
+
*
|
|
91
|
+
* NOTE: Cette fonction utilise captureRef qui peut se bloquer.
|
|
92
|
+
* Utiliser uniquement si enableMask = true dans ImageCropper.js
|
|
93
|
+
*/
|
|
94
|
+
// width/height = dimensions de sortie souhaitées EN PIXELS (pas dp)
|
|
95
|
+
var applyMaskToImage = exports.applyMaskToImage = /*#__PURE__*/function () {
|
|
96
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(imageUri, points, width, height, maskViewRef) {
|
|
97
|
+
var maskedUri, _t;
|
|
98
|
+
return _regenerator().w(function (_context) {
|
|
99
|
+
while (1) switch (_context.p = _context.n) {
|
|
100
|
+
case 0:
|
|
101
|
+
_context.p = 0;
|
|
102
|
+
if (maskViewRef !== null && maskViewRef !== void 0 && maskViewRef.current) {
|
|
103
|
+
_context.n = 1;
|
|
104
|
+
break;
|
|
105
|
+
}
|
|
106
|
+
console.warn("MaskView ref not available in applyMaskToImage");
|
|
107
|
+
return _context.a(2, imageUri);
|
|
108
|
+
case 1:
|
|
109
|
+
console.log("Applying mask with captureRef...", {
|
|
110
|
+
imageUri: imageUri,
|
|
111
|
+
pointsCount: points.length,
|
|
112
|
+
width: width,
|
|
113
|
+
height: height,
|
|
114
|
+
refAvailable: !!maskViewRef.current
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// ✅ CORRECTION : Capturer la vue avec le masque appliqué
|
|
118
|
+
// captureRef supporte la transparence PNG pour préserver la forme exacte
|
|
119
|
+
// Utiliser une qualité maximale et un format PNG pour préserver la transparence
|
|
120
|
+
// Ajouter un petit délai supplémentaire pour s'assurer que la vue est complètement rendue
|
|
121
|
+
_context.n = 2;
|
|
122
|
+
return new Promise(function (resolve) {
|
|
123
|
+
return setTimeout(resolve, 100);
|
|
124
|
+
});
|
|
125
|
+
case 2:
|
|
126
|
+
// ⚠️ LIMITATION CRITIQUE : captureRef capture à la résolution de la vue React Native
|
|
127
|
+
// La vue MaskView doit avoir les dimensions EXACTES de l'image croppée pour préserver la qualité
|
|
128
|
+
// Si width/height sont les dimensions réelles de l'image croppée, la qualité sera préservée
|
|
129
|
+
// Si width/height sont plus petits, la qualité sera réduite
|
|
130
|
+
console.log("📸 Capturing mask view at requested output size (px):", {
|
|
131
|
+
outputPx: {
|
|
132
|
+
width: width,
|
|
133
|
+
height: height
|
|
134
|
+
},
|
|
135
|
+
imageUri: imageUri,
|
|
136
|
+
note: "✅ captureRef width/height forces output resolution; view can stay smaller in dp"
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
// ✅ CORRECTION : Utiliser les dimensions réelles de l'image croppée
|
|
140
|
+
// Si width/height correspondent aux dimensions réelles de croppedResult, la qualité sera maximale
|
|
141
|
+
_context.n = 3;
|
|
142
|
+
return (0, _reactNativeViewShot.captureRef)(maskViewRef.current, {
|
|
143
|
+
format: 'png',
|
|
144
|
+
// PNG supporte la transparence alpha
|
|
145
|
+
quality: 1,
|
|
146
|
+
// Qualité maximale (0-1)
|
|
147
|
+
result: 'tmpfile',
|
|
148
|
+
// Fichier temporaire
|
|
149
|
+
// ✅ CORRECTION : forcer la résolution de sortie (pixels)
|
|
150
|
+
// évite une capture 'écran' basée uniquement sur les dp de la vue (risque de downscale).
|
|
151
|
+
width: width,
|
|
152
|
+
height: height
|
|
153
|
+
// ✅ IMPORTANT : La résolution de capture = taille de la vue (width x height)
|
|
154
|
+
// Si width/height = dimensions réelles de l'image croppée, qualité préservée
|
|
155
|
+
// Si width/height < dimensions réelles, qualité réduite
|
|
156
|
+
});
|
|
157
|
+
case 3:
|
|
158
|
+
maskedUri = _context.v;
|
|
159
|
+
console.log("✅ Mask applied successfully:", {
|
|
160
|
+
maskedUri: maskedUri,
|
|
161
|
+
viewSize: "".concat(width, "x").concat(height),
|
|
162
|
+
qualityStatus: width >= 1000 && height >= 1000 ? "✓ High quality preserved" : "⚠️ Check if dimensions match original"
|
|
163
|
+
});
|
|
164
|
+
return _context.a(2, maskedUri);
|
|
165
|
+
case 4:
|
|
166
|
+
_context.p = 4;
|
|
167
|
+
_t = _context.v;
|
|
168
|
+
console.error("Error applying mask:", _t);
|
|
169
|
+
// En cas d'erreur, retourner l'image originale (bounding box)
|
|
170
|
+
return _context.a(2, imageUri);
|
|
171
|
+
}
|
|
172
|
+
}, _callee, null, [[0, 4]]);
|
|
173
|
+
}));
|
|
174
|
+
return function applyMaskToImage(_x, _x2, _x3, _x4, _x5) {
|
|
175
|
+
return _ref2.apply(this, arguments);
|
|
176
|
+
};
|
|
177
|
+
}();
|