@luftborn/custom-elements 2.12.1 → 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.
Files changed (8) hide show
  1. package/demo/index.js +1361 -76
  2. package/demo/index.min.js +1360 -75
  3. package/demo/index.min.js.map +1 -1
  4. package/dist/elements/FileField/FileFieldElement.d.ts +7 -0
  5. package/dist/elements/FileField/FileFieldElement.js +224 -0
  6. package/dist/elements/FileField/FileFieldElement.js.map +1 -1
  7. package/package.json +2 -1
  8. package/src/elements/FileField/FileFieldElement.ts +152 -0
package/dist/elements/FileField/FileFieldElement.d.ts CHANGED
@@ -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
  }
package/dist/elements/FileField/FileFieldElement.js CHANGED
@@ -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',
package/dist/elements/FileField/FileFieldElement.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileFieldElement.js","sourceRoot":"","sources":["../../../src/elements/FileField/FileFieldElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAqE;AACrE,yEAAwE;AACxE,6DAAsE;AACtE,iGAA4F;AA0B5F;IAAsC,oCAAkB;IAGvD;QAAA,YACC,iBAAO,SAEP;QADA,IAAA,mCAAyB,GAAE,CAAC;;IAC7B,CAAC;IAED,sBAAI,mCAAK;aAAT;YACC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QACxB,CAAC;aAED,UAAU,KAAe;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACzB,CAAC;;;OAJA;IAMD,sBAAI,mCAAK;aAAT;YACC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACjC,CAAC;;;OAAA;IAED,4CAAiB,GAAjB;QACC,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,iBAAM,iBAAiB,WAAE,CAAC;IAC3B,CAAC;IAED,4CAAiB,GAAjB;QAAA,iBAKC;QAJA,IAAI,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,UAAA,aAAa;YAC7C,IAAI,cAAc,GAAG,KAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;YACtD,KAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,0CAAe,GAAf;QACC,IAAI,CAAC,IAAI,GAAG,iBAAM,aAAa,YAAC,aAAa,CAAC,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7D,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;SACvC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;SACvC;IACF,CAAC;IAED,SAAS;IACF,iCAAM,GAAb,UAAc,MAAM;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,qCAAsB,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtE,CAAC;IAEM,mCAAQ,GAAf;QACC,IAAI,CAAC,KAAK,CAAC;QACX,IAAI,CAAC,UAAU,CAAC,IAAI,CACnB,IAAI,qCAAsB,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAClD,CAAC;IACH,CAAC;IAEE,mDAAwB,GAAxB,UAAyB,IAAY,EAAE,MAAc,EAAE,MAAc;QACvE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC;IACO,2CAAgB,GAAxB,UAAyB,IAAY,EAAE,MAAc,EAAE,MAAc;QACpE,QAAQ,IAAI,EAAE;YACb,KAAK,QAAQ;gBACA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC1B,MAAM;SACnB;IACF,CAAC;IAjEW,gBAAgB;QAxB5B,IAAA,kCAAa,EAAC;YACd,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,kIAGD;YACT,KAAK,EAAE,iUAeI;YACX,SAAS,EAAE,IAAI;SACf,CAAC;OACW,gBAAgB,CAkE5B;IAAD,uBAAC;CAAA,AAlED,CAAsC,uCAAkB,GAkEvD;AAlEY,4CAAgB"}
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.1",
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
  },
package/src/elements/FileField/FileFieldElement.ts CHANGED
@@ -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
  }