@webex/helper-image 2.59.2 → 2.59.3-next.1

package/src/index.js

@@ -1,68 +1,68 @@
-/*!
- * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.
- */
-
-/* eslint no-unused-vars: ["error", { "vars": "local" }] */
-// eslint-disable-next-line no-redeclare
-
-const {Buffer} = require('safe-buffer');
-const {parse} = require('exifr/dist/lite.umd');
-
-/**
- * Updates the image file with exif information, required to correctly rotate the image activity
- * @param {Object} file
- * @param {Object} options
- * @param {boolean} options.shouldNotAddExifData
- * @returns {Promise<Object>}
- */
-export function updateImageOrientation(file, options = {}) {
-  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) => {
-    if (options.shouldNotAddExifData) {
-      return buf;
-    }
-
-    return readExifData(file, buf);
-  });
-}
-
-/**
- * Adds exif orientation information on the image file
- * @param {Object} file
- * @param {Object} buf
- * @returns {Promise<ExifImage>}
- */
-export async function readExifData(file, buf) {
-  // 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')) {
-    const exifData = await parse(buf, {translateValues: false});
-
-    if (exifData) {
-      const {Orientation, ExifImageHeight, ExifImageWidth} = exifData;
-
-      file.orientation = Orientation;
-      file.exifHeight = ExifImageHeight;
-      file.exifWidth = ExifImageWidth;
-
-      if (file.image) {
-        file.image.orientation = Orientation;
-      }
-    }
-  }
-
-  return buf;
-}
-
-/* eslint-enable complexity */
-
-export {default as processImage} from './process-image';
-export {default as detectFileType} from './detect-filetype';
+/*!
+ * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.
+ */
+
+/* eslint no-unused-vars: ["error", { "vars": "local" }] */
+// eslint-disable-next-line no-redeclare
+
+const {Buffer} = require('safe-buffer');
+const {parse} = require('exifr/dist/lite.umd');
+
+/**
+ * Updates the image file with exif information, required to correctly rotate the image activity
+ * @param {Object} file
+ * @param {Object} options
+ * @param {boolean} options.shouldNotAddExifData
+ * @returns {Promise<Object>}
+ */
+export function updateImageOrientation(file, options = {}) {
+  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) => {
+    if (options.shouldNotAddExifData) {
+      return buf;
+    }
+
+    return readExifData(file, buf);
+  });
+}
+
+/**
+ * Adds exif orientation information on the image file
+ * @param {Object} file
+ * @param {Object} buf
+ * @returns {Promise<ExifImage>}
+ */
+export async function readExifData(file, buf) {
+  // 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')) {
+    const exifData = await parse(buf, {translateValues: false});
+
+    if (exifData) {
+      const {Orientation, ExifImageHeight, ExifImageWidth} = exifData;
+
+      file.orientation = Orientation;
+      file.exifHeight = ExifImageHeight;
+      file.exifWidth = ExifImageWidth;
+
+      if (file.image) {
+        file.image.orientation = Orientation;
+      }
+    }
+  }
+
+  return buf;
+}
+
+/* eslint-enable complexity */
+
+export {default as processImage} from './process-image';
+export {default as detectFileType} from './detect-filetype';

package/src/orient.js

@@ -1,48 +1,48 @@
-/* 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-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);
+}

package/src/process-image.browser.js

@@ -1,144 +1,144 @@
-/*!
- * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.
- */
-
-import {pick} from 'lodash';
-
-import {orient} from './orient';
-/* eslint-env browser */
-
-/**
- * Determins the dimensions of an image
- * @param {Object} constraints
- * @param {Number} constraints.width
- * @param {Number} constraints.height
- * @param {Number} maxWidth
- * @param {Number} maxHeight
- * @returns {Object}
- */
-function computeDimensions({width, height}, maxWidth, maxHeight) {
-  if (height > width) {
-    if (height > maxHeight) {
-      width = (width * maxHeight) / height;
-      height = maxHeight;
-    }
-
-    if (width > maxWidth) {
-      height = (height * maxWidth) / width;
-      width = maxWidth;
-    }
-  } else {
-    if (width > maxWidth) {
-      height = (height * maxWidth) / width;
-      width = maxWidth;
-    }
-
-    if (height > maxHeight) {
-      width = (width * maxHeight) / height;
-      height = maxHeight;
-    }
-  }
-
-  return {height, width};
-}
-
-/**
- * Measures an image file and produces a thumbnail for it
- * @param {Object} options
- * @param {Blob|ArrayBuffer} options.file
- * @param {Number} options.thumbnailMaxWidth
- * @param {Number} options.thumbnailMaxHeight
- * @param {Boolean} options.enableThumbnails
- * @param {Object} options.logger
- * @param {Boolean} options.isAvatar
- * @returns {Promise<Array>} Buffer, Dimensions, thumbnailDimensions
- */
-export default function processImage({
-  file,
-  type,
-  thumbnailMaxWidth,
-  thumbnailMaxHeight,
-  enableThumbnails,
-  logger,
-  isAvatar,
-}) {
-  if (!type || !type.startsWith('image')) {
-    return Promise.resolve();
-  }
-
-  file = file instanceof Blob ? file : new Blob([file]);
-
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-
-    img.onload = function onload() {
-      resolve(img);
-    };
-    img.onerror = reject;
-    img.src = URL.createObjectURL(file);
-  }).then((img) => {
-    const fileDimensions = pick(img, 'height', 'width');
-
-    if (isAvatar) {
-      // only if image is a profile avatar
-      logger.info('dimensions will be set for avatar image');
-      const size =
-        fileDimensions.height > fileDimensions.width ? fileDimensions.height : fileDimensions.width;
-
-      fileDimensions.height = size;
-      fileDimensions.width = size;
-    }
-    if (!enableThumbnails) {
-      logger.info('thumbnails not enabled');
-
-      return [null, fileDimensions, null];
-    }
-    const thumbnailDimensions = computeDimensions(
-      fileDimensions,
-      thumbnailMaxWidth,
-      thumbnailMaxHeight
-    );
-
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const {width, height} = thumbnailDimensions;
-
-    // explanation of orientation:
-    // https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
-    if (file.orientation && file.orientation > 4) {
-      canvas.width = height;
-      canvas.height = width;
-      thumbnailDimensions.width = height;
-      thumbnailDimensions.height = width;
-    } else {
-      canvas.width = thumbnailDimensions.width;
-      canvas.height = thumbnailDimensions.height;
-    }
-
-    orient(
-      {
-        orientation: file && file.orientation ? file.orientation : '',
-        img,
-        x: 0,
-        y: 0,
-        width,
-        height,
-        ctx,
-      },
-      file
-    );
-
-    const parts = canvas.toDataURL('image/png').split(',');
-    // Thumbnail uploads were failing with common/base64 decoding
-    const byteString = atob(parts[1]);
-
-    const buffer = new ArrayBuffer(byteString.length);
-    const view = new DataView(buffer);
-
-    for (let i = 0; i < byteString.length; i += 1) {
-      view.setUint8(i, byteString.charCodeAt(i));
-    }
-
-    return [buffer, fileDimensions, thumbnailDimensions];
-  });
-}
+/*!
+ * Copyright (c) 2015-2020 Cisco Systems, Inc. See LICENSE file.
+ */
+
+import {pick} from 'lodash';
+
+import {orient} from './orient';
+/* eslint-env browser */
+
+/**
+ * Determins the dimensions of an image
+ * @param {Object} constraints
+ * @param {Number} constraints.width
+ * @param {Number} constraints.height
+ * @param {Number} maxWidth
+ * @param {Number} maxHeight
+ * @returns {Object}
+ */
+function computeDimensions({width, height}, maxWidth, maxHeight) {
+  if (height > width) {
+    if (height > maxHeight) {
+      width = (width * maxHeight) / height;
+      height = maxHeight;
+    }
+
+    if (width > maxWidth) {
+      height = (height * maxWidth) / width;
+      width = maxWidth;
+    }
+  } else {
+    if (width > maxWidth) {
+      height = (height * maxWidth) / width;
+      width = maxWidth;
+    }
+
+    if (height > maxHeight) {
+      width = (width * maxHeight) / height;
+      height = maxHeight;
+    }
+  }
+
+  return {height, width};
+}
+
+/**
+ * Measures an image file and produces a thumbnail for it
+ * @param {Object} options
+ * @param {Blob|ArrayBuffer} options.file
+ * @param {Number} options.thumbnailMaxWidth
+ * @param {Number} options.thumbnailMaxHeight
+ * @param {Boolean} options.enableThumbnails
+ * @param {Object} options.logger
+ * @param {Boolean} options.isAvatar
+ * @returns {Promise<Array>} Buffer, Dimensions, thumbnailDimensions
+ */
+export default function processImage({
+  file,
+  type,
+  thumbnailMaxWidth,
+  thumbnailMaxHeight,
+  enableThumbnails,
+  logger,
+  isAvatar,
+}) {
+  if (!type || !type.startsWith('image')) {
+    return Promise.resolve();
+  }
+
+  file = file instanceof Blob ? file : new Blob([file]);
+
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = function onload() {
+      resolve(img);
+    };
+    img.onerror = reject;
+    img.src = URL.createObjectURL(file);
+  }).then((img) => {
+    const fileDimensions = pick(img, 'height', 'width');
+
+    if (isAvatar) {
+      // only if image is a profile avatar
+      logger.info('dimensions will be set for avatar image');
+      const size =
+        fileDimensions.height > fileDimensions.width ? fileDimensions.height : fileDimensions.width;
+
+      fileDimensions.height = size;
+      fileDimensions.width = size;
+    }
+    if (!enableThumbnails) {
+      logger.info('thumbnails not enabled');
+
+      return [null, fileDimensions, null];
+    }
+    const thumbnailDimensions = computeDimensions(
+      fileDimensions,
+      thumbnailMaxWidth,
+      thumbnailMaxHeight
+    );
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const {width, height} = thumbnailDimensions;
+
+    // explanation of orientation:
+    // https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
+    if (file.orientation && file.orientation > 4) {
+      canvas.width = height;
+      canvas.height = width;
+      thumbnailDimensions.width = height;
+      thumbnailDimensions.height = width;
+    } else {
+      canvas.width = thumbnailDimensions.width;
+      canvas.height = thumbnailDimensions.height;
+    }
+
+    orient(
+      {
+        orientation: file && file.orientation ? file.orientation : '',
+        img,
+        x: 0,
+        y: 0,
+        width,
+        height,
+        ctx,
+      },
+      file
+    );
+
+    const parts = canvas.toDataURL('image/png').split(',');
+    // Thumbnail uploads were failing with common/base64 decoding
+    const byteString = atob(parts[1]);
+
+    const buffer = new ArrayBuffer(byteString.length);
+    const view = new DataView(buffer);
+
+    for (let i = 0; i < byteString.length; i += 1) {
+      view.setUint8(i, byteString.charCodeAt(i));
+    }
+
+    return [buffer, fileDimensions, thumbnailDimensions];
+  });
+}