Apply image transformation for thumbnails loaded by loadDetachedImage.

ui/file_manager/file_manager/foreground/js/thumbnail_loader.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.
 
 /**
  * Loads a thumbnail using provided url. In CANVAS mode, loaded images
  * are attached as <canvas> element, while in IMAGE mode as <img>.
  * <canvas> renders faster than <img>, however has bigger memory overhead.
  *
  * @param {Entry} entry File entry.
@@ skipping 306 matching lines @@
   }.bind(this)).then(function(result) {
     if (!this.transform_)
       return result;
     else
       return this.applyTransformToDataUrl_(
           this.transform_, result.data, result.width, result.height);
   }.bind(this));
 };
 
 /**
+ * Renders an Image to canvas applying an image transformation.
+ * @param {Image} image Original image. Can be an unattached one to an elment.
+ * @param {number} width width of the original image

[oka, 2017/01/16 12:30:54]

nit: Width of the ...? (instead of width).

+ * @param {number} height height of the original image

[oka, 2017/01/16 12:30:54]

nit: Height of the ...? (instead of height).

+ * @param {{scaleX:number, scaleY:number, rotate90: number}} transform
+ *     Transform.
+ * @param {!Object} canvas
+ */
+ThumbnailLoader.prototype.renderImageToCanvasWithTransform_ = function(
+    image, width, height, transform, canvas) {
+  var scaleX = transform.scaleX;
+  var scaleY = transform.scaleY;
+  var rotate90 = transform.rotate90;
+
+  assert(scaleX === 1 || scaleX === -1);
+  assert(scaleY === 1 || scaleY === -1);
+  assert(rotate90 === 0 || rotate90 === 1);
+
+  var context = canvas.getContext('2d');
+
+  canvas.width = rotate90 === 1 ? height : width;
+  canvas.height = rotate90 === 1 ? width : height;
+
+  // Scale transformation should be applied before rotate transformation.
+  // i.e. When matrices for scale and rotate are A and B, transformation matrix
+  // should be BA.
+
+  // Rotate 90 degree at center.
+  if (rotate90 === 1) {
+    context.translate(height, 0);
+    context.rotate(Math.PI / 2);
+  }
+
+  // Flip X and Y.
+  context.translate(scaleX === -1 ? width : 0, scaleY === -1 ? height : 0);
+  context.scale(scaleX, scaleY);
+  context.drawImage(image, 0, 0);
+};
+
+/**
  * Applies transform to data url.
  *
  * @param {{scaleX:number, scaleY:number, rotate90: number}} transform
  *     Transform.
  * @param {string} dataUrl Data url.
  * @param {number} width Width.
  * @param {number} height Height.
  * @return {!Promise<{data:string, width:number, height:number}>} A promise
  *     which is resolved with dataUrl and its width and height.
  * @private
  */
 ThumbnailLoader.prototype.applyTransformToDataUrl_ = function(
     transform, dataUrl, width, height) {
   var image = new Image();
-  var scaleX = this.transform_.scaleX;
-  var scaleY = this.transform_.scaleY;
-  var rotate90 = this.transform_.rotate90;
-
-  assert(scaleX === 1 || scaleX === -1);
-  assert(scaleY === 1 || scaleY === -1);
-  assert(rotate90 === 0 || rotate90 === 1);
 
   return new Promise(function(resolve, reject) {
     // Decode image for transformation.
     image.onload = resolve;
     image.onerror = reject;
     image.src = dataUrl;
   }).then(function() {
-    // Apply transform. Scale transformation should be applied before rotate
-    // transformation. i.e. When matrices for scale and rotate are A and B,
-    // transformation matrix should be BA.
     var canvas = document.createElement('canvas');
-    var context = canvas.getContext('2d');
-
-    canvas.width = rotate90 === 1 ? height : width;
-    canvas.height = rotate90 === 1 ? width : height;
-
-    // Rotate 90 degree at center.
-    if (rotate90 === 1) {
-      context.translate(height, 0);
-      context.rotate(Math.PI / 2);
-    }
-
-    // Flip X and Y.
-    context.translate(scaleX === -1 ? width : 0, scaleY === -1 ? height : 0);
-    context.scale(scaleX, scaleY);
-
-    context.drawImage(image, 0, 0);
-
+    this.renderImageToCanvasWithTransform_(
+        image, width, height, this.transform_, canvas);
     return {
       data: canvas.toDataURL('image/png'),
       width: canvas.width,
       height: canvas.height
     };
   }.bind(this));
 }
 
 /**
  * Cancels loading the current image.
@@ skipping 80 matching lines @@
  * @private
  */
 ThumbnailLoader.prototype.renderMedia_ = function() {
   if (this.loaderType_ !== ThumbnailLoader.LoaderType.CANVAS)
     return;
 
   if (!this.canvas_)
     this.canvas_ = document.createElement('canvas');
 
   // Copy the image to a canvas if the canvas is outdated.
+  // At this point, image transformation is not applied because we attach style
+  // attribute to an img element in attachImage() instead.
   if (!this.canvasUpToDate_) {
     this.canvas_.width = this.image_.width;
     this.canvas_.height = this.image_.height;
     var context = this.canvas_.getContext('2d');
     context.drawImage(this.image_, 0, 0);
     this.canvasUpToDate_ = true;
   }
 };
 
 /**
@@ skipping 28 matching lines @@
     box.textContent = '';
     box.appendChild(attachableMedia);
   }
 
   if (!this.taskId_)
     attachableMedia.classList.add('cached');
 };
 
 /**
  * Gets the loaded image.
- * TODO(mtomasz): Apply transformations.
  *
  * @return {Image|HTMLCanvasElement} Either image or a canvas object.
  */
 ThumbnailLoader.prototype.getImage = function() {
   this.renderMedia_();
-  return this.loaderType_ === ThumbnailLoader.LoaderType.CANVAS ? this.canvas_ :
-      this.image_;
+  if (this.loaderType_ === ThumbnailLoader.LoaderType.IMAGE)
+    // TODO(yamaguchi): Fix image orientation in case of detached image loaded
+    // in IMAGE mode. Either apply transformation here or return
+    // this.transform_ as well.
+    return this.image_;
+  if (this.transform_) {
+    this.renderImageToCanvasWithTransform_(
+        this.image_, this.image_.width, this.image_.height,
+        this.transform_, this.canvas_);
+  }
+  return this.canvas_;
 };
 
 /**
  * Update the image style to fit/fill the container.
  *
  * Using webkit center packing does not align the image properly, so we need
  * to wait until the image loads and its dimensions are known, then manually
  * position it at the center.
  *
  * @param {Element} box Containing element.
@@ skipping 70 matching lines @@
 
   function percent(fraction) {
     return (fraction * 100).toFixed(2) + '%';
   }
 
   img.style.width = percent(fractionX);
   img.style.height = percent(fractionY);
   img.style.left = percent((1 - fractionX) / 2);
   img.style.top = percent((1 - fractionY) / 2);
 };