Crop image at image_loader.

ui/file_manager/image_loader/image_loader.js

 // Copyright 2013 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 and resizes an image.
  * @constructor
  */
 function ImageLoader() {
   /**
@@ skipping 186 matching lines @@
   if (options.height)
     targetHeight = options.height;
 
   targetWidth = Math.round(targetWidth);
   targetHeight = Math.round(targetHeight);
 
   return {width: targetWidth, height: targetHeight};
 };
 
 /**
- * Performs resizing of the source image into the target canvas.
+ * Performs resizing and cropping of the source image into the target canvas.
  *
  * @param {HTMLCanvasElement|Image} source Source image or canvas.
  * @param {HTMLCanvasElement} target Target canvas.
  * @param {Object} options Resizing options as a hash array.
  */
-ImageLoader.resize = function(source, target, options) {
-  var targetDimensions = ImageLoader.resizeDimensions(
+ImageLoader.resizeAndCrop = function(source, target, options) {
+  // Default orientation is 0deg.
+  var orientation =
+      ImageOrientation.fromDriveOrientation(options.orientation || 0);
+
+  // Calculates copy parameters.
+  var copyParameters = ImageLoader.calculateCopyParameters(source, options);
+  target.width = copyParameters.canvas.width;
+  target.height = copyParameters.canvas.height;
+
+  // Apply.
+  var targetContext =
+      /** @type {CanvasRenderingContext2D} */ (target.getContext('2d'));
+  targetContext.save();
+  orientation.cancelImageOrientation(
+      targetContext, copyParameters.target.width, copyParameters.target.height);
+  targetContext.drawImage(
+      source,
+      copyParameters.source.x,
+      copyParameters.source.y,
+      copyParameters.source.width,
+      copyParameters.source.height,
+      copyParameters.target.x,
+      copyParameters.target.y,
+      copyParameters.target.width,
+      copyParameters.target.height);
+  targetContext.restore();
+};
+
+/**
+ * @typedef {{
+ *   source: {x:number, y:number, width:number, height:number},
+ *   target: {x:number, y:number, width:number, height:number},
+ *   canvas: {width:number, height:number}
+ * }}
+ */
+ImageLoader.CopyParameters;
+
+/**
+ * Calculates copy parameters.
+ *
+ * @param {HTMLCanvasElement|Image} source Source image or canvas.
+ * @param {Object} options Resizing options as a hash array.
+ * @return {!ImageLoader.CopyParameters} Calculated copy parameters.
+ */
+ImageLoader.calculateCopyParameters = function(source, options) {
+  if (options.crop) {
+    // When an image is cropped, target should be a fixed size square.
+    assert(options.width);
+    assert(options.height);
+    assert(options.width === options.height);
+
+    // The length of shorter edge becomes dimension of cropped area in the
+    // source.
+    var cropSourceDimension =
+        source.width < source.height ? source.width : source.height;

[hirono, 2015/05/13 09:02:24]

nit: You can use Math.min.

[yawano, 2015/05/13 09:11:10]

Done.

+
+    return {
+      source: {
+        x: Math.floor((source.width / 2) - (cropSourceDimension / 2)),
+        y: Math.floor((source.height / 2) - (cropSourceDimension / 2)),
+        width: cropSourceDimension,
+        height: cropSourceDimension
+      },
+      target: {
+        x: 0,
+        y: 0,
+        width: options.width,
+        height: options.height
+      },
+      canvas: {
+        width: options.width,
+        height: options.height
+      }
+    };
+  }
+
+  // Target dimension is calculated in the rotated(transformed) coordinate.
+  var targetCanvasDimensions = ImageLoader.resizeDimensions(
       source.width, source.height, options);
 
-  // Default orientation is 0deg.
-  var orientation = options.orientation || new ImageOrientation(1, 0, 0, 1);
-  var size = orientation.getSizeAfterCancelling(
-      targetDimensions.width, targetDimensions.height);
-  target.width = size.width;
-  target.height = size.height;
+  var targetDimensions = targetCanvasDimensions;
+  if (options.orientation && options.orientation % 2) {
+    console.log(JSON.stringify(targetCanvasDimensions));

[hirono, 2015/05/13 09:02:24]

Remove the debug log.

[yawano, 2015/05/13 09:11:10]

Done. Thank you!

+    targetDimensions = {
+      width: targetCanvasDimensions.height,
+      height: targetCanvasDimensions.width
+    };
+  }
 
-  var targetContext = target.getContext('2d');
-  targetContext.save();
-  orientation.cancelImageOrientation(
-      targetContext, targetDimensions.width, targetDimensions.height);
-  targetContext.drawImage(
-      source,
-      0, 0, source.width, source.height,
-      0, 0, targetDimensions.width, targetDimensions.height);
-  targetContext.restore();
+  return {
+    source: {
+      x: 0,
+      y: 0,
+      width: source.width,
+      height: source.height
+    },
+    target: {
+      x: 0,
+      y: 0,
+      width: targetDimensions.width,
+      height: targetDimensions.height
+    },
+    canvas: {
+      width: targetCanvasDimensions.width,
+      height: targetCanvasDimensions.height
+    }
+  };
 };
 
 /**
  * Matrix converts AdobeRGB color space into sRGB color space.
  * @const {!Array<number>}
  */
 ImageLoader.MATRIX_FROM_ADOBE_TO_STANDARD = [
   1.39836, -0.39836, 0.00000,
   0.00000,  1.00000, 0.00000,
   0.00000, -0.04293, 1.04293
@@ skipping 34 matching lines @@
       sB = sB <= 0.0031308 ? 12.92 * sB : 1.055 * Math.pow(sB, 1 / 2.4) - 0.055;
 
       // Scale to [0, 255].
       data[i] = Math.max(0, Math.min(255, sR * 255));
       data[i + 1] = Math.max(0, Math.min(255, sG * 255));
       data[i + 2] = Math.max(0, Math.min(255, sB * 255));
     }
     context.putImageData(imageData, 0, 0);
   }
 };