support animated GIF

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

Index: ui/file_manager/gallery/js/image_editor/image_util.js
diff --git a/ui/file_manager/gallery/js/image_editor/image_util.js b/ui/file_manager/gallery/js/image_editor/image_util.js
index 4d93c7a6a9d44d976f5def126f017db10e6c96a9..261d61d2d49ec10217394af1e69624300f82d415 100644
--- a/ui/file_manager/gallery/js/image_editor/image_util.js
+++ b/ui/file_manager/gallery/js/image_editor/image_util.js
@@ -440,7 +440,6 @@ ImageUtil.ImageLoader = function(document, metadataModel) {
    */
   this.metadataModel_ = metadataModel;
 
-  this.image_ = new Image();
   this.generation_ = 0;
 
   /**
@@ -480,7 +479,8 @@ ImageUtil.ImageLoader.prototype.load = function(item, callback, opt_delay) {
   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_;
 
@@ -490,8 +490,7 @@ ImageUtil.ImageLoader.prototype.load = function(item, callback, opt_delay) {
    */
   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);
@@ -540,9 +539,6 @@ ImageUtil.ImageLoader.prototype.load = function(item, callback, opt_delay) {
     if (generation !== this.generation_)
       return;
 
-    // Target current image.
-    targetImage = this.image_;
-
     // Obtain target URL.
     if (FileType.isRaw(entry)) {
       var timestamp =
@@ -610,14 +606,6 @@ ImageUtil.ImageLoader.prototype.cancel = function() {
     clearTimeout(this.timeout_);
     this.timeout_ = 0;
   }
-  if (this.image_) {
-    this.image_.onload = function() {};

[yawano, 2016/01/21 05:14:38]

Sorry, I didn't pointed this out in the last review. If we remove this.image_,
the rest process of image loading (metadata fetch, transform) will continue even
if it's cancelled.

Also is it okay to remove the hack in line 617?

[ryoh, 2016/01/21 07:28:53]

I think it's controlled by "this.generation_" to cancel these process.
Yeah, it's ok to remove this hack. We do not reuse img elements any more.

[yawano, 2016/01/21 08:08:14]

Yes, this.generation_ works. I've missed the last line of this method.

This hack seems to be added for a long time ago, and if you don't see any
problem, it will be okay to remove this hack for now. Thanks.

-    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.
 };
 
@@ -627,6 +615,14 @@ ImageUtil.ImageLoader.prototype.cancel = function() {
  * @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.
@@ -670,11 +666,7 @@ ImageUtil.ImageLoader.prototype.copyStrip_ = function(
     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;
@@ -732,6 +724,26 @@ ImageUtil.getMetricName = function(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