Introduce Image loader extension.

chrome/browser/resources/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
+ */
+var ImageLoader = function() {
+  /**
+   * Hash array of active requests.
+   * @type {Object}
+   * @private
+   */
+  this.requests_ = {};
+
+  chrome.fileBrowserPrivate.requestLocalFileSystem(function(filesystem) {
+    // TODO(mtomasz): Handle.
+  });
+
+  chrome.extension.onConnectExternal.addListener(function(port) {
+    if (ImageLoader.ALLOWED_CLIENTS.indexOf(port.sender.id) !== -1)
+      port.onMessage.addListener(function(request) {
+        this.onMessage_(port, request, port.postMessage.bind(port));
+      }.bind(this));
+  }.bind(this));
+};
+
+/**
+ * List of extensions allowed to perform image requests.
+ *
+ * @const
+ * @type {Array.<string>}
+ */
+ImageLoader.ALLOWED_CLIENTS =
+    ['hhaomjibdihmijegdhdafkllkbggdgoj'];  // File Manager's extension id.
+
+/**
+ * Handles a request. Depending on type of the request, starts or stops
+ * an image task.
+ *
+ * @param {Port} port Connection port.
+ * @param {Object} request Request message as a hash array.
+ * @param {function} callback Callback to be called to return response.
+ * @private
+ */
+ImageLoader.prototype.onMessage_ = function(port, request, callback) {
+  var requestId = port.sender.id + ':' + request.taskId;
+  if (request.cancel) {
+    // Cancel a task.
+    if (requestId in this.requests_) {
+      this.requests_[requestId].cancel();
+      delete this.requests_[requestId];
+    }
+  } else {
+    // Start a task.
+    this.requests_[requestId] =
+        new ImageLoader.Request(request, callback);
+  }
+};
+
+/**
+ * Returns the singleton instance.
+ * @return {ImageLoader} ImageLoader object.
+ */
+ImageLoader.getInstance = function() {
+  if (!ImageLoader.instance_)
+    ImageLoader.instance_ = new ImageLoader();
+  return ImageLoader.instance_;
+};
+
+/**
+ * Calculates dimensions taking into account resize options, such as:
+ * - scale: for scaling,
+ * - maxWidth, maxHeight: for maximum dimensions,
+ * - width, height: for exact requested size.
+ * Returns the target size as hash array with width, height properties.
+ *
+ * @param {number} width Source width.
+ * @param {number} height Source height.
+ * @param {Object} options Resizing options as a hash array.
+ * @return {Object} Dimensions, eg. { width: 100, height: 50 }.
+ */
+ImageLoader.resizeDimensions = function(width, height, options) {
+  var sourceWidth = width;
+  var sourceHeight = height;
+
+  var targetWidth = sourceWidth;
+  var targetHeight = sourceHeight;
+
+  if ('scale' in options) {
+    targetWidth = sourceWidth * options.scale;
+    targetHeight = sourceHeight * options.scale;
+  }
+
+  if (options.maxWidth &&
+      targetWidth > options.maxWidth) {
+      var scale = options.maxWidth / targetWidth;
+      targetWidth *= scale;
+      targetHeight *= scale;
+  }
+
+  if (options.maxHeight &&
+      targetHeight > options.maxHeight) {
+      var scale = options.maxHeight / targetHeight;
+      targetWidth *= scale;
+      targetHeight *= scale;
+  }
+
+  if (options.width)
+    targetWidth = options.width;
+
+  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.
+ *
+ * @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(
+      source.width, source.height, options);
+
+  target.width = targetDimensions.width;
+  target.height = targetDimensions.height;
+
+  var targetContext = target.getContext('2d');
+  targetContext.drawImage(source,
+                          0, 0, source.width, source.height,
+                          0, 0, target.width, target.height);
+};
+
+/**
+ * Creates and starts downloading and then resizing of the image. Finally,
+ * returns the image using the callback.
+ *
+ * @param {Object} request Request message as a hash array.
+ * @param {function} callback Callback used to send the response.
+ * @constructor
+ */
+ImageLoader.Request = function(request, callback) {
+  /**
+   * @type {Object}
+   * @private
+   */
+  this.request_ = request;
+
+  /**
+   * @type {function}
+   * @private
+   */
+  this.sendResponse_ = callback;
+
+  /**
+   * Temporary image used to download images.
+   * @type {Image}
+   * @private
+   */
+  this.image_ = new Image();
+
+  /**
+   * Used to download remote images using http:// or https:// protocols.
+   * @type {XMLHttpRequest}
+   * @private
+   */
+  this.xhr_ = new XMLHttpRequest();
+
+  /**
+   * Temporary canvas used to resize and compress the image.
+   * @type {HTMLCanvasElement}
+   * @private
+   */
+  this.canvas_ = document.createElement('canvas');
+
+  /**
+   * @type {CanvasRenderingContext2D}
+   * @private
+   */
+  this.context_ = this.canvas_.getContext('2d');
+
+  this.downloadOriginal_();
+};
+
+/**
+ * Downloads an image directly or for remote resources using the XmlHttpRequest.
+ * @private
+ */
+ImageLoader.Request.prototype.downloadOriginal_ = function() {
+  this.image_.onload = this.onImageLoad_.bind(this);
+  this.image_.onerror = this.onImageError_.bind(this);
+
+  if (window.harness || !this.request_.url.match(/^https?:/)) {
+    // Download directly.
+    this.image_.src = this.request_.url;
+    return;
+  }
+
+  // Download using an xhr request.
+  this.xhr_.responseType = 'blob';
+
+  this.xhr_.onerror = this.image_.onerror;
+  this.xhr_.onload = function() {
+    if (this.xhr_.status != 200) {
+      this.image_.onerror();
+      return;
+    }
+
+    // Process returnes data.
+    var reader = new FileReader();
+    reader.onerror = this.image_.onerror;
+    reader.onload = function(e) {
+      this.image_.src = e.target.result;
+    }.bind(this);
+
+    // Load the data to the image as a data url.
+    reader.readAsDataURL(this.xhr_.response);
+  }.bind(this);
+
+  // Perform a xhr request.
+  try {
+    this.xhr_.open('GET', this.request_.url, true);
+    this.xhr_.send();
+  } catch (e) {
+    this.image_.onerror();
+  }
+};
+
+/**
+ * Sends the resized image via the callback.
+ * @private
+ */
+ImageLoader.Request.prototype.sendImage_ = function() {
+  // TODO(mtomasz): Keep format. Never compress using jpeg codec for lossless
+  // images such as png, gif.
+  var pngData = this.canvas_.toDataURL('image/png');
+  var jpegData = this.canvas_.toDataURL('image/jpeg', 0.9);
+  var imageData = pngData.length < jpegData.length * 2 ? pngData : jpegData;
+  this.sendResponse_({ status: 'success',
+                       data: imageData,
+                       taskId: this.request_.taskId });
+};
+
+/**
+ * Handler, when contents are loaded into the image element. Performs resizing
+ * and finalizes the request process.
+ *
+ * @private
+ */
+ImageLoader.Request.prototype.onImageLoad_ = function() {
+  ImageLoader.resize(this.image_, this.canvas_, this.request_);
+  this.sendImage_();
+  this.cleanup_();
+};
+
+/**
+ * Handler, when loading of the image fails. Sends a failure response and
+ * finalizes the request process.
+ *
+ * @private
+ */
+ImageLoader.Request.prototype.onImageError_ = function() {
+  this.sendResponse_({ status: 'error',
+                       taskId: this.request_.taskId });
+  this.cleanup_();
+};
+
+/**
+ * Cancels the request.
+ */
+ImageLoader.Request.prototype.cancel = function() {
+  this.cleanup_();
+};
+
+/**
+ * Cleans up memory used by this request.
+ * @private
+ */
+ImageLoader.Request.prototype.cleanup_ = function() {
+  this.image_.onerror = function() {};
+  this.image_.onload = function() {};
+
+  // Transparent 1x1 pixel gif, to force garbage collecting.
+  this.image_.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAA' +
+      'ABAAEAAAICTAEAOw==';
+
+  this.xhr_.onerror = function() {};
+  this.xhr_.onload = function() {};
+  this.xhr_.abort();
+
+  // Dispose memory allocated by Canvas.
+  this.canvas_.width = 0;
+  this.canvas_.height = 0;
+};
+
+// Load the extension.
+ImageLoader.getInstance();