@luftborn/custom-elements 2.12.0 → 2.12.2
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/demo/index.js +1364 -79
- package/demo/index.min.js +1363 -78
- package/demo/index.min.js.map +1 -1
- package/dist/elements/BankField/BankFieldElement.js +3 -3
- package/dist/elements/BankField/BankFieldElement.js.map +1 -1
- package/dist/elements/FileField/FileFieldElement.d.ts +7 -0
- package/dist/elements/FileField/FileFieldElement.js +224 -0
- package/dist/elements/FileField/FileFieldElement.js.map +1 -1
- package/package.json +2 -1
- package/src/elements/BankField/BankFieldElement.ts +3 -3
- package/src/elements/FileField/FileFieldElement.ts +152 -0
|
@@ -38,9 +38,9 @@ var BankFieldElement = /** @class */ (function (_super) {
|
|
|
38
38
|
}
|
|
39
39
|
Object.defineProperty(BankFieldElement.prototype, "value", {
|
|
40
40
|
get: function () {
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
return "" +
|
|
41
|
+
var regNumber = this.regNumber.value || '';
|
|
42
|
+
var account = this.account.value ? "," + this.account.value : '';
|
|
43
|
+
return "" + regNumber + account;
|
|
44
44
|
},
|
|
45
45
|
set: function (value) {
|
|
46
46
|
var values = value.split(',');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BankFieldElement.js","sourceRoot":"","sources":["../../../src/elements/BankField/BankFieldElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAqE;AACrE,yEAAwE;AACxE,6DAAsE;AACtE,iFAAqF;AACrF,qHAAyH;AACzH,kEAA6D;AA2B7D;IAAsC,oCAAkB;IAMvD;QAAA,YACC,iBAAO,SACP;QALD,0BAAoB,GAAyB,IAAI,qBAAoB,EAAE,CAAC;QACxE,wBAAkB,GAA2C,IAAI,uCAAsC,EAAE,CAAC;;IAI1G,CAAC;IAED,sBAAI,mCAAK;aAAT;YACC,IAAI,
|
|
1
|
+
{"version":3,"file":"BankFieldElement.js","sourceRoot":"","sources":["../../../src/elements/BankField/BankFieldElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
2
2
|
export declare class FileFieldElement extends CustomInputElement {
|
|
3
3
|
file: HTMLInputElement;
|
|
4
|
+
resizeImages: boolean;
|
|
4
5
|
constructor();
|
|
5
6
|
get value(): FileList;
|
|
6
7
|
set value(files: FileList);
|
|
@@ -12,4 +13,10 @@ export declare class FileFieldElement extends CustomInputElement {
|
|
|
12
13
|
validate(): void;
|
|
13
14
|
attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
|
|
14
15
|
private attributeChanged;
|
|
16
|
+
private processImageFiles;
|
|
17
|
+
private readAndProcessImage;
|
|
18
|
+
private resizeImage;
|
|
19
|
+
private getImageOrientation;
|
|
20
|
+
private correctOrientation;
|
|
21
|
+
private replaceFiles;
|
|
15
22
|
}
|
|
@@ -20,12 +20,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
20
20
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21
21
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
22
22
|
};
|
|
23
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
24
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
25
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
26
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
27
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
28
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
29
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
33
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
34
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
35
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
36
|
+
function step(op) {
|
|
37
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
38
|
+
while (_) try {
|
|
39
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
40
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
41
|
+
switch (op[0]) {
|
|
42
|
+
case 0: case 1: t = op; break;
|
|
43
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
44
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
45
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
46
|
+
default:
|
|
47
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
48
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
49
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
50
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
51
|
+
if (t[2]) _.ops.pop();
|
|
52
|
+
_.trys.pop(); continue;
|
|
53
|
+
}
|
|
54
|
+
op = body.call(thisArg, _);
|
|
55
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
56
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
57
|
+
}
|
|
58
|
+
};
|
|
23
59
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
24
60
|
exports.FileFieldElement = void 0;
|
|
25
61
|
var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
|
|
26
62
|
var CustomInputElement_1 = require("../../framework/CustomInputElement");
|
|
27
63
|
var CustomEvents_1 = require("../../framework/CustomEvents");
|
|
28
64
|
var getAttributeNamesPolyfill_1 = require("../../framework/Polyfills/getAttributeNamesPolyfill");
|
|
65
|
+
var EXIF = require("exif-js");
|
|
29
66
|
var FileFieldElement = /** @class */ (function (_super) {
|
|
30
67
|
__extends(FileFieldElement, _super);
|
|
31
68
|
function FileFieldElement() {
|
|
@@ -64,6 +101,7 @@ var FileFieldElement = /** @class */ (function (_super) {
|
|
|
64
101
|
FileFieldElement.prototype.initChildInputs = function () {
|
|
65
102
|
this.file = _super.prototype.getChildInput.call(this, '#file-field');
|
|
66
103
|
this.file.addEventListener('change', this.change.bind(this));
|
|
104
|
+
this.file.addEventListener('input', this.processImageFiles.bind(this));
|
|
67
105
|
if (this.required) {
|
|
68
106
|
this.file.setAttribute('required', '');
|
|
69
107
|
}
|
|
@@ -88,8 +126,194 @@ var FileFieldElement = /** @class */ (function (_super) {
|
|
|
88
126
|
case 'accept':
|
|
89
127
|
this.file.accept = newVal;
|
|
90
128
|
break;
|
|
129
|
+
case 'resizeimages':
|
|
130
|
+
this.resizeImages = true;
|
|
131
|
+
break;
|
|
91
132
|
}
|
|
92
133
|
};
|
|
134
|
+
FileFieldElement.prototype.processImageFiles = function (event) {
|
|
135
|
+
var _a;
|
|
136
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
137
|
+
var files, processedFiles, _i, files_1, file, mimeType, processedBlob;
|
|
138
|
+
return __generator(this, function (_b) {
|
|
139
|
+
switch (_b.label) {
|
|
140
|
+
case 0:
|
|
141
|
+
if (!this.resizeImages) {
|
|
142
|
+
return [2 /*return*/];
|
|
143
|
+
}
|
|
144
|
+
files = Array.from(event.target.files);
|
|
145
|
+
processedFiles = [];
|
|
146
|
+
_i = 0, files_1 = files;
|
|
147
|
+
_b.label = 1;
|
|
148
|
+
case 1:
|
|
149
|
+
if (!(_i < files_1.length)) return [3 /*break*/, 4];
|
|
150
|
+
file = files_1[_i];
|
|
151
|
+
if (!file.type.startsWith('image/')) {
|
|
152
|
+
processedFiles.push(file);
|
|
153
|
+
return [3 /*break*/, 3];
|
|
154
|
+
}
|
|
155
|
+
mimeType = (_a = file.type) !== null && _a !== void 0 ? _a : 'image/jpeg';
|
|
156
|
+
return [4 /*yield*/, this.readAndProcessImage(file, mimeType)];
|
|
157
|
+
case 2:
|
|
158
|
+
processedBlob = _b.sent();
|
|
159
|
+
processedFiles.push(new File([processedBlob], file.name, { type: file.type }));
|
|
160
|
+
_b.label = 3;
|
|
161
|
+
case 3:
|
|
162
|
+
_i++;
|
|
163
|
+
return [3 /*break*/, 1];
|
|
164
|
+
case 4:
|
|
165
|
+
this.replaceFiles(processedFiles);
|
|
166
|
+
return [2 /*return*/];
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
};
|
|
171
|
+
FileFieldElement.prototype.readAndProcessImage = function (file, mimeType) {
|
|
172
|
+
var _this = this;
|
|
173
|
+
return new Promise(function (resolve, reject) {
|
|
174
|
+
var reader = new FileReader();
|
|
175
|
+
reader.readAsDataURL(file);
|
|
176
|
+
reader.onload = function (event) {
|
|
177
|
+
var img = new Image();
|
|
178
|
+
img.src = event.target.result;
|
|
179
|
+
img.onload = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
180
|
+
var orientation, correctedImageBlob, correctedImage;
|
|
181
|
+
var _this = this;
|
|
182
|
+
return __generator(this, function (_a) {
|
|
183
|
+
switch (_a.label) {
|
|
184
|
+
case 0: return [4 /*yield*/, this.getImageOrientation(file)];
|
|
185
|
+
case 1:
|
|
186
|
+
orientation = _a.sent();
|
|
187
|
+
return [4 /*yield*/, this.correctOrientation(img, orientation, mimeType)];
|
|
188
|
+
case 2:
|
|
189
|
+
correctedImageBlob = _a.sent();
|
|
190
|
+
correctedImage = new Image();
|
|
191
|
+
correctedImage.src = URL.createObjectURL(correctedImageBlob);
|
|
192
|
+
correctedImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
193
|
+
var a4Width, a4Height, isLandscape, resizedImageBlob;
|
|
194
|
+
return __generator(this, function (_a) {
|
|
195
|
+
switch (_a.label) {
|
|
196
|
+
case 0:
|
|
197
|
+
a4Width = 595;
|
|
198
|
+
a4Height = 842;
|
|
199
|
+
isLandscape = correctedImage.width > correctedImage.height;
|
|
200
|
+
if (!(isLandscape && correctedImage.width > a4Height)) return [3 /*break*/, 2];
|
|
201
|
+
return [4 /*yield*/, this.resizeImage(correctedImage, a4Height, a4Width, mimeType)];
|
|
202
|
+
case 1:
|
|
203
|
+
resizedImageBlob = _a.sent();
|
|
204
|
+
return [3 /*break*/, 4];
|
|
205
|
+
case 2:
|
|
206
|
+
if (!(!isLandscape && correctedImage.height > a4Height)) return [3 /*break*/, 4];
|
|
207
|
+
return [4 /*yield*/, this.resizeImage(correctedImage, a4Width, a4Height, mimeType)];
|
|
208
|
+
case 3:
|
|
209
|
+
resizedImageBlob = _a.sent();
|
|
210
|
+
_a.label = 4;
|
|
211
|
+
case 4:
|
|
212
|
+
resolve(resizedImageBlob);
|
|
213
|
+
return [2 /*return*/];
|
|
214
|
+
}
|
|
215
|
+
});
|
|
216
|
+
}); };
|
|
217
|
+
correctedImage.onerror = function (error) {
|
|
218
|
+
reject(error);
|
|
219
|
+
};
|
|
220
|
+
return [2 /*return*/];
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
}); };
|
|
224
|
+
img.onerror = function (error) {
|
|
225
|
+
reject(error);
|
|
226
|
+
};
|
|
227
|
+
};
|
|
228
|
+
reader.onerror = function (error) {
|
|
229
|
+
reject(error);
|
|
230
|
+
};
|
|
231
|
+
});
|
|
232
|
+
};
|
|
233
|
+
FileFieldElement.prototype.resizeImage = function (image, maxWidth, maxHeight, mimeType) {
|
|
234
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
235
|
+
return __generator(this, function (_a) {
|
|
236
|
+
return [2 /*return*/, new Promise(function (resolve, reject) {
|
|
237
|
+
var canvas = document.createElement('canvas');
|
|
238
|
+
var ctx = canvas.getContext('2d');
|
|
239
|
+
var aspectRatio = image.width / image.height;
|
|
240
|
+
if (image.width > maxWidth || image.height > maxHeight) {
|
|
241
|
+
if (aspectRatio > 1) {
|
|
242
|
+
canvas.width = maxWidth;
|
|
243
|
+
canvas.height = maxWidth / aspectRatio;
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
canvas.height = maxHeight;
|
|
247
|
+
canvas.width = maxHeight * aspectRatio;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
else {
|
|
251
|
+
canvas.width = image.width;
|
|
252
|
+
canvas.height = image.height;
|
|
253
|
+
}
|
|
254
|
+
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
255
|
+
canvas.toBlob(function (blob) {
|
|
256
|
+
resolve(blob);
|
|
257
|
+
}, mimeType);
|
|
258
|
+
})];
|
|
259
|
+
});
|
|
260
|
+
});
|
|
261
|
+
};
|
|
262
|
+
FileFieldElement.prototype.getImageOrientation = function (file) {
|
|
263
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
264
|
+
return __generator(this, function (_a) {
|
|
265
|
+
return [2 /*return*/, new Promise(function (resolve) {
|
|
266
|
+
EXIF.getData(file, function () {
|
|
267
|
+
var orientation = EXIF.getTag(this, "Orientation");
|
|
268
|
+
resolve(orientation || 1);
|
|
269
|
+
});
|
|
270
|
+
})];
|
|
271
|
+
});
|
|
272
|
+
});
|
|
273
|
+
};
|
|
274
|
+
FileFieldElement.prototype.correctOrientation = function (image, orientation, mimeType) {
|
|
275
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
276
|
+
return __generator(this, function (_a) {
|
|
277
|
+
return [2 /*return*/, new Promise(function (resolve, reject) {
|
|
278
|
+
var canvas = document.createElement('canvas');
|
|
279
|
+
var ctx = canvas.getContext('2d');
|
|
280
|
+
switch (orientation) {
|
|
281
|
+
case 3:
|
|
282
|
+
canvas.width = image.width;
|
|
283
|
+
canvas.height = image.height;
|
|
284
|
+
ctx.rotate(180 * Math.PI / 180);
|
|
285
|
+
ctx.drawImage(image, -image.width, -image.height);
|
|
286
|
+
break;
|
|
287
|
+
case 6:
|
|
288
|
+
canvas.width = image.height;
|
|
289
|
+
canvas.height = image.width;
|
|
290
|
+
ctx.rotate(-90 * Math.PI / 180);
|
|
291
|
+
ctx.drawImage(image, -image.width, 0);
|
|
292
|
+
break;
|
|
293
|
+
case 8:
|
|
294
|
+
canvas.width = image.height;
|
|
295
|
+
canvas.height = image.width;
|
|
296
|
+
ctx.rotate(90 * Math.PI / 180);
|
|
297
|
+
ctx.drawImage(image, 0, -image.height);
|
|
298
|
+
break;
|
|
299
|
+
default:
|
|
300
|
+
canvas.width = image.width;
|
|
301
|
+
canvas.height = image.height;
|
|
302
|
+
ctx.drawImage(image, 0, 0);
|
|
303
|
+
break;
|
|
304
|
+
}
|
|
305
|
+
canvas.toBlob(function (blob) {
|
|
306
|
+
resolve(blob);
|
|
307
|
+
}, mimeType);
|
|
308
|
+
})];
|
|
309
|
+
});
|
|
310
|
+
});
|
|
311
|
+
};
|
|
312
|
+
FileFieldElement.prototype.replaceFiles = function (newFiles) {
|
|
313
|
+
var dataTransfer = new DataTransfer();
|
|
314
|
+
newFiles.forEach(function (file) { return dataTransfer.items.add(file); });
|
|
315
|
+
this.file.files = dataTransfer.files;
|
|
316
|
+
};
|
|
93
317
|
FileFieldElement = __decorate([
|
|
94
318
|
(0, custom_element_decorator_1.default)({
|
|
95
319
|
selector: 'file-element',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileFieldElement.js","sourceRoot":"","sources":["../../../src/elements/FileField/FileFieldElement.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileFieldElement.js","sourceRoot":"","sources":["../../../src/elements/FileField/FileFieldElement.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luftborn/custom-elements",
|
|
3
|
-
"version": "2.12.
|
|
3
|
+
"version": "2.12.2",
|
|
4
4
|
"description": "custom HTML elements for the form builder application (node version: 18)",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"@types/googlemaps": "^3.39.6",
|
|
18
18
|
"@webcomponents/custom-elements": "1.4.1",
|
|
19
19
|
"@webcomponents/webcomponentsjs": "2.6.0",
|
|
20
|
+
"exif-js": "^2.3.0",
|
|
20
21
|
"intl-tel-input": "^16.0.8",
|
|
21
22
|
"restore": "^0.3.0"
|
|
22
23
|
},
|
|
@@ -41,9 +41,9 @@ export class BankFieldElement extends CustomInputElement {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
get value(): string {
|
|
44
|
-
let
|
|
45
|
-
let
|
|
46
|
-
return `${
|
|
44
|
+
let regNumber = this.regNumber.value || '';
|
|
45
|
+
let account = this.account.value ? `,${this.account.value}` : '';
|
|
46
|
+
return `${regNumber}${account}`;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
set value(value: string) {
|
|
@@ -2,6 +2,7 @@ import CustomElement from '../../framework/custom-element.decorator';
|
|
|
2
2
|
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
3
3
|
import { CustomElementEventArgs } from '../../framework/CustomEvents';
|
|
4
4
|
import getAttributeNamesPolyfill from '../../framework/Polyfills/getAttributeNamesPolyfill';
|
|
5
|
+
import EXIF = require('exif-js');
|
|
5
6
|
|
|
6
7
|
@CustomElement({
|
|
7
8
|
selector: 'file-element',
|
|
@@ -29,6 +30,7 @@ import getAttributeNamesPolyfill from '../../framework/Polyfills/getAttributeNam
|
|
|
29
30
|
})
|
|
30
31
|
export class FileFieldElement extends CustomInputElement {
|
|
31
32
|
file: HTMLInputElement;
|
|
33
|
+
resizeImages: boolean;
|
|
32
34
|
|
|
33
35
|
constructor() {
|
|
34
36
|
super();
|
|
@@ -62,6 +64,7 @@ export class FileFieldElement extends CustomInputElement {
|
|
|
62
64
|
initChildInputs() {
|
|
63
65
|
this.file = super.getChildInput('#file-field');
|
|
64
66
|
this.file.addEventListener('change', this.change.bind(this));
|
|
67
|
+
this.file.addEventListener('input', this.processImageFiles.bind(this));
|
|
65
68
|
if (this.required) {
|
|
66
69
|
this.file.setAttribute('required', '');
|
|
67
70
|
}
|
|
@@ -91,6 +94,155 @@ export class FileFieldElement extends CustomInputElement {
|
|
|
91
94
|
case 'accept':
|
|
92
95
|
this.file.accept = newVal;
|
|
93
96
|
break;
|
|
97
|
+
|
|
98
|
+
case 'resizeimages':
|
|
99
|
+
this.resizeImages = true;
|
|
100
|
+
break;
|
|
94
101
|
}
|
|
95
102
|
}
|
|
103
|
+
|
|
104
|
+
private async processImageFiles(event) {
|
|
105
|
+
if (!this.resizeImages) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const files = Array.from(event.target.files) as File[];
|
|
110
|
+
const processedFiles = [];
|
|
111
|
+
|
|
112
|
+
for (const file of files) {
|
|
113
|
+
if (!file.type.startsWith('image/')) {
|
|
114
|
+
processedFiles.push(file);
|
|
115
|
+
continue;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
const mimeType = file.type ?? 'image/jpeg';
|
|
119
|
+
const processedBlob = await this.readAndProcessImage(file, mimeType);
|
|
120
|
+
processedFiles.push(new File([processedBlob], file.name, { type: file.type }));
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
this.replaceFiles(processedFiles);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
private readAndProcessImage(file, mimeType: string): Promise<Blob> {
|
|
127
|
+
return new Promise((resolve, reject) => {
|
|
128
|
+
const reader = new FileReader();
|
|
129
|
+
reader.readAsDataURL(file);
|
|
130
|
+
|
|
131
|
+
reader.onload = (event) => {
|
|
132
|
+
const img = new Image();
|
|
133
|
+
img.src = event.target.result as string;
|
|
134
|
+
|
|
135
|
+
img.onload = async () => {
|
|
136
|
+
const orientation = await this.getImageOrientation(file);
|
|
137
|
+
const correctedImageBlob = await this.correctOrientation(img, orientation, mimeType);
|
|
138
|
+
const correctedImage = new Image();
|
|
139
|
+
correctedImage.src = URL.createObjectURL(correctedImageBlob);
|
|
140
|
+
|
|
141
|
+
correctedImage.onload = async () => {
|
|
142
|
+
const a4Width = 595;
|
|
143
|
+
const a4Height = 842;
|
|
144
|
+
const isLandscape = correctedImage.width > correctedImage.height;
|
|
145
|
+
let resizedImageBlob;
|
|
146
|
+
if (isLandscape && correctedImage.width > a4Height) {
|
|
147
|
+
resizedImageBlob = await this.resizeImage(correctedImage, a4Height, a4Width, mimeType);
|
|
148
|
+
} else if (!isLandscape && correctedImage.height > a4Height) {
|
|
149
|
+
resizedImageBlob = await this.resizeImage(correctedImage, a4Width, a4Height, mimeType);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
resolve(resizedImageBlob);
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
correctedImage.onerror = (error) => {
|
|
156
|
+
reject(error);
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
img.onerror = (error) => {
|
|
161
|
+
reject(error);
|
|
162
|
+
};
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
reader.onerror = (error) => {
|
|
166
|
+
reject(error);
|
|
167
|
+
};
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
private async resizeImage(image, maxWidth, maxHeight, mimeType): Promise<Blob> {
|
|
172
|
+
return new Promise((resolve, reject) => {
|
|
173
|
+
const canvas = document.createElement('canvas');
|
|
174
|
+
const ctx = canvas.getContext('2d');
|
|
175
|
+
const aspectRatio = image.width / image.height;
|
|
176
|
+
|
|
177
|
+
if (image.width > maxWidth || image.height > maxHeight) {
|
|
178
|
+
if (aspectRatio > 1) {
|
|
179
|
+
canvas.width = maxWidth;
|
|
180
|
+
canvas.height = maxWidth / aspectRatio;
|
|
181
|
+
} else {
|
|
182
|
+
canvas.height = maxHeight;
|
|
183
|
+
canvas.width = maxHeight * aspectRatio;
|
|
184
|
+
}
|
|
185
|
+
} else {
|
|
186
|
+
canvas.width = image.width;
|
|
187
|
+
canvas.height = image.height;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
191
|
+
canvas.toBlob((blob) => {
|
|
192
|
+
resolve(blob);
|
|
193
|
+
}, mimeType);
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
private async getImageOrientation(file): Promise<number> {
|
|
198
|
+
return new Promise((resolve) => {
|
|
199
|
+
EXIF.getData(file, function () {
|
|
200
|
+
const orientation = EXIF.getTag(this, "Orientation");
|
|
201
|
+
resolve(orientation || 1);
|
|
202
|
+
});
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
private async correctOrientation(image, orientation, mimeType: string): Promise<Blob> {
|
|
207
|
+
return new Promise((resolve, reject) => {
|
|
208
|
+
const canvas = document.createElement('canvas');
|
|
209
|
+
const ctx = canvas.getContext('2d');
|
|
210
|
+
|
|
211
|
+
switch (orientation) {
|
|
212
|
+
case 3:
|
|
213
|
+
canvas.width = image.width;
|
|
214
|
+
canvas.height = image.height;
|
|
215
|
+
ctx.rotate(180 * Math.PI / 180);
|
|
216
|
+
ctx.drawImage(image, -image.width, -image.height);
|
|
217
|
+
break;
|
|
218
|
+
case 6:
|
|
219
|
+
canvas.width = image.height;
|
|
220
|
+
canvas.height = image.width;
|
|
221
|
+
ctx.rotate(-90 * Math.PI / 180);
|
|
222
|
+
ctx.drawImage(image, -image.width, 0);
|
|
223
|
+
break;
|
|
224
|
+
case 8:
|
|
225
|
+
canvas.width = image.height;
|
|
226
|
+
canvas.height = image.width;
|
|
227
|
+
ctx.rotate(90 * Math.PI / 180);
|
|
228
|
+
ctx.drawImage(image, 0, -image.height);
|
|
229
|
+
break;
|
|
230
|
+
default:
|
|
231
|
+
canvas.width = image.width;
|
|
232
|
+
canvas.height = image.height;
|
|
233
|
+
ctx.drawImage(image, 0, 0);
|
|
234
|
+
break;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
canvas.toBlob((blob) => {
|
|
238
|
+
resolve(blob);
|
|
239
|
+
}, mimeType);
|
|
240
|
+
});
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
private replaceFiles(newFiles: File[]) {
|
|
244
|
+
const dataTransfer = new DataTransfer();
|
|
245
|
+
newFiles.forEach(file => dataTransfer.items.add(file));
|
|
246
|
+
this.file.files = dataTransfer.files;
|
|
247
|
+
}
|
|
96
248
|
}
|