[CCA] Drop orientation before draw JPEG onto canvas.

It's a workaround for not hitting crbug.com/1043790 by setting
orientation to 1 before drawing JPEG with EXIF onto canvas.

Bug: 998944
Bug: b:147272638
Test: tast run <DUT> 'camera.CCAUIResolutions'
Change-Id: I274325e7ec4ce39fabcddb6e42e3fa1f55824514
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2040971Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#738890}

chrome/browser/resources/chromeos/camera/src/js/BUILD.gn

@@ -136,6 +136,7 @@ js_library("util") {
     ":tooltip",
     ":type",
     "browser_proxy:browser_proxy",
+    "externs:w3c_fileapi",
     "mojo:chrome_helper",
   ]
   externs_list = [ "$externs_path/chrome_extensions.js" ]

chrome/browser/resources/chromeos/camera/src/js/util.js

@@ -8,18 +8,19 @@ import {Resolution} from './type.js';
 
 /**
  * Gets the clockwise rotation and flip that can orient a photo to its upright
- * position.
+ * position of the photo and drop its orientation information.
  * @param {!Blob} blob JPEG blob that might contain EXIF orientation field.
- * @return {Promise<Object<number, boolean>>}
+ * @return {!Promise<{rotation: number, flip: boolean, blob: !Blob}>} The
+ * rotation, flip information of photo and the photo blob after drop those
+ * information.
  */
-function getPhotoOrientation(blob) {
-  const getOrientation = new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = function(event) {
-      const view = new DataView(event.target.result);
+function dropPhotoOrientation(blob) {
+  let /** !Blob */ blobWithoutOrientation = blob;
+  const getOrientation = (async () => {
+    const buffer = await blob.arrayBuffer();
+    const view = new DataView(buffer);
     if (view.getUint16(0, false) !== 0xFFD8) {
-        resolve(1);
-        return;
+      return 1;
     }
     const length = view.byteLength;
     let offset = 2;
@@ -40,8 +41,11 @@ function getPhotoOrientation(blob) {
         offset += 2;
         for (let i = 0; i < tags; i++) {
           if (view.getUint16(offset + (i * 12), little) === 0x0112) {
-              resolve(view.getUint16(offset + (i * 12) + 8, little));
-              return;
+            offset += (i * 12) + 8;
+            const orientation = view.getUint16(offset, little);
+            view.setUint16(offset, 1, little);
+            blobWithoutOrientation = new Blob([buffer]);
+            return orientation;
           }
         }
       } else if ((marker & 0xFF00) !== 0xFF00) {
@@ -50,12 +54,11 @@ function getPhotoOrientation(blob) {
         offset += view.getUint16(offset, false);
       }
     }
-      resolve(1);
-    };
-    reader.readAsArrayBuffer(blob);
-  });
+    return 1;
+  })();
 
-  return getOrientation.then((orientation) => {
+  return getOrientation
+      .then((orientation) => {
         switch (orientation) {
           case 1:
             return {rotation: 0, flip: false};
@@ -76,6 +79,9 @@ function getPhotoOrientation(blob) {
           default:
             return {rotation: 0, flip: false};
         }
+      })
+      .then((orientInfo) => {
+        return Object.assign(orientInfo, {blob: blobWithoutOrientation});
       });
 }
 
@@ -135,7 +141,7 @@ export function orientPhoto(blob, onSuccess, onFailure) {
     }, 'image/jpeg');
   };
 
-  getPhotoOrientation(blob).then((orientation) => {
+  dropPhotoOrientation(blob).then((orientation) => {
     if (orientation.rotation === 0 && !orientation.flip) {
       onSuccess(blob);
     } else {
@@ -144,7 +150,7 @@ export function orientPhoto(blob, onSuccess, onFailure) {
         drawPhoto(original, orientation, onSuccess, onFailure);
       };
       original.onerror = onFailure;
-      original.src = URL.createObjectURL(blob);
+      original.src = URL.createObjectURL(orientation.blob);
     }
   });
 }