@webex/helper-image 3.0.0-beta.419 → 3.0.0-beta.420
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/dist/index.js +1 -55
- package/dist/index.js.map +1 -1
- package/dist/orient.js +61 -0
- package/dist/orient.js.map +1 -0
- package/dist/process-image.browser.js +2 -2
- package/dist/process-image.browser.js.map +1 -1
- package/package.json +6 -6
- package/src/index.js +0 -48
- package/src/orient.js +48 -0
- package/src/process-image.browser.js +1 -1
- package/test/unit/spec/index.js +2 -1
package/dist/index.js
CHANGED
|
@@ -11,7 +11,6 @@ _Object$defineProperty(exports, "detectFileType", {
|
|
|
11
11
|
return _detectFiletype.default;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
exports.orient = orient;
|
|
15
14
|
_Object$defineProperty(exports, "processImage", {
|
|
16
15
|
enumerable: true,
|
|
17
16
|
get: function get() {
|
|
@@ -71,13 +70,7 @@ function updateImageOrientation(file) {
|
|
|
71
70
|
function readExifData(_x, _x2) {
|
|
72
71
|
return _readExifData.apply(this, arguments);
|
|
73
72
|
}
|
|
74
|
-
/* eslint-
|
|
75
|
-
/**
|
|
76
|
-
* Rotates/flips the image on the canvas as per exif information
|
|
77
|
-
* @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)
|
|
78
|
-
* @param {Object} file
|
|
79
|
-
* @returns {Object}
|
|
80
|
-
*/
|
|
73
|
+
/* eslint-enable complexity */
|
|
81
74
|
function _readExifData() {
|
|
82
75
|
_readExifData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, buf) {
|
|
83
76
|
var exifData, Orientation, ExifImageHeight, ExifImageWidth;
|
|
@@ -113,51 +106,4 @@ function _readExifData() {
|
|
|
113
106
|
}));
|
|
114
107
|
return _readExifData.apply(this, arguments);
|
|
115
108
|
}
|
|
116
|
-
function orient(options, file) {
|
|
117
|
-
var width = options.width,
|
|
118
|
-
height = options.height,
|
|
119
|
-
ctx = options.ctx,
|
|
120
|
-
img = options.img,
|
|
121
|
-
orientation = options.orientation,
|
|
122
|
-
x = options.x,
|
|
123
|
-
y = options.y;
|
|
124
|
-
if (file && file.orientation && file.orientation !== 1) {
|
|
125
|
-
// explanation of orientation:
|
|
126
|
-
// https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
|
|
127
|
-
switch (orientation) {
|
|
128
|
-
case 2:
|
|
129
|
-
// flip
|
|
130
|
-
ctx.transform(-1, 0, 0, 1, width, 0);
|
|
131
|
-
break;
|
|
132
|
-
case 3:
|
|
133
|
-
// rotateImage180
|
|
134
|
-
ctx.transform(-1, 0, 0, -1, width, height);
|
|
135
|
-
break;
|
|
136
|
-
case 4:
|
|
137
|
-
// rotate180AndFlipImage
|
|
138
|
-
ctx.transform(1, 0, 0, -1, 0, height);
|
|
139
|
-
break;
|
|
140
|
-
case 5:
|
|
141
|
-
// rotate90AndFlipImage
|
|
142
|
-
ctx.transform(0, 1, 1, 0, 0, 0);
|
|
143
|
-
break;
|
|
144
|
-
case 6:
|
|
145
|
-
// rotateImage90
|
|
146
|
-
ctx.transform(0, 1, -1, 0, height, 0);
|
|
147
|
-
break;
|
|
148
|
-
case 7:
|
|
149
|
-
// rotateNeg90AndFlipImage
|
|
150
|
-
ctx.transform(0, -1, -1, 0, height, width);
|
|
151
|
-
break;
|
|
152
|
-
case 8:
|
|
153
|
-
// rotateNeg90
|
|
154
|
-
ctx.transform(0, -1, 1, 0, 0, width);
|
|
155
|
-
break;
|
|
156
|
-
default:
|
|
157
|
-
break;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
ctx.drawImage(img, x, y, width, height);
|
|
161
|
-
}
|
|
162
|
-
/* eslint-enable complexity */
|
|
163
109
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["require","Buffer","parse","updateImageOrientation","file","options","resolve","reader","FileReader","readAsArrayBuffer","onload","arrayBuffer","result","buf","from","then","shouldNotAddExifData","readExifData","type","mimeType","translateValues","exifData","Orientation","ExifImageHeight","ExifImageWidth","orientation","exifHeight","exifWidth","image"
|
|
1
|
+
{"version":3,"names":["require","Buffer","parse","updateImageOrientation","file","options","resolve","reader","FileReader","readAsArrayBuffer","onload","arrayBuffer","result","buf","from","then","shouldNotAddExifData","readExifData","type","mimeType","translateValues","exifData","Orientation","ExifImageHeight","ExifImageWidth","orientation","exifHeight","exifWidth","image"],"sources":["index.js"],"sourcesContent":["/*!\n * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.\n */\n\n/* eslint no-unused-vars: [\"error\", { \"vars\": \"local\" }] */\n// eslint-disable-next-line no-redeclare\n\nconst {Buffer} = require('safe-buffer');\nconst {parse} = require('exifr/dist/lite.umd');\n\n/**\n * Updates the image file with exif information, required to correctly rotate the image activity\n * @param {Object} file\n * @param {Object} options\n * @param {boolean} options.shouldNotAddExifData\n * @returns {Promise<Object>}\n */\nexport function updateImageOrientation(file, options = {}) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n\n reader.readAsArrayBuffer(file);\n reader.onload = function onload() {\n const arrayBuffer = reader.result;\n const buf = Buffer.from(arrayBuffer);\n\n resolve(buf);\n };\n }).then((buf) => {\n if (options.shouldNotAddExifData) {\n return buf;\n }\n\n return readExifData(file, buf);\n });\n}\n\n/**\n * Adds exif orientation information on the image file\n * @param {Object} file\n * @param {Object} buf\n * @returns {Promise<ExifImage>}\n */\nexport async function readExifData(file, buf) {\n // 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.\n if (file && (file.type === 'image/jpeg' || file.mimeType === 'image/jpeg')) {\n const exifData = await parse(buf, {translateValues: false});\n\n if (exifData) {\n const {Orientation, ExifImageHeight, ExifImageWidth} = exifData;\n\n file.orientation = Orientation;\n file.exifHeight = ExifImageHeight;\n file.exifWidth = ExifImageWidth;\n\n if (file.image) {\n file.image.orientation = Orientation;\n }\n }\n }\n\n return buf;\n}\n\n/* eslint-enable complexity */\n\nexport {default as processImage} from './process-image';\nexport {default as detectFileType} from './detect-filetype';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkEA;AACA;AAnEA;AACA;AACA;;AAEA;AACA;;AAEA,eAAiBA,OAAO,CAAC,aAAa,CAAC;EAAhCC,MAAM,YAANA,MAAM;AACb,gBAAgBD,OAAO,CAAC,qBAAqB,CAAC;EAAvCE,KAAK,aAALA,KAAK;;AAEZ;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,sBAAsB,CAACC,IAAI,EAAgB;EAAA,IAAdC,OAAO,uEAAG,CAAC,CAAC;EACvD,OAAO,qBAAY,UAACC,OAAO,EAAK;IAC9B,IAAMC,MAAM,GAAG,IAAIC,UAAU,EAAE;IAE/BD,MAAM,CAACE,iBAAiB,CAACL,IAAI,CAAC;IAC9BG,MAAM,CAACG,MAAM,GAAG,SAASA,MAAM,GAAG;MAChC,IAAMC,WAAW,GAAGJ,MAAM,CAACK,MAAM;MACjC,IAAMC,GAAG,GAAGZ,MAAM,CAACa,IAAI,CAACH,WAAW,CAAC;MAEpCL,OAAO,CAACO,GAAG,CAAC;IACd,CAAC;EACH,CAAC,CAAC,CAACE,IAAI,CAAC,UAACF,GAAG,EAAK;IACf,IAAIR,OAAO,CAACW,oBAAoB,EAAE;MAChC,OAAOH,GAAG;IACZ;IAEA,OAAOI,YAAY,CAACb,IAAI,EAAES,GAAG,CAAC;EAChC,CAAC,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AALA,SAMsBI,YAAY;EAAA;AAAA;AAqBlC;AAAA;EAAA,wFArBO,iBAA4Bb,IAAI,EAAES,GAAG;IAAA;IAAA;MAAA;QAAA;UAAA,MAEtCT,IAAI,KAAKA,IAAI,CAACc,IAAI,KAAK,YAAY,IAAId,IAAI,CAACe,QAAQ,KAAK,YAAY,CAAC;YAAA;YAAA;UAAA;UAAA;UAAA,OACjDjB,KAAK,CAACW,GAAG,EAAE;YAACO,eAAe,EAAE;UAAK,CAAC,CAAC;QAAA;UAArDC,QAAQ;UAEd,IAAIA,QAAQ,EAAE;YACLC,WAAW,GAAqCD,QAAQ,CAAxDC,WAAW,EAAEC,eAAe,GAAoBF,QAAQ,CAA3CE,eAAe,EAAEC,cAAc,GAAIH,QAAQ,CAA1BG,cAAc;YAEnDpB,IAAI,CAACqB,WAAW,GAAGH,WAAW;YAC9BlB,IAAI,CAACsB,UAAU,GAAGH,eAAe;YACjCnB,IAAI,CAACuB,SAAS,GAAGH,cAAc;YAE/B,IAAIpB,IAAI,CAACwB,KAAK,EAAE;cACdxB,IAAI,CAACwB,KAAK,CAACH,WAAW,GAAGH,WAAW;YACtC;UACF;QAAC;UAAA,iCAGIT,GAAG;QAAA;QAAA;UAAA;MAAA;IAAA;EAAA,CACX;EAAA;AAAA"}
|
package/dist/orient.js
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
4
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.orient = orient;
|
|
8
|
+
/* eslint-disable complexity */
|
|
9
|
+
/**
|
|
10
|
+
* Rotates/flips the image on the canvas as per exif information
|
|
11
|
+
* @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)
|
|
12
|
+
* @param {Object} file
|
|
13
|
+
* @returns {Object}
|
|
14
|
+
*/
|
|
15
|
+
function orient(options, file) {
|
|
16
|
+
var width = options.width,
|
|
17
|
+
height = options.height,
|
|
18
|
+
ctx = options.ctx,
|
|
19
|
+
img = options.img,
|
|
20
|
+
orientation = options.orientation,
|
|
21
|
+
x = options.x,
|
|
22
|
+
y = options.y;
|
|
23
|
+
if (file && file.orientation && file.orientation !== 1) {
|
|
24
|
+
// explanation of orientation:
|
|
25
|
+
// https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
|
|
26
|
+
switch (orientation) {
|
|
27
|
+
case 2:
|
|
28
|
+
// flip
|
|
29
|
+
ctx.transform(-1, 0, 0, 1, width, 0);
|
|
30
|
+
break;
|
|
31
|
+
case 3:
|
|
32
|
+
// rotateImage180
|
|
33
|
+
ctx.transform(-1, 0, 0, -1, width, height);
|
|
34
|
+
break;
|
|
35
|
+
case 4:
|
|
36
|
+
// rotate180AndFlipImage
|
|
37
|
+
ctx.transform(1, 0, 0, -1, 0, height);
|
|
38
|
+
break;
|
|
39
|
+
case 5:
|
|
40
|
+
// rotate90AndFlipImage
|
|
41
|
+
ctx.transform(0, 1, 1, 0, 0, 0);
|
|
42
|
+
break;
|
|
43
|
+
case 6:
|
|
44
|
+
// rotateImage90
|
|
45
|
+
ctx.transform(0, 1, -1, 0, height, 0);
|
|
46
|
+
break;
|
|
47
|
+
case 7:
|
|
48
|
+
// rotateNeg90AndFlipImage
|
|
49
|
+
ctx.transform(0, -1, -1, 0, height, width);
|
|
50
|
+
break;
|
|
51
|
+
case 8:
|
|
52
|
+
// rotateNeg90
|
|
53
|
+
ctx.transform(0, -1, 1, 0, 0, width);
|
|
54
|
+
break;
|
|
55
|
+
default:
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
ctx.drawImage(img, x, y, width, height);
|
|
60
|
+
}
|
|
61
|
+
//# sourceMappingURL=orient.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["orient","options","file","width","height","ctx","img","orientation","x","y","transform","drawImage"],"sources":["orient.js"],"sourcesContent":["/* eslint-disable complexity */\n/**\n * Rotates/flips the image on the canvas as per exif information\n * @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)\n * @param {Object} file\n * @returns {Object}\n */\nexport function orient(options, file) {\n const {width, height, ctx, img, orientation, x, y} = options;\n\n if (file && file.orientation && file.orientation !== 1) {\n // explanation of orientation:\n // https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images\n switch (orientation) {\n case 2:\n // flip\n ctx.transform(-1, 0, 0, 1, width, 0);\n break;\n case 3:\n // rotateImage180\n ctx.transform(-1, 0, 0, -1, width, height);\n break;\n case 4:\n // rotate180AndFlipImage\n ctx.transform(1, 0, 0, -1, 0, height);\n break;\n case 5:\n // rotate90AndFlipImage\n ctx.transform(0, 1, 1, 0, 0, 0);\n break;\n case 6:\n // rotateImage90\n ctx.transform(0, 1, -1, 0, height, 0);\n break;\n case 7:\n // rotateNeg90AndFlipImage\n ctx.transform(0, -1, -1, 0, height, width);\n break;\n case 8:\n // rotateNeg90\n ctx.transform(0, -1, 1, 0, 0, width);\n break;\n default:\n break;\n }\n }\n ctx.drawImage(img, x, y, width, height);\n}\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,MAAM,CAACC,OAAO,EAAEC,IAAI,EAAE;EACpC,IAAOC,KAAK,GAAyCF,OAAO,CAArDE,KAAK;IAAEC,MAAM,GAAiCH,OAAO,CAA9CG,MAAM;IAAEC,GAAG,GAA4BJ,OAAO,CAAtCI,GAAG;IAAEC,GAAG,GAAuBL,OAAO,CAAjCK,GAAG;IAAEC,WAAW,GAAUN,OAAO,CAA5BM,WAAW;IAAEC,CAAC,GAAOP,OAAO,CAAfO,CAAC;IAAEC,CAAC,GAAIR,OAAO,CAAZQ,CAAC;EAEjD,IAAIP,IAAI,IAAIA,IAAI,CAACK,WAAW,IAAIL,IAAI,CAACK,WAAW,KAAK,CAAC,EAAE;IACtD;IACA;IACA,QAAQA,WAAW;MACjB,KAAK,CAAC;QACJ;QACAF,GAAG,CAACK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAEP,KAAK,EAAE,CAAC,CAAC;QACpC;MACF,KAAK,CAAC;QACJ;QACAE,GAAG,CAACK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEP,KAAK,EAAEC,MAAM,CAAC;QAC1C;MACF,KAAK,CAAC;QACJ;QACAC,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAEN,MAAM,CAAC;QACrC;MACF,KAAK,CAAC;QACJ;QACAC,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAC/B;MACF,KAAK,CAAC;QACJ;QACAL,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAEN,MAAM,EAAE,CAAC,CAAC;QACrC;MACF,KAAK,CAAC;QACJ;QACAC,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAEN,MAAM,EAAED,KAAK,CAAC;QAC1C;MACF,KAAK,CAAC;QACJ;QACAE,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAEP,KAAK,CAAC;QACpC;MACF;QACE;IAAM;EAEZ;EACAE,GAAG,CAACM,SAAS,CAACL,GAAG,EAAEE,CAAC,EAAEC,CAAC,EAAEN,KAAK,EAAEC,MAAM,CAAC;AACzC"}
|
|
@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = processImage;
|
|
9
9
|
var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
|
|
10
10
|
var _pick2 = _interopRequireDefault(require("lodash/pick"));
|
|
11
|
-
var
|
|
11
|
+
var _orient = require("./orient");
|
|
12
12
|
/* eslint-env browser */
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -108,7 +108,7 @@ function processImage(_ref2) {
|
|
|
108
108
|
canvas.width = thumbnailDimensions.width;
|
|
109
109
|
canvas.height = thumbnailDimensions.height;
|
|
110
110
|
}
|
|
111
|
-
(0,
|
|
111
|
+
(0, _orient.orient)({
|
|
112
112
|
orientation: file && file.orientation ? file.orientation : '',
|
|
113
113
|
img: img,
|
|
114
114
|
x: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["computeDimensions","maxWidth","maxHeight","width","height","processImage","file","type","thumbnailMaxWidth","thumbnailMaxHeight","enableThumbnails","logger","isAvatar","startsWith","resolve","Blob","reject","img","Image","onload","onerror","src","URL","createObjectURL","then","fileDimensions","info","size","thumbnailDimensions","canvas","document","createElement","ctx","getContext","orientation","orient","x","y","parts","toDataURL","split","byteString","atob","buffer","ArrayBuffer","length","view","DataView","i","setUint8","charCodeAt"],"sources":["process-image.browser.js"],"sourcesContent":["/*!\n * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.\n */\n\nimport {pick} from 'lodash';\n\nimport {orient} from './
|
|
1
|
+
{"version":3,"names":["computeDimensions","maxWidth","maxHeight","width","height","processImage","file","type","thumbnailMaxWidth","thumbnailMaxHeight","enableThumbnails","logger","isAvatar","startsWith","resolve","Blob","reject","img","Image","onload","onerror","src","URL","createObjectURL","then","fileDimensions","info","size","thumbnailDimensions","canvas","document","createElement","ctx","getContext","orientation","orient","x","y","parts","toDataURL","split","byteString","atob","buffer","ArrayBuffer","length","view","DataView","i","setUint8","charCodeAt"],"sources":["process-image.browser.js"],"sourcesContent":["/*!\n * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.\n */\n\nimport {pick} from 'lodash';\n\nimport {orient} from './orient';\n/* eslint-env browser */\n\n/**\n * Determins the dimensions of an image\n * @param {Object} constraints\n * @param {Number} constraints.width\n * @param {Number} constraints.height\n * @param {Number} maxWidth\n * @param {Number} maxHeight\n * @returns {Object}\n */\nfunction computeDimensions({width, height}, maxWidth, maxHeight) {\n if (height > width) {\n if (height > maxHeight) {\n width = (width * maxHeight) / height;\n height = maxHeight;\n }\n\n if (width > maxWidth) {\n height = (height * maxWidth) / width;\n width = maxWidth;\n }\n } else {\n if (width > maxWidth) {\n height = (height * maxWidth) / width;\n width = maxWidth;\n }\n\n if (height > maxHeight) {\n width = (width * maxHeight) / height;\n height = maxHeight;\n }\n }\n\n return {height, width};\n}\n\n/**\n * Measures an image file and produces a thumbnail for it\n * @param {Object} options\n * @param {Blob|ArrayBuffer} options.file\n * @param {Number} options.thumbnailMaxWidth\n * @param {Number} options.thumbnailMaxHeight\n * @param {Boolean} options.enableThumbnails\n * @param {Object} options.logger\n * @param {Boolean} options.isAvatar\n * @returns {Promise<Array>} Buffer, Dimensions, thumbnailDimensions\n */\nexport default function processImage({\n file,\n type,\n thumbnailMaxWidth,\n thumbnailMaxHeight,\n enableThumbnails,\n logger,\n isAvatar,\n}) {\n if (!type || !type.startsWith('image')) {\n return Promise.resolve();\n }\n\n file = file instanceof Blob ? file : new Blob([file]);\n\n return new Promise((resolve, reject) => {\n const img = new Image();\n\n img.onload = function onload() {\n resolve(img);\n };\n img.onerror = reject;\n img.src = URL.createObjectURL(file);\n }).then((img) => {\n const fileDimensions = pick(img, 'height', 'width');\n\n if (isAvatar) {\n // only if image is a profile avatar\n logger.info('dimensions will be set for avatar image');\n const size =\n fileDimensions.height > fileDimensions.width ? fileDimensions.height : fileDimensions.width;\n\n fileDimensions.height = size;\n fileDimensions.width = size;\n }\n if (!enableThumbnails) {\n logger.info('thumbnails not enabled');\n\n return [null, fileDimensions, null];\n }\n const thumbnailDimensions = computeDimensions(\n fileDimensions,\n thumbnailMaxWidth,\n thumbnailMaxHeight\n );\n\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const {width, height} = thumbnailDimensions;\n\n // explanation of orientation:\n // https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images\n if (file.orientation && file.orientation > 4) {\n canvas.width = height;\n canvas.height = width;\n thumbnailDimensions.width = height;\n thumbnailDimensions.height = width;\n } else {\n canvas.width = thumbnailDimensions.width;\n canvas.height = thumbnailDimensions.height;\n }\n\n orient(\n {\n orientation: file && file.orientation ? file.orientation : '',\n img,\n x: 0,\n y: 0,\n width,\n height,\n ctx,\n },\n file\n );\n\n const parts = canvas.toDataURL('image/png').split(',');\n // Thumbnail uploads were failing with common/base64 decoding\n const byteString = atob(parts[1]);\n\n const buffer = new ArrayBuffer(byteString.length);\n const view = new DataView(buffer);\n\n for (let i = 0; i < byteString.length; i += 1) {\n view.setUint8(i, byteString.charCodeAt(i));\n }\n\n return [buffer, fileDimensions, thumbnailDimensions];\n });\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webex/helper-image",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.420",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Saurabh Jain <saurjai3@cisco.com>",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"sinon": "^9.2.4"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@webex/helper-image": "3.0.0-beta.
|
|
32
|
-
"@webex/http-core": "3.0.0-beta.
|
|
33
|
-
"@webex/test-helper-chai": "3.0.0-beta.
|
|
34
|
-
"@webex/test-helper-file": "3.0.0-beta.
|
|
35
|
-
"@webex/test-helper-mocha": "3.0.0-beta.
|
|
31
|
+
"@webex/helper-image": "3.0.0-beta.420",
|
|
32
|
+
"@webex/http-core": "3.0.0-beta.420",
|
|
33
|
+
"@webex/test-helper-chai": "3.0.0-beta.420",
|
|
34
|
+
"@webex/test-helper-file": "3.0.0-beta.420",
|
|
35
|
+
"@webex/test-helper-mocha": "3.0.0-beta.420",
|
|
36
36
|
"exifr": "^5.0.3",
|
|
37
37
|
"gm": "^1.23.1",
|
|
38
38
|
"lodash": "^4.17.21",
|
package/src/index.js
CHANGED
|
@@ -62,54 +62,6 @@ export async function readExifData(file, buf) {
|
|
|
62
62
|
return buf;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
/* eslint-disable complexity */
|
|
66
|
-
/**
|
|
67
|
-
* Rotates/flips the image on the canvas as per exif information
|
|
68
|
-
* @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)
|
|
69
|
-
* @param {Object} file
|
|
70
|
-
* @returns {Object}
|
|
71
|
-
*/
|
|
72
|
-
export function orient(options, file) {
|
|
73
|
-
const {width, height, ctx, img, orientation, x, y} = options;
|
|
74
|
-
|
|
75
|
-
if (file && file.orientation && file.orientation !== 1) {
|
|
76
|
-
// explanation of orientation:
|
|
77
|
-
// https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
|
|
78
|
-
switch (orientation) {
|
|
79
|
-
case 2:
|
|
80
|
-
// flip
|
|
81
|
-
ctx.transform(-1, 0, 0, 1, width, 0);
|
|
82
|
-
break;
|
|
83
|
-
case 3:
|
|
84
|
-
// rotateImage180
|
|
85
|
-
ctx.transform(-1, 0, 0, -1, width, height);
|
|
86
|
-
break;
|
|
87
|
-
case 4:
|
|
88
|
-
// rotate180AndFlipImage
|
|
89
|
-
ctx.transform(1, 0, 0, -1, 0, height);
|
|
90
|
-
break;
|
|
91
|
-
case 5:
|
|
92
|
-
// rotate90AndFlipImage
|
|
93
|
-
ctx.transform(0, 1, 1, 0, 0, 0);
|
|
94
|
-
break;
|
|
95
|
-
case 6:
|
|
96
|
-
// rotateImage90
|
|
97
|
-
ctx.transform(0, 1, -1, 0, height, 0);
|
|
98
|
-
break;
|
|
99
|
-
case 7:
|
|
100
|
-
// rotateNeg90AndFlipImage
|
|
101
|
-
ctx.transform(0, -1, -1, 0, height, width);
|
|
102
|
-
break;
|
|
103
|
-
case 8:
|
|
104
|
-
// rotateNeg90
|
|
105
|
-
ctx.transform(0, -1, 1, 0, 0, width);
|
|
106
|
-
break;
|
|
107
|
-
default:
|
|
108
|
-
break;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
ctx.drawImage(img, x, y, width, height);
|
|
112
|
-
}
|
|
113
65
|
/* eslint-enable complexity */
|
|
114
66
|
|
|
115
67
|
export {default as processImage} from './process-image';
|
package/src/orient.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* eslint-disable complexity */
|
|
2
|
+
/**
|
|
3
|
+
* Rotates/flips the image on the canvas as per exif information
|
|
4
|
+
* @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)
|
|
5
|
+
* @param {Object} file
|
|
6
|
+
* @returns {Object}
|
|
7
|
+
*/
|
|
8
|
+
export function orient(options, file) {
|
|
9
|
+
const {width, height, ctx, img, orientation, x, y} = options;
|
|
10
|
+
|
|
11
|
+
if (file && file.orientation && file.orientation !== 1) {
|
|
12
|
+
// explanation of orientation:
|
|
13
|
+
// https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
|
|
14
|
+
switch (orientation) {
|
|
15
|
+
case 2:
|
|
16
|
+
// flip
|
|
17
|
+
ctx.transform(-1, 0, 0, 1, width, 0);
|
|
18
|
+
break;
|
|
19
|
+
case 3:
|
|
20
|
+
// rotateImage180
|
|
21
|
+
ctx.transform(-1, 0, 0, -1, width, height);
|
|
22
|
+
break;
|
|
23
|
+
case 4:
|
|
24
|
+
// rotate180AndFlipImage
|
|
25
|
+
ctx.transform(1, 0, 0, -1, 0, height);
|
|
26
|
+
break;
|
|
27
|
+
case 5:
|
|
28
|
+
// rotate90AndFlipImage
|
|
29
|
+
ctx.transform(0, 1, 1, 0, 0, 0);
|
|
30
|
+
break;
|
|
31
|
+
case 6:
|
|
32
|
+
// rotateImage90
|
|
33
|
+
ctx.transform(0, 1, -1, 0, height, 0);
|
|
34
|
+
break;
|
|
35
|
+
case 7:
|
|
36
|
+
// rotateNeg90AndFlipImage
|
|
37
|
+
ctx.transform(0, -1, -1, 0, height, width);
|
|
38
|
+
break;
|
|
39
|
+
case 8:
|
|
40
|
+
// rotateNeg90
|
|
41
|
+
ctx.transform(0, -1, 1, 0, 0, width);
|
|
42
|
+
break;
|
|
43
|
+
default:
|
|
44
|
+
break;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
ctx.drawImage(img, x, y, width, height);
|
|
48
|
+
}
|
package/test/unit/spec/index.js
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
import {assert} from '@webex/test-helper-chai';
|
|
6
|
-
import {readExifData,
|
|
6
|
+
import {readExifData, updateImageOrientation} from '@webex/helper-image';
|
|
7
|
+
import {orient} from './../../../src/orient';
|
|
7
8
|
import fileHelper from '@webex/test-helper-file';
|
|
8
9
|
import sinon from 'sinon';
|
|
9
10
|
import {browserOnly, nodeOnly} from '@webex/test-helper-mocha';
|