/
index.js
113 lines (104 loc) · 3.31 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/*!
* Copyright (c) 2015-2019 Cisco Systems, Inc. See LICENSE file.
*/
/* eslint no-unused-vars: ["error", { "vars": "local" }] */
/* global Uint8Array, FileReader */
const {Buffer} = require('safe-buffer');
const {ExifImage} = require('exif');
/**
* Updates the image file with exif information, required to correctly rotate the image activity
* @param {Object} file
* @returns {Promise<Object>}
*/
export function updateImageOrientation(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function onload() {
const arrayBuffer = reader.result;
const buf = Buffer.from(arrayBuffer);
resolve(buf);
};
})
.then((buf) => readExifData(file, buf));
}
/**
* Adds exif orientation information on the image file
* @param {Object} file
* @param {Object} buf
* @returns {Promise<ExifImage>}
*/
export function readExifData(file, buf) {
return new Promise((resolve) => {
// For avatar images the file.type is set as image/jpeg, however for images shared in an activity file.mimeType is set as image/jpeg. Handling both conditions.
if (file && (file.type === 'image/jpeg' || file.mimeType === 'image/jpeg')) {
/* eslint-disable no-new */
new ExifImage({image: buf}, (error, exifData) => {
if (!error && exifData) {
file.orientation = exifData.image.Orientation;
file.exifWidth = exifData.exif.ExifImageWidth;
file.exifHeight = exifData.exif.ExifImageHeight;
if (file.image) {
file.image.orientation = exifData.image.Orientation;
}
}
resolve(buf);
});
}
else {
resolve(buf);
}
});
}
/* eslint-disable complexity */
/**
* Rotates/flips the image on the canvas as per exif information
* @param {Object} options(orientation: image exif orientation range from 1-8, img: Image object, x: start x-axis, y: start y-axis, width: width of the thumbnail, height: height of the thumbnail, ctx: canvas context)
* @param {Object} file
* @returns {Object}
*/
export function orient(options, file) {
const {
width, height, ctx, img, orientation, x, y
} = options;
if (file && file.orientation && file.orientation !== 1) {
// explanation of orientation:
// https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
switch (orientation) {
case 2:
// flip
ctx.transform(-1, 0, 0, 1, width, 0);
break;
case 3:
// rotateImage180
ctx.transform(-1, 0, 0, -1, width, height);
break;
case 4:
// rotate180AndFlipImage
ctx.transform(1, 0, 0, -1, 0, height);
break;
case 5:
// rotate90AndFlipImage
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
// rotateImage90
ctx.transform(0, 1, -1, 0, height, 0);
break;
case 7:
// rotateNeg90AndFlipImage
ctx.transform(0, -1, -1, 0, height, width);
break;
case 8:
// rotateNeg90
ctx.transform(0, -1, 1, 0, 0, width);
break;
default:
break;
}
}
ctx.drawImage(img, x, y, width, height);
}
/* eslint-enable complexity */
export {default as processImage} from './process-image';
export {default as detectFileType} from './detect-filetype';