support animated GIF

ui/file_manager/gallery/js/image_editor/image_util.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Namespace object for the utilities.
 var ImageUtil = {};
 
 /**
  * Performance trace.
  */
@@ skipping 422 matching lines @@
  */
 ImageUtil.ImageLoader = function(document, metadataModel) {
   this.document_ = document;
 
   /**
    * @private {!MetadataModel}
    * @const
    */
   this.metadataModel_ = metadataModel;
 
-  this.image_ = new Image();
   this.generation_ = 0;
 
   /**
    * @type {number}
    * @private
    */
   this.timeout_ = 0;
 
   /**
    * @type {?function(!HTMLCanvasElement, string=)}
@@ skipping 19 matching lines @@
  * @param {number=} opt_delay Load delay in milliseconds, useful to let the
  *     animations play out before the computation heavy image loading starts.
  */
 ImageUtil.ImageLoader.prototype.load = function(item, callback, opt_delay) {
   var entry = item.getEntry();
 
   this.cancel();
   this.entry_ = entry;
   this.callback_ = callback;
 
-  var targetImage = this.image_;
+  var targetImage = assertInstanceof(this.document_.createElement('img'),
+      HTMLImageElement);
   // The transform fetcher is not cancellable so we need a generation counter.
   var generation = ++this.generation_;
 
   /**
    * @param {!HTMLImageElement} image Image to be transformed.
    * @param {Object=} opt_transform Transformation.
    */
   var onTransform = function(image, opt_transform) {
     if (generation === this.generation_) {
-      this.convertImage_(
-          image, opt_transform || { scaleX: 1, scaleY: 1, rotate90: 0});
+      this.convertImage_(image, opt_transform);
     }
   };
   onTransform = onTransform.bind(this);
 
   /**
    * @param {string=} opt_error Error.
    */
   var onError = function(opt_error) {
     targetImage.onerror = null;
     targetImage.onload = null;
@@ skipping 10 matching lines @@
   var loadImage = function(url) {
     if (generation !== this.generation_)
       return;
 
     ImageUtil.metrics.startInterval(ImageUtil.getMetricName('LoadTime'));
     this.timeout_ = 0;
 
     targetImage.onload = function() {
       targetImage.onerror = null;
       targetImage.onload = null;
+      if (generation !== this.generation_)
+        return;
       this.metadataModel_.get([entry], ['contentImageTransform']).then(
           function(metadataItems) {
+            if (generation !== this.generation_)

[yawano, 2016/01/21 09:11:32]

nit: I don't think we need this second check since onTransform do check in the
beginning of its function.

[ryoh, 2016/01/22 01:15:54]

That's right!

+              return;
             onTransform(targetImage, metadataItems[0].contentImageTransform);
           }.bind(this));
     }.bind(this);
 
     // The error callback has an optional error argument, which in case of a
     // general error should not be specified
     targetImage.onerror = onError.bind(null, 'GALLERY_IMAGE_ERROR');
 
     targetImage.src = url;
   }.bind(this);
 
   // Loads the image. If already loaded, then forces a reload.
   var startLoad = function() {
     if (generation !== this.generation_)
       return;
 
-    // Target current image.
-    targetImage = this.image_;
-
     // Obtain target URL.
     if (FileType.isRaw(entry)) {
       var timestamp =
           item.getMetadataItem() &&
           item.getMetadataItem().modificationTime &&
           item.getMetadataItem().modificationTime.getTime();
       ImageLoaderClient.getInstance().load(entry.toURL(), function(result) {
         if (generation !== this.generation_)
           return;
         if (result.status === 'success')
@@ skipping 47 matching lines @@
  * Stops loading image.
  */
 ImageUtil.ImageLoader.prototype.cancel = function() {
   if (!this.callback_)
     return;
   this.callback_ = null;
   if (this.timeout_) {
     clearTimeout(this.timeout_);
     this.timeout_ = 0;
   }
-  if (this.image_) {
-    this.image_.onload = function() {};
-    this.image_.onerror = function() {};
-    // Force to free internal image by assigning empty image.
-    this.image_.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA' +
-        'AAABAAEAAAICTAEAOw==';
-    this.image_ = document.createElement('img');
-  }
   this.generation_++;  // Silence the transform fetcher if it is in progress.
 };
 
 /**
  * @param {!HTMLImageElement} image Image to be transformed.
  * @param {!Object} transform transformation description to apply to the image.
  * @private
  */
 ImageUtil.ImageLoader.prototype.convertImage_ = function(image, transform) {
+  if (!transform ||
+        (transform.rotate90 === 0 &&
+         transform.scaleX === 1 &&
+         transform.scaleY === 1)) {
+    setTimeout(this.callback_, 0, image);
+    this.callback_ = null;
+    return;
+  }
   var canvas = this.document_.createElement('canvas');
 
   if (transform.rotate90 & 1) {  // Rotated +/-90deg, swap the dimensions.
     canvas.width = image.height;
     canvas.height = image.width;
   } else {
     canvas.width = image.width;
     canvas.height = image.height;
   }
 
@@ skipping 23 matching lines @@
   context.drawImage(
       image, 0, firstRow, image.width, lastRow - firstRow,
       -image.width / 2, firstRow - image.height / 2,
       image.width, lastRow - firstRow);
 
   if (lastRow === image.height) {
     context.restore();
     if (this.entry_.toURL().substr(0, 5) !== 'data:') {  // Ignore data urls.
       ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('LoadTime'));
     }
-    try {
-      setTimeout(this.callback_, 0, context.canvas);
-    } catch (e) {
-      console.error(e);
-    }
+    setTimeout(this.callback_, 0, context.canvas);
     this.callback_ = null;
   } else {
     var self = this;
     this.timeout_ = setTimeout(
         function() {
           self.timeout_ = 0;
           self.copyStrip_(context, image, lastRow, rowCount);
         }, 0);
   }
 };
@@ skipping 37 matching lines @@
 
 /**
  * @param {string} name Local name.
  * @return {string} Full name.
  */
 ImageUtil.getMetricName = function(name) {
   return 'PhotoEditor.' + name;
 };
 
 /**
+ * Ensures argument is canvas. If it's not, creates new canvas and copy.
+ *
+ * @param {!HTMLCanvasElement|!HTMLImageElement} imgOrCanvas image or canvas
+ *    element
+ * @return {!HTMLCanvasElement} canvas.
+ */
+ImageUtil.ensureCanvas = function(imgOrCanvas) {
+  if(imgOrCanvas.tagName === 'canvas') {
+    return assertInstanceof(imgOrCanvas, HTMLCanvasElement);
+  }
+  var canvas = assertInstanceof(document.createElement('canvas'),
+      HTMLCanvasElement);
+  canvas.width = imgOrCanvas.width;
+  canvas.height = imgOrCanvas.height;
+  var context = canvas.getContext('2d');
+  context.drawImage(imgOrCanvas, 0, 0);
+  return canvas;
+};
+
+/**
  * Used for metrics reporting, keep in sync with the histogram description.
  * @type {Array<string>}
  * @const
  */
 ImageUtil.FILE_TYPES = ['jpg', 'png', 'gif', 'bmp', 'webp'];