Strip Exif data without Sharp

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>

.storybook/webpack.config.js

@@ -31,11 +31,5 @@ module.exports = ({ config }) => {
     net: 'net',
   };
 
-  config.plugins.unshift(
-    new webpack.IgnorePlugin({
-      resourceRegExp: /sharp$/,
-    })
-  );
-
   return config;
 };

preload.js

@@ -405,7 +405,6 @@ try {
   window.ReactDOM = require('react-dom');
   window.moment = require('moment');
   window.PQueue = require('p-queue').default;
-  window.sharp = require('sharp');
 
   const Signal = require('./js/modules/signal');
   const i18n = require('./js/modules/i18n');

ts/test-electron/util/scaleImageToLevel_test.ts

@@ -2,31 +2,19 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
+import loadImage from 'blueimp-load-image';
 import { IMAGE_JPEG, IMAGE_PNG } from '../../types/MIME';
-import * as log from '../../logging/log';
 
 import { scaleImageToLevel } from '../../util/scaleImageToLevel';
 
 describe('scaleImageToLevel', () => {
   // NOTE: These tests are incomplete.
 
-  let objectUrlsToRevoke: Array<string>;
-  function createObjectUrl(blob: Blob): string {
-    const result = URL.createObjectURL(blob);
-    objectUrlsToRevoke.push(result);
-    return result;
+  async function getBlob(path: string): Promise<Blob> {
+    const response = await fetch(path);
+    return response.blob();
   }
 
-  beforeEach(() => {
-    objectUrlsToRevoke = [];
-  });
-
-  afterEach(() => {
-    objectUrlsToRevoke.forEach(objectUrl => {
-      URL.revokeObjectURL(objectUrl);
-    });
-  });
-
   it("doesn't scale images that are already small enough", async () => {
     const testCases = [
       {
@@ -46,16 +34,11 @@ describe('scaleImageToLevel', () => {
     await Promise.all(
       testCases.map(
         async ({ path, contentType, expectedWidth, expectedHeight }) => {
-          const blob = await (await fetch(path)).blob();
+          const blob = await getBlob(path);
           const scaled = await scaleImageToLevel(blob, contentType, true);
 
-          const {
-            width,
-            height,
-          } = await window.Signal.Types.VisualAttachment.getImageDimensions({
-            objectUrl: createObjectUrl(scaled.blob),
-            logger: log,
-          });
+          const data = await loadImage(scaled.blob, { orientation: true });
+          const { originalWidth: width, originalHeight: height } = data;
 
           assert.strictEqual(width, expectedWidth);
           assert.strictEqual(height, expectedHeight);
@@ -65,4 +48,17 @@ describe('scaleImageToLevel', () => {
       )
     );
   });
+
+  it('removes EXIF data from small images', async () => {
+    const original = await getBlob('../fixtures/kitten-2-64-64.jpg');
+    assert.isDefined(
+      (await loadImage(original, { meta: true, orientation: true })).exif,
+      'Test setup failure: expected fixture to have EXIF data'
+    );
+
+    const scaled = await scaleImageToLevel(original, IMAGE_JPEG, true);
+    assert.isUndefined(
+      (await loadImage(scaled.blob, { meta: true, orientation: true })).exif
+    );
+  });
 });

ts/util/scaleImageToLevel.ts

@@ -101,17 +101,6 @@ async function getCanvasBlobAsJPEG(
   return canvasToBlob(canvas, IMAGE_JPEG, quality);
 }
 
-async function stripImageFileEXIFData(
-  file: File | Blob,
-  type: MIMEType
-): Promise<Blob> {
-  const arrayBuffer = await file.arrayBuffer();
-  const xArrayBuffer = await window
-    .sharp(new Uint8Array(arrayBuffer))
-    .toBuffer();
-  return new Blob([xArrayBuffer], { type });
-}
-
 export async function scaleImageToLevel(
   fileOrBlobOrURL: File | Blob,
   contentType: MIMEType,
@@ -143,7 +132,7 @@ export async function scaleImageToLevel(
     MEDIA_QUALITY_LEVEL_DATA.get(level) || DEFAULT_LEVEL_DATA;
 
   if (fileOrBlobOrURL.size <= thresholdSize) {
-    const blob = await stripImageFileEXIFData(fileOrBlobOrURL, contentType);
+    const blob = await canvasToBlob(image, contentType);
     return {
       blob,
       contentType,

ts/window.d.ts

@@ -7,7 +7,6 @@ import { DeepPartial, Store } from 'redux';
 import * as Backbone from 'backbone';
 import * as Underscore from 'underscore';
 import moment from 'moment';
-import sharp from 'sharp';
 import PQueue from 'p-queue/dist';
 import { Attributes, ComponentClass, FunctionComponent, Ref } from 'react';
 import { imageToBlurHash } from './util/imageToBlurHash';
@@ -162,7 +161,6 @@ declare global {
     _: typeof Underscore;
     $: typeof jQuery;
 
-    sharp: typeof sharp;
     moment: typeof moment;
     imageToBlurHash: typeof imageToBlurHash;
     loadImage: any;