support animated GIF

ui/file_manager/gallery/js/image_editor/commands.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.
 
 /**
  * Command queue is the only way to modify images.
  * Supports undo/redo.
  * Command execution is asynchronous (callback-based).
  *
  * @param {!Document} document Document to create canvases in.
- * @param {!HTMLCanvasElement} canvas The canvas with the original image.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} image The canvas with the
+ *    original image.
  * @param {function(function())} saveFunction Function to save the image.
  * @constructor
  * @struct
  */
-function CommandQueue(document, canvas, saveFunction) {
+function CommandQueue(document, image, saveFunction) {
   this.document_ = document;
   this.undo_ = [];
   this.redo_ = [];
   this.subscribers_ = [];
-  this.currentImage_ = canvas;
+  /**
+   * @type {HTMLCanvasElement|HTMLImageElement}
+   * @private
+   */
 

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

nit: remove blank line from line 26. And insert a blank line above line 22.

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

Done.

-  // Current image may be null or not-null but with width = height = 0.
-  // Copying an image with zero dimensions causes js errors.
-  if (this.currentImage_) {
-    this.baselineImage_ = document.createElement('canvas');
-    this.baselineImage_.width = this.currentImage_.width;
-    this.baselineImage_.height = this.currentImage_.height;
-    if (this.currentImage_.width > 0 && this.currentImage_.height > 0) {
-      var context = this.baselineImage_.getContext('2d');
-      context.drawImage(this.currentImage_, 0, 0);
-    }
-  } else {
-    this.baselineImage_ = null;
-  }
+  this.currentImage_ = image;
 
-  this.previousImage_ = document.createElement('canvas');
-  this.previousImageAvailable_ = false;
+  /**
+   * @type {HTMLCanvasElement|HTMLImageElement}
+   * @private
+   */
+  this.baselineImage_ = image;
+
+  /**
+   * @type {HTMLCanvasElement|HTMLImageElement}
+   * @private
+   */
+   this.previousImage_ = null;
 
   this.saveFunction_ = saveFunction;
   this.busy_ = false;
   this.UIContext_ = {};
 }
 
 /**
  * Attach the UI elements to the command queue.
  * Once the UI is attached the results of image manipulations are displayed.
  *
@@ skipping 83 matching lines @@
  *
  * @param {!Command} command The command to execute.
  * @param {!Object} uiContext The UI context.
  * @param {function(number=)} callback Completion callback.
  * @private
  */
 CommandQueue.prototype.doExecute_ = function(command, uiContext, callback) {
   if (!this.currentImage_)
     throw new Error('Cannot operate on null image');
 
-  // Remember one previous image so that the first undo is as fast as possible.
-  this.previousImage_.width = this.currentImage_.width;
-  this.previousImage_.height = this.currentImage_.height;
-  this.previousImageAvailable_ = true;
-  var context = this.previousImage_.getContext('2d');
-  context.drawImage(this.currentImage_, 0, 0);
-
   command.execute(
       this.document_,
       this.currentImage_,
       /**
        * @type {function(HTMLCanvasElement, number=)}
        */
       (function(result, opt_delay) {
+        this.previousImage_ = this.currentImage_;
         this.currentImage_ = result;
         callback(opt_delay);
       }.bind(this)),
       uiContext);
 };
 
 /**
  * Executes the command.
  *
  * @param {!Command} command Command to execute.
@@ skipping 31 matching lines @@
   this.redo_.push(command);
 
   var self = this;
 
   function complete() {
     var delay = command.revertView(
         self.currentImage_, self.UIContext_.imageView);
     self.commit_(false /* Do not show undo action */, delay);
   }
 
-  if (this.previousImageAvailable_) {
+  if (this.previousImage_) {
     // First undo after an execute call.
-    this.currentImage_.width = this.previousImage_.width;
-    this.currentImage_.height = this.previousImage_.height;
-    var context = this.currentImage_.getContext('2d');
-    context.drawImage(this.previousImage_, 0, 0);
-
-    // Free memory.
-    this.previousImage_.width = 0;
-    this.previousImage_.height = 0;
-    this.previousImageAvailable_ = false;
+    this.currentImage_ = this.previousImage_;
+    this.previousImage_ = null;
 
     complete();
     // TODO(kaznacheev) Consider recalculating previousImage_ right here
     // by replaying the commands in the background.
   } else {
-    this.currentImage_.width = this.baselineImage_.width;
-    this.currentImage_.height = this.baselineImage_.height;
-    var context = this.currentImage_.getContext('2d');
-    context.drawImage(this.baselineImage_, 0, 0);
+    this.currentImage_ = this.baselineImage_;
 
     var replay = function(index) {
       if (index < self.undo_.length)
         self.doExecute_(self.undo_[index], {}, replay.bind(null, index + 1));
       else {
         complete();
       }
     };
 
     replay(0);
@@ skipping 16 matching lines @@
 
   this.execute(this.redo_.pop(), true);
 };
 
 /**
  * Closes internal buffers. Call to ensure, that internal buffers are freed
  * as soon as possible.
  */
 CommandQueue.prototype.close = function() {
   // Free memory used by the undo buffer.
-  this.previousImage_.width = 0;
-  this.previousImage_.height = 0;
-  this.previousImageAvailable_ = false;
-
-  if (this.baselineImage_) {
-    this.baselineImage_.width = 0;
-    this.baselineImage_.height = 0;
-  }
+  this.currentImage_ = null;
+  this.previousImage_ = null;
+  this.baselineImage_ = null;
 };
 
 /**
  * Command object encapsulates an operation on an image and a way to visualize
  * its result.
  *
  * @param {string} name Command name.
  * @constructor
  * @struct
  */
 function Command(name) {
   this.name_ = name;
 }
 
 /**
  * @return {string} String representation of the command.
  */
 Command.prototype.toString = function() {
   return 'Command ' + this.name_;
 };
 
 /**
  * Execute the command and visualize its results.
  *
  * The two actions are combined into one method because sometimes it is nice
  * to be able to show partial results for slower operations.
  *
  * @param {!Document} document Document on which to execute command.
- * @param {!HTMLCanvasElement} srcCanvas Canvas to execute on.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} srcImage Image to execute on.
+ *    Do NOT modify this object.
  * @param {function(HTMLCanvasElement, number=)} callback Callback to call on
  *   completion.
  * @param {!Object} uiContext Context to work in.
  */
-Command.prototype.execute = function(document, srcCanvas, callback, uiContext) {
+Command.prototype.execute = function(document, srcImage, callback, uiContext) {
   console.error('Command.prototype.execute not implemented');
 };
 
 /**
  * Visualize reversion of the operation.
  *
- * @param {!HTMLCanvasElement} canvas Image data to use.
+ * @param {!HTMLCanvasElement|!HTMLCanvasElement} image previous image.
  * @param {!ImageView} imageView ImageView to revert.
  * @return {number} Animation duration in ms.
  */
-Command.prototype.revertView = function(canvas, imageView) {
-  imageView.replace(canvas);
+Command.prototype.revertView = function(image, imageView) {
+  imageView.replace(image);
   return 0;
 };
 
 /**
  * Creates canvas to render on.
  *
  * @param {!Document} document Document to create canvas in.
- * @param {!HTMLCanvasElement} srcCanvas to copy optional dimensions from.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} srcImage to copy optional
+ *    dimensions from.
  * @param {number=} opt_width new canvas width.
  * @param {number=} opt_height new canvas height.
  * @return {!HTMLCanvasElement} Newly created canvas.
  * @private
  */
 Command.prototype.createCanvas_ = function(
-    document, srcCanvas, opt_width, opt_height) {
+    document, srcImage, opt_width, opt_height) {
   var result = assertInstanceof(document.createElement('canvas'),
       HTMLCanvasElement);
-  result.width = opt_width || srcCanvas.width;
-  result.height = opt_height || srcCanvas.height;
+  result.width = opt_width || srcImage.width;
+  result.height = opt_height || srcImage.height;
   return result;
 };
 
 
 /**
  * Rotate command
  * @param {number} rotate90 Rotation angle in 90 degree increments (signed).
  * @constructor
  * @extends {Command}
  * @struct
  */
 Command.Rotate = function(rotate90) {
   Command.call(this, 'rotate(' + rotate90 * 90 + 'deg)');
   this.rotate90_ = rotate90;
 };
 
 Command.Rotate.prototype = { __proto__: Command.prototype };
 
 /** @override */
 Command.Rotate.prototype.execute = function(
-    document, srcCanvas, callback, uiContext) {
+    document, srcImage, callback, uiContext) {
   var result = this.createCanvas_(
       document,
-      srcCanvas,
-      (this.rotate90_ & 1) ? srcCanvas.height : srcCanvas.width,
-      (this.rotate90_ & 1) ? srcCanvas.width : srcCanvas.height);
+      srcImage,
+      (this.rotate90_ & 1) ? srcImage.height : srcImage.width,
+      (this.rotate90_ & 1) ? srcImage.width : srcImage.height);
   ImageUtil.drawImageTransformed(
-      result, srcCanvas, 1, 1, this.rotate90_ * Math.PI / 2);
+      result, srcImage, 1, 1, this.rotate90_ * Math.PI / 2);
   var delay;
   if (uiContext.imageView) {
     delay = uiContext.imageView.replaceAndAnimate(result, null, this.rotate90_);
   }
   setTimeout(callback, 0, result, delay);
 };
 
 /** @override */
-Command.Rotate.prototype.revertView = function(canvas, imageView) {
-  return imageView.replaceAndAnimate(canvas, null, -this.rotate90_);
+Command.Rotate.prototype.revertView = function(image, imageView) {
+  return imageView.replaceAndAnimate(image, null, -this.rotate90_);
 };
 
 
 /**
  * Crop command.
  *
  * @param {!ImageRect} imageRect Crop rectangle in image coordinates.
  * @constructor
  * @extends {Command}
  * @struct
@@ skipping 13 matching lines @@
   var ctx = assertInstanceof(result.getContext('2d'), CanvasRenderingContext2D);
   ImageRect.drawImage(ctx, srcCanvas, null, this.imageRect_);
   var delay;
   if (uiContext.imageView) {
     delay = uiContext.imageView.replaceAndAnimate(result, this.imageRect_, 0);
   }
   setTimeout(callback, 0, result, delay);
 };
 
 /** @override */
-Command.Crop.prototype.revertView = function(canvas, imageView) {
-  return imageView.animateAndReplace(canvas, this.imageRect_);
+Command.Crop.prototype.revertView = function(image, imageView) {
+  return imageView.animateAndReplace(image, this.imageRect_);
 };
 
 
 /**
  * Filter command.
  *
  * @param {string} name Command name.
  * @param {function(!ImageData,!ImageData,number,number)} filter Filter
  *     function.
  * @param {?string} message Message to display when done.
  * @constructor
  * @extends {Command}
  * @struct
  */
 Command.Filter = function(name, filter, message) {
   Command.call(this, name);
   this.filter_ = filter;
   this.message_ = message;
 };
 
 Command.Filter.prototype = { __proto__: Command.prototype };
 
 /** @override */
 Command.Filter.prototype.execute = function(
-    document, srcCanvas, callback, uiContext) {
-  var result = this.createCanvas_(document, srcCanvas);
+    document, srcImage, callback, uiContext) {
+  var result = this.createCanvas_(document, srcImage);
   var self = this;
   var previousRow = 0;
 
   function onProgressVisible(updatedRow, rowCount) {
     if (updatedRow == rowCount) {
       uiContext.imageView.replace(result);
       if (self.message_)
         uiContext.prompt.show(self.message_, 2000);
       callback(result);
     } else {
@@ skipping 13 matching lines @@
       previousRow = updatedRow;
     }
   }
 
   function onProgressInvisible(updatedRow, rowCount) {
     if (updatedRow == rowCount) {
       callback(result);
     }
   }
 
-  filter.applyByStrips(result, srcCanvas, this.filter_,
+  filter.applyByStrips(result, srcImage, this.filter_,
       uiContext.imageView ? onProgressVisible : onProgressInvisible);
 };