Start to use new metadata item in ImageEncoder.

BUG=410766
TEST=None

Review URL: https://codereview.chromium.org/936143003

Cr-Commit-Position: refs/heads/master@{#318188}

ui/file_manager/gallery/js/gallery_item.js

@@ -282,18 +282,22 @@ Gallery.Item.prototype.saveToFile = function(
   };
 
   var doSave = function(newFile, fileEntry) {
+    var metadataPromise = this.fileSystemMetadata_.get(
+        [fileEntry],
+        ['mediaMimeType', 'contentMimeType', 'ifd', 'exifLittleEndian']);
+    metadataPromise.then(function(metadataItems) {
       fileEntry.createWriter(function(fileWriter) {
         var writeContent = function() {
           fileWriter.onwriteend = onSuccess.bind(null, fileEntry);
-        // TODO(hirono): Remove the quality 1 for thumbanils. The code path is
-        // no longer used.
+          var metadataItem = metadataItems[0];
+          metadataItem.modificationTime = new Date();
           var metadataEncoder = ImageEncoder.encodeMetadata(
-            this.metadata_, canvas, 1 /* quality */);
+              metadataItem, canvas, /* quality for thumbnail*/ 0.8);
           // Contrary to what one might think 1.0 is not a good default. Opening
-        // and saving an typical photo taken with consumer camera increases its
-        // file size by 50-100%. Experiments show that 0.9 is much better. It
-        // shrinks some photos a bit, keeps others about the same size, but does
-        // not visibly lower the quality.
+          // and saving an typical photo taken with consumer camera increases
+          // its file size by 50-100%. Experiments show that 0.9 is much better.
+          // It shrinks some photos a bit, keeps others about the same size, but
+          // does not visibly lower the quality.
           fileWriter.write(ImageEncoder.getBlob(canvas, metadataEncoder, 0.9));
         }.bind(this);
         fileWriter.onerror = function(error) {
@@ -309,6 +313,7 @@ Gallery.Item.prototype.saveToFile = function(
           fileWriter.truncate(0);
         }
       }.bind(this), onError);
+    }.bind(this));
   }.bind(this);
 
   var getFile = function(dir, newFile) {

ui/file_manager/gallery/js/gallery_item_unittest.js

@@ -63,6 +63,13 @@ function testSaveToFile(callback) {
       {isReadOnly: false},
       {name: 'oldMetadata'},
       metadataCache,
+      // Mock of FileSystemMetadata.
+      {
+        get: function() {
+          return Promise.resolve([{}]);
+        },
+        notifyEntriesChanged: function() {}
+      },
       /* original */ true);
   assertEquals('oldMetadata', item.getMetadata().name);
   assertFalse(fetchedMediaCleared);

ui/file_manager/gallery/js/image_editor/exif_encoder.js

@@ -5,18 +5,35 @@
 /**
  * The Exif metadata encoder.
  * Uses the metadata format as defined by ExifParser.
- * @param {!Object} originalMetadata Metadata to encode.
+ * @param {!MetadataItem} originalMetadata Metadata to encode.
  * @constructor
  * @extends {ImageEncoder.MetadataEncoder}
  * @struct
  */
 function ExifEncoder(originalMetadata) {
   ImageEncoder.MetadataEncoder.apply(this, arguments);
+  /**
+   * Image File Directory obtained from EXIF header.
+   * @private {!Object}
+   * @const
+   */
+  this.ifd_ = /** @type {!Object} */(
+      JSON.parse(JSON.stringify(originalMetadata.ifd || {})));
+
+  /**
+   * Note use little endian if the original metadata does not have the
+   * information.
+   * @private {boolean}
+   * @const
+   */
+  this.exifLittleEndian_ = !!originalMetadata.exifLittleEndian;
 
-  if (this.metadata_.media && this.metadata_.media.ifd)
-    this.ifd_ = this.metadata_.media.ifd;
-  else
-    this.ifd_ = {};
+  /**
+   * Modification time to be stored in EXIF header.
+   * @private {!Date}
+   * @const
+   */
+  this.modificationTime_ = assert(originalMetadata.modificationTime);
 }
 
 ExifEncoder.prototype = {__proto__: ImageEncoder.MetadataEncoder.prototype};
@@ -32,11 +49,11 @@ ExifEncoder.SOFTWARE = 'Chrome OS Gallery App\0';
 
 /**
  * @param {!HTMLCanvasElement} canvas
- * @param {Date=} opt_modificationDateTime
  * @override
  */
-ExifEncoder.prototype.setImageData =
-    function(canvas, opt_modificationDateTime) {
+ExifEncoder.prototype.setImageData = function(canvas) {
+  ImageEncoder.MetadataEncoder.prototype.setImageData.call(this, canvas);
+
   var image = this.ifd_.image;
   if (!image)
     image = this.ifd_.image = {};
@@ -54,11 +71,7 @@ ExifEncoder.prototype.setImageData =
   ExifEncoder.findOrCreateTag(exif, Exif.Tag.X_DIMENSION).value = canvas.width;
   ExifEncoder.findOrCreateTag(exif, Exif.Tag.Y_DIMENSION).value = canvas.height;
 
-  this.metadata_.width = canvas.width;
-  this.metadata_.height = canvas.height;
-
   // Always save in default orientation.
-  delete this.metadata_['imageTransform'];
   ExifEncoder.findOrCreateTag(image, Exif.Tag.ORIENTATION).value = 1;
 
   // Update software name.
@@ -75,15 +88,14 @@ ExifEncoder.prototype.setImageData =
     return str;
   };
 
-  var modificationDateTime = opt_modificationDateTime || new Date();
   var dateTimeTag = ExifEncoder.findOrCreateTag(image, Exif.Tag.DATETIME, 2);
   dateTimeTag.value =
-      padNumWithZero(modificationDateTime.getFullYear(), 4) + ':' +
-      padNumWithZero(modificationDateTime.getMonth() + 1, 2) + ':' +
-      padNumWithZero(modificationDateTime.getDate(), 2) + ' ' +
-      padNumWithZero(modificationDateTime.getHours(), 2) + ':' +
-      padNumWithZero(modificationDateTime.getMinutes(), 2) + ':' +
-      padNumWithZero(modificationDateTime.getSeconds(), 2) + '\0';
+      padNumWithZero(this.modificationTime_.getFullYear(), 4) + ':' +
+      padNumWithZero(this.modificationTime_.getMonth() + 1, 2) + ':' +
+      padNumWithZero(this.modificationTime_.getDate(), 2) + ' ' +
+      padNumWithZero(this.modificationTime_.getHours(), 2) + ':' +
+      padNumWithZero(this.modificationTime_.getMinutes(), 2) + ':' +
+      padNumWithZero(this.modificationTime_.getSeconds(), 2) + '\0';
   dateTimeTag.componentCount = 20;
 };
 
@@ -91,24 +103,28 @@ ExifEncoder.prototype.setImageData =
  * @override
  */
 ExifEncoder.prototype.setThumbnailData = function(canvas, quality) {
+  if (canvas) {
     // Empirical formula with reasonable behavior:
     // 10K for 1Mpix, 30K for 5Mpix, 50K for 9Mpix and up.
-  var pixelCount = this.metadata_.width * this.metadata_.height;
+    var pixelCount = this.imageWidth * this.imageHeight;
     var maxEncodedSize = 5000 * Math.min(10, 1 + pixelCount / 1000000);
-
-  var DATA_URL_PREFIX = 'data:' + this.metadata_.media.mimeType + ';base64,';
+    var DATA_URL_PREFIX = 'data:image/jpeg;base64,';
     var BASE64_BLOAT = 4 / 3;
     var maxDataURLLength =
         DATA_URL_PREFIX.length + Math.ceil(maxEncodedSize * BASE64_BLOAT);
-
-  for (;; quality *= 0.8) {
+    for (; quality > 0.2; quality *= 0.8) {
       ImageEncoder.MetadataEncoder.prototype.setThumbnailData.call(
           this, canvas, quality);
-    if (this.metadata_.thumbnailURL.length <= maxDataURLLength || quality < 0.2)
+      // If the obtained thumbnail URL is too long, reset the URL and try again
+      // with less quality value.
+      if (this.thumbnailDataUrl.length > maxDataURLLength) {
+        this.thumbnailDataUrl = '';
+        continue;
+      }
       break;
     }
-
-  if (canvas && this.metadata_.thumbnailURL.length <= maxDataURLLength) {
+  }
+  if (this.thumbnailDataUrl) {
     var thumbnail = this.ifd_.thumbnail;
     if (!thumbnail)
       thumbnail = this.ifd_.thumbnail = {};
@@ -130,14 +146,9 @@ ExifEncoder.prototype.setThumbnailData = function(canvas, quality) {
     ExifEncoder.findOrCreateTag(this.ifd_.image, Exif.Tag.COMPRESSION).value =
         6;
   } else {
-    console.warn(
-        'Thumbnail URL too long: ' + this.metadata_.thumbnailURL.length);
-    // Delete thumbnail ifd so that it is not written out to a file, but
-    // keep thumbnailURL for display purposes.
-    if (this.ifd_.thumbnail) {
+    if (this.ifd_.thumbnail)
       delete this.ifd_.thumbnail;
   }
-  }
 };
 
 /**
@@ -207,7 +218,7 @@ ExifEncoder.prototype.encode = function() {
   // can be directly mapped to offsets as encoded in the dictionaries.
   var bw = new ByteWriter(bytes.buffer, HEADER_SIZE);
 
-  if (this.metadata_.littleEndian) {
+  if (this.exifLittleEndian_) {
     bw.setByteOrder(ByteWriter.ByteOrder.LITTLE_ENDIAN);
     bw.writeScalar(Exif.Align.LITTLE, 2);
   } else {
@@ -246,8 +257,7 @@ ExifEncoder.prototype.encode = function() {
         this.ifd_.thumbnail,
         [Exif.Tag.JPG_THUMB_OFFSET, Exif.Tag.JPG_THUMB_LENGTH]);
 
-    var thumbnailDecoded =
-        ImageEncoder.decodeDataURL(this.metadata_.thumbnailURL);
+    var thumbnailDecoded = ImageEncoder.decodeDataURL(this.thumbnailDataUrl);
     bw.resolveOffset(Exif.Tag.JPG_THUMB_OFFSET);
     bw.resolve(Exif.Tag.JPG_THUMB_LENGTH, thumbnailDecoded.length);
     bw.writeString(thumbnailDecoded);

ui/file_manager/gallery/js/image_editor/exif_encoder_unittest.js

@@ -11,8 +11,8 @@ function testExifEncodeAndDecode() {
   var data = canvas.toDataURL('image/jpeg');
 
   var metadata = {
-    media: {
-      mimeType: 'image/jpeg',
+    mediaMimeType: 'image/jpeg',
+    modificationTime: new Date(2015, 0, 7, 15, 30, 6),
     ifd: {
       image: {
         // Manufacture
@@ -56,11 +56,9 @@ function testExifEncodeAndDecode() {
         }
       }
     }
-    }
   };
 
-  var encoder = ImageEncoder.encodeMetadata(metadata, canvas, 1,
-      new Date(2015, 0, 7, 15, 30, 6));
+  var encoder = ImageEncoder.encodeMetadata(metadata, canvas, 1);
 
   // Assert that ExifEncoder is returned.
   assertTrue(encoder instanceof ExifEncoder);
@@ -107,6 +105,6 @@ function testExifEncodeAndDecode() {
   assertEquals('2015:01:07 15:30:06\0', parsedMetadata.ifd.image[0x132].value);
 
   // Thumbnail image
-  assert(parsedMetadata.thumbnailTransform);
-  assert(parsedMetadata.thumbnailURL);
+  assertTrue(!!parsedMetadata.thumbnailTransform);
+  assertTrue(!!parsedMetadata.thumbnailURL);
 }

ui/file_manager/gallery/js/image_editor/image_encoder.js

@@ -22,14 +22,15 @@ ImageEncoder.MIN_IMAGE_DIMENSION_FOR_THUMBNAIL =
 
 /**
  * Metadata encoders.
- * @type {!Object.<string,function(new:ImageEncoder.MetadataEncoder,!Object)>}
+ * @type {!Object.<string,function(
+ *            new:ImageEncoder.MetadataEncoder,!MetadataItem)>}
  * @const
  */
 ImageEncoder.metadataEncoders = {};
 
 /**
  * Registers metadata encoder.
- * @param {function(new:ImageEncoder.MetadataEncoder,!Object)} constructor
+ * @param {function(new:ImageEncoder.MetadataEncoder,!MetadataItem)} constructor
  *     Constructor of a metadata encoder.
  * @param {string} mimeType Mime type of the metadata encoder.
  */
@@ -42,12 +43,12 @@ ImageEncoder.registerMetadataEncoder = function(constructor, mimeType) {
  *
  * The encoder will own and modify a copy of the original metadata.
  *
- * @param {!Object} metadata Original metadata.
+ * @param {!MetadataItem} metadata Original metadata.
  * @return {!ImageEncoder.MetadataEncoder} Created metadata encoder.
  */
 ImageEncoder.createMetadataEncoder = function(metadata) {
   var constructor =
-      (metadata && ImageEncoder.metadataEncoders[metadata.media.mimeType]) ||
+      ImageEncoder.metadataEncoders[metadata.mediaMimeType || ""] ||
       ImageEncoder.MetadataEncoder;
   return new constructor(metadata);
 };
@@ -56,16 +57,14 @@ ImageEncoder.createMetadataEncoder = function(metadata) {
  * Create a metadata encoder object holding a copy of metadata
  * modified according to the properties of the supplied image.
  *
- * @param {!Object} metadata Original metadata.
+ * @param {!MetadataItem} metadata Original metadata.
  * @param {!HTMLCanvasElement} canvas Canvas to use for metadata.
  * @param {number} thumbnailQuality Encoding quality of a thumbnail.
- * @param {Date=} opt_modificationDateTime Modification date time of an image.
  * @return {!ImageEncoder.MetadataEncoder} Encoder with encoded metadata.
  */
-ImageEncoder.encodeMetadata = function(
-    metadata, canvas, thumbnailQuality, opt_modificationDateTime) {
+ImageEncoder.encodeMetadata = function(metadata, canvas, thumbnailQuality) {
   var encoder = ImageEncoder.createMetadataEncoder(metadata);
-  encoder.setImageData(canvas, opt_modificationDateTime);
+  encoder.setImageData(canvas);
   encoder.setThumbnailData(ImageEncoder.createThumbnail(canvas),
       thumbnailQuality);
   return encoder;
@@ -82,8 +81,7 @@ ImageEncoder.getBlob = function(canvas, metadataEncoder, imageQuality) {
   ImageUtil.trace.resetTimer('dataurl');
   // WebKit does not support canvas.toBlob yet so canvas.toDataURL is
   // the only way to use the Chrome built-in image encoder.
-  var dataURL = canvas.toDataURL(metadataEncoder.getMetadata().media.mimeType,
-      imageQuality);
+  var dataURL = canvas.toDataURL(metadataEncoder.mimeType, imageQuality);
   ImageUtil.trace.reportTimer('dataurl');
 
   var encodedImage = ImageEncoder.decodeDataURL(dataURL);
@@ -112,8 +110,7 @@ ImageEncoder.getBlob = function(canvas, metadataEncoder, imageQuality) {
     appendSlice(ImageEncoder.stringToArrayBuffer(
         encodedImage, 0, encodedImage.length));
   }
-  var blob = new Blob(slices,
-      {type: metadataEncoder.getMetadata().media.mimeType});
+  var blob = new Blob(slices, {type: metadataEncoder.mimeType});
   ImageUtil.trace.reportTimer('blob');
   return blob;
 };
@@ -181,21 +178,34 @@ ImageEncoder.stringToArrayBuffer = function(string, from, to) {
  * Serves as a default metadata encoder for images that none of the metadata
  * parsers recognized.
  *
- * @param {!Object} original_metadata Starting metadata.
+ * @param {!MetadataItem} originalMetadata Starting metadata.
  * @constructor
  * @struct
  */
-ImageEncoder.MetadataEncoder = function(original_metadata) {
-  this.metadata_ = MetadataCache.cloneMetadata(original_metadata) || {};
-  if (ImageEncoder.MetadataEncoder.getMimeType_(this.metadata_) !==
-      'image/jpeg') {
-    // Chrome can only encode JPEG and PNG. Force PNG mime type so that we
-    // can save to file and generate a thumbnail.
-    // TODO(yawano) Change this not to modify metadata. Mime type comes from
-    // different fields depending on the conditions. Just overriding
-    // media.mimeType and use the modified metadata could cause a problem.
-    this.metadata_.media.mimeType = 'image/png';
-  }
+ImageEncoder.MetadataEncoder = function(originalMetadata) {
+  var mimeType = ImageEncoder.MetadataEncoder.getMimeType_(originalMetadata);
+
+  /**
+   * Chrome can only encode JPEG and PNG. Force PNG mime type so that we
+   * can save to file and generate a thumbnail.
+   * @public {string}
+   */
+  this.mimeType = mimeType === 'image/jpeg' ? 'image/jpeg' : 'image/png';
+
+  /**
+   * @protected {string}
+   */
+  this.thumbnailDataUrl = '';
+
+  /**
+   * @protected {number}
+   */
+  this.imageWidth = 0;
+
+  /**
+   * @protected {number}
+   */
+  this.imageHeight = 0;
 };
 
 /**
@@ -203,41 +213,27 @@ ImageEncoder.MetadataEncoder = function(original_metadata) {
  * fails, it falls back to external.contentMimeType. If both fields are
  * undefined, it means that metadata is broken. Then it throws an exception.
  *
- * @param {!Object} metadata Metadata.
+ * @param {!MetadataItem} metadata Metadata.
  * @return {string} Mime type.
  * @private
  */
 ImageEncoder.MetadataEncoder.getMimeType_ = function(metadata) {
-  if (metadata.media.mimeType)
-    return metadata.media.mimeType;
-  else if (metadata.external.contentMimeType)
-    return metadata.external.contentMimeType;
+  if (metadata.mediaMimeType)
+    return metadata.mediaMimeType;
+  else if (metadata.contentMimeType)
+    return metadata.contentMimeType;
 
   assertNotReached();
 };
 
-/**
- * Returns metadata.
- * @return {!Object} A metadata.
- *
- * TODO(yawano): MetadataEncoder.getMetadata seems not to be used anymore.
- *     Investigate this, and remove if possible. Should not modify a metadata by
- *     using an encoder.
- */
-ImageEncoder.MetadataEncoder.prototype.getMetadata = function() {
-  return this.metadata_;
-};
-
 /**
  * Sets an image data.
  * @param {!HTMLCanvasElement} canvas Canvas or anything with width and height
  *     properties.
- * @param {Date=} opt_modificationDateTime Modification date time of an image.
  */
-ImageEncoder.MetadataEncoder.prototype.setImageData =
-    function(canvas, opt_modificationDateTime) {
-  this.metadata_.width = canvas.width;
-  this.metadata_.height = canvas.height;
+ImageEncoder.MetadataEncoder.prototype.setImageData = function(canvas) {
+  this.imageWidth = canvas.width;
+  this.imageHeight = canvas.height;
 };
 
 /**
@@ -247,9 +243,8 @@ ImageEncoder.MetadataEncoder.prototype.setImageData =
  */
 ImageEncoder.MetadataEncoder.prototype.setThumbnailData =
     function(canvas, quality) {
-  this.metadata_.thumbnailURL =
-      canvas ? canvas.toDataURL(this.metadata_.media.mimeType, quality) : '';
-  delete this.metadata_.thumbnailTransform;
+  this.thumbnailDataUrl =
+      canvas ? canvas.toDataURL(this.mimeType, quality) : '';
 };
 
 /**

ui/file_manager/gallery/js/image_editor/image_encoder_unittest.js

@@ -31,9 +31,7 @@ function testPngImage(callback) {
   var canvas = getSampleCanvas();
 
   var metadata = {
-    media: {
-      mimeType: 'image/png',
-    }
+    mediaMimeType: 'image/png'
   };
 
   reportPromise(encodeAnImageAsDataURL(canvas, metadata, 0.9).then(
@@ -51,9 +49,7 @@ function testJpegImage(callback) {
   var canvas = getSampleCanvas();
 
   var metadata = {
-    media: {
-      mimeType: 'image/jpeg',
-    }
+    mediaMimeType: 'image/jpeg'
   };
 
   reportPromise(encodeAnImageAsDataURL(canvas, metadata, 0.9).then(
@@ -72,9 +68,7 @@ function testWebpImage(callback) {
   var canvas = getSampleCanvas();
 
   var metadata = {
-    media: {
-      mimeType: 'image/webp'
-    }
+    mediaMimeType: 'image/webp'
   };
 
   reportPromise(encodeAnImageAsDataURL(canvas, metadata, 0.9).then(
@@ -90,9 +84,7 @@ function testWithBrokenMetadata() {
   var canvas = getSampleCanvas();
 
   var metadata = {
-    media: {
     // No mimetype field.
-    }
   };
 
   // An exception should be thrown if metadata is broken.