Crop image at image_loader.

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 246 matching lines @@
 ThumbnailLoader.prototype.loadAsDataUrl = function(fillMode) {
   assert(fillMode === ThumbnailLoader.FillMode.FIT ||
       fillMode === ThumbnailLoader.FillMode.OVER_FILL);
 
   return new Promise(function(resolve, reject) {
     // Load by using ImageLoaderClient.
     var modificationTime = this.metadata_ &&
                            this.metadata_.filesystem &&
                            this.metadata_.filesystem.modificationTime &&
                            this.metadata_.filesystem.modificationTime.getTime();
-    var thumbnailUrl =
-        fillMode === ThumbnailLoader.FillMode.OVER_FILL &&
-        this.croppedThumbnailUrl_ ?
-        this.croppedThumbnailUrl_ :
-        this.thumbnailUrl_;
+    var thumbnailUrl = this.thumbnailUrl_;
+    var options = {
+      maxWidth: ThumbnailLoader.THUMBNAIL_MAX_WIDTH,
+      maxHeight: ThumbnailLoader.THUMBNAIL_MAX_HEIGHT,
+      cache: true,
+      priority: this.priority_,
+      timestamp: modificationTime
+    };
+
+    if (fillMode === ThumbnailLoader.FillMode.OVER_FILL) {
+      // Use cropped thumbnail url if available.
+      thumbnailUrl = this.croppedThumbnailUrl_ ?
+          this.croppedThumbnailUrl_ : this.thumbnailUrl_;
+
+      // Set crop option to image loader. Since image of croppedThumbnailUrl_ is
+      // 360x360 with current implemenation, it's no problem to crop it.
+      options['width'] = 360;
+      options['height'] = 360;
+      options['crop'] = true;
+    }
+
     ImageLoaderClient.getInstance().load(
         thumbnailUrl,
         function(result) {
           if (result.status === 'success')
             resolve(result);
           else
             reject(result);
         },
-        {
-          maxWidth: ThumbnailLoader.THUMBNAIL_MAX_WIDTH,
-          maxHeight: ThumbnailLoader.THUMBNAIL_MAX_HEIGHT,
-          cache: true,
-          priority: this.priority_,
-          timestamp: modificationTime
-        });
+        options);
   }.bind(this)).then(function(result) {
     if (!this.transform_)
       return result;
     else
       return this.applyTransformToDataUrl_(
           this.transform_, result.data, result.width, result.height);
   }.bind(this));
 };
 
 /**
@@ skipping 268 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);
 };