More reliable image loading in Photo Editor

chrome/browser/resources/file_manager/js/image_editor/image_util.js

 // Copyright (c) 2011 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.
 
 
 // Namespace object for the utilities.
 function ImageUtil() {}
 
 // Performance trace.
 ImageUtil.trace = (function() {
@@ skipping 312 matching lines @@
 /*
  * ImageLoader loads an image from a given URL into a canvas in two steps:
  * 1. Loads the image into an HTMLImageElement.
  * 2. Copies pixels from HTMLImageElement to HTMLCanvasElement. This is done
  *    stripe-by-stripe to avoid freezing up the UI. The transform is taken into
  *    account.
  */
 
 ImageUtil.ImageLoader = function(document) {
   this.document_ = document;
-  this.image_ = new Image();
+  this.image_ = null;
 };
 
 /**
  * @param {string} url
  * @param {{scaleX: number, scaleY: number, rotate90: number}} transform
  * @param {function(HTMLCanvasElement} callback
  * @param {number} opt_delay Load delay in milliseconds, useful to let the
  *        animations play out before the computation heavy image loading starts.
  */
 ImageUtil.ImageLoader.prototype.load = function(
     url, transform, callback, opt_delay) {
   this.cancel();
 
   this.url_ = url;
   this.transform_ = transform || { scaleX: 1, scaleY: 1, rotate90: 0};
   this.callback_ = callback;
 
   var self = this;
   function startLoad() {
     self.timeout_ = null;
-    self.image_.onload = self.convertImage_.bind(self);
+    // The clients of this class sometimes request the same url repeatedly.
+    // The onload fires only if the src is different from the previous value.
+    // To work around that we create a new Image every time.
+    self.image_ = new Image();
+    self.image_.onload = function(e) {
+      self.image_ = null;
+      self.convertImage_(e.target);
+    };
     self.image_.src = url;
   }
   if (opt_delay) {
     this.timeout_ = setTimeout(startLoad, opt_delay);
   } else {
     startLoad();
   }
 };
 
 ImageUtil.ImageLoader.prototype.isBusy = function() {
   return !!this.callback_;
 };
 
 ImageUtil.ImageLoader.prototype.isLoading = function(url) {
   return this.isBusy() && (this.url_ == url);
 };
 
 ImageUtil.ImageLoader.prototype.setCallback = function(callback) {
   this.callback_ = callback;
 };
 
 ImageUtil.ImageLoader.prototype.cancel = function() {
   if (!this.callback_) return;
   this.callback_ = null;
   if (this.timeout_) {
     clearTimeout(this.timeout_);
     this.timeout_ = null;
   }
-  this.image_.onload = function(){};
+  if (this.image_) {
+    this.image_.onload = function(){};
+    this.image_ = null;
+  }
 };
 
-ImageUtil.ImageLoader.prototype.convertImage_ = function() {
+ImageUtil.ImageLoader.prototype.convertImage_ = function(image) {
   var canvas = this.document_.createElement('canvas');
 
   if (this.transform_.rotate90 & 1) {  // Rotated +/-90deg, swap the dimensions.
-    canvas.width = this.image_.height;
-    canvas.height = this.image_.width;
+    canvas.width = image.height;
+    canvas.height = image.width;
   } else  {
-    canvas.width = this.image_.width;
-    canvas.height = this.image_.height;
+    canvas.width = image.width;
+    canvas.height = image.height;
   }
 
   ImageUtil.trace.resetTimer('load-convert');
 
   var context = canvas.getContext('2d');
   context.save();
   context.translate(canvas.width / 2, canvas.height / 2);
   context.rotate(this.transform_.rotate90 * Math.PI/2);
   context.scale(this.transform_.scaleX, this.transform_.scaleY);
 
-  var stripCount =
-      Math.ceil (this.image_.width * this.image_.height / ( 1 << 21));
-  var step =
-      Math.max(16, Math.ceil(this.image_.height / stripCount)) & 0xFFFFF0;
+  var stripCount = Math.ceil(image.width * image.height / ( 1 << 21));
+  var step = Math.max(16, Math.ceil(image.height / stripCount)) & 0xFFFFF0;
 
-  this.copyStrip_(context, 0, step);
+  this.copyStrip_(context, image, 0, step);
 };
 
 ImageUtil.ImageLoader.prototype.copyStrip_ = function(
-    context, firstRow, rowCount) {
-  var lastRow = Math.min (firstRow + rowCount, this.image_.height);
+    context, image, firstRow, rowCount) {
+  var lastRow = Math.min (firstRow + rowCount, image.height);
 
   context.drawImage(
-      this.image_, 0, firstRow, this.image_.width, lastRow - firstRow,
-      -this.image_.width / 2, firstRow - this.image_.height / 2,
-      this.image_.width, lastRow - firstRow);
+      image, 0, firstRow, image.width, lastRow - firstRow,
+      -image.width / 2, firstRow - image.height / 2,
+      image.width, lastRow - firstRow);
 
-  if (lastRow == this.image_.height) {
+  if (lastRow == image.height) {
     context.restore();
     ImageUtil.trace.reportTimer('load-convert');
     var callback = this.callback_;
     this.callback_ = null;
     callback(context.canvas);
   } else {
     var self = this;
     this.timeout_ = setTimeout(
         function() {
           self.timeout_ = null;
-          self.copyStrip_(context, lastRow, rowCount);
+          self.copyStrip_(context, image, lastRow, rowCount);
         }, 0);
   }
 };
 
 ImageUtil.removeChildren = function(element) {
   element.textContent = '';
 };
 
 ImageUtil.getFullNameFromUrl = function(url) {
   if (url.indexOf('/') != -1)
@@ skipping 14 matching lines @@
   return ImageUtil.getFileNameFromFullName(ImageUtil.getFullNameFromUrl(url));
 };
 
 ImageUtil.replaceFileNameInFullName = function(fullName, name) {
   var index = fullName.lastIndexOf('.');
   if (index != -1)
     return name + fullName.substr(index);
   else
     return name;
 };