Improve ol.source.StaticImage

Brings back the imgSize property, and puts all image load handler
code in a single listener.

Author: ahocevar

externs/olx.js

@@ -4936,6 +4936,7 @@ olx.source.StamenOptions.prototype.url;
  *     crossOrigin: (null|string|undefined),
  *     imageExtent: (ol.Extent),
  *     imageLoadFunction: (ol.ImageLoadFunctionType|undefined),
+ *     imageSize: (ol.Size|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
  *     projection: ol.proj.ProjectionLike,
  *     url: string}}
@@ -4997,6 +4998,15 @@ olx.source.ImageStaticOptions.prototype.logo;
 olx.source.ImageStaticOptions.prototype.projection;
 
 
+/**
+ * Size of the image in pixels. Usually the image size is auto-detected, so this
+ * only needs to be set if auto-detection fails for some reason.
+ * @type {ol.Size|undefined}
+ * @api stable
+ */
+olx.source.ImageStaticOptions.prototype.imageSize;
+
+
 /**
  * Image URL.
  * @type {string}

src/ol/source/imagestaticsource.js

@@ -47,23 +47,11 @@ ol.source.ImageStatic = function(options) {
   this.image_ = new ol.Image(imageExtent, undefined, 1, attributions,
       options.url, crossOrigin, imageLoadFunction);
 
-  goog.events.listen(this.image_, goog.events.EventType.CHANGE, function() {
-    if (this.image_.getState() == ol.ImageState.LOADED) {
-      var image = this.image_.getImage();
-      var resolution = ol.extent.getHeight(imageExtent) / image.height;
-      var pxWidth = Math.ceil(ol.extent.getWidth(imageExtent) / resolution);
-      var pxHeight = Math.ceil(ol.extent.getHeight(imageExtent) / resolution);
-      if (pxWidth !== image.width || pxHeight !== image.height) {
-        var canvas = /** @type {HTMLCanvasElement} */
-            (document.createElement('canvas'));
-        canvas.width = pxWidth;
-        canvas.height = pxHeight;
-        var context = canvas.getContext('2d');
-        context.drawImage(image, 0, 0, canvas.width, canvas.height);
-        this.image_.setImage(canvas);
-      }
-    }
-  }, false, this);
+  /**
+   * @private
+   * @type {ol.Size}
+   */
+  this.imageSize_ = options.imageSize ? options.imageSize : null;
 
   goog.events.listen(this.image_, goog.events.EventType.CHANGE,
       this.handleImageChange, false, this);
@@ -82,3 +70,35 @@ ol.source.ImageStatic.prototype.getImageInternal =
   }
   return null;
 };
+
+
+/**
+ * @inheritDoc
+ */
+ol.source.ImageStatic.prototype.handleImageChange = function(evt) {
+  if (this.image_.getState() == ol.ImageState.LOADED) {
+    var imageExtent = this.image_.getExtent();
+    var image = this.image_.getImage();
+    var imageWidth, imageHeight;
+    if (this.imageSize_) {
+      imageWidth = this.imageSize_[0];
+      imageHeight = this.imageSize_[1];
+    } else {
+      imageWidth = image.width;
+      imageHeight = image.height;
+    }
+    var resolution = ol.extent.getHeight(imageExtent) / imageHeight;
+    var targetWidth = Math.ceil(ol.extent.getWidth(imageExtent) / resolution);
+    if (targetWidth !== imageWidth) {
+      var canvas = /** @type {HTMLCanvasElement} */
+          (document.createElement('canvas'));
+      canvas.width = targetWidth;
+      canvas.height = imageHeight;
+      var context = canvas.getContext('2d');
+      context.drawImage(image, 0, 0, imageWidth, imageHeight,
+          0, 0, canvas.width, canvas.height);
+      this.image_.setImage(canvas);
+    }
+  }
+  goog.base(this, 'handleImageChange', evt);
+};

test/spec/ol/source/imagestaticsource.test.js

@@ -33,6 +33,26 @@ describe('ol.source.ImageStatic', function() {
       image.load();
     });
 
+    it('respects imageSize', function(done) {
+      var source = new ol.source.ImageStatic({
+        url: 'spec/ol/source/images/12-655-1583.png',
+        imageExtent: [
+          -13629027.891360067, 4539747.983913189,
+          -13619243.951739565, 4559315.863154193],
+        imageSize: [256, 512],
+        projection: projection
+      });
+
+      source.on('imageloadend', function(event) {
+        expect(image.getImage().width).to.be(256);
+        expect(image.getImage().height).to.be(256);
+        done();
+      });
+
+      var image = source.getImage(extent, resolution, pixelRatio, projection);
+      image.load();
+    });
+
     it('triggers image load events', function(done) {
       var source = new ol.source.ImageStatic({
         url: 'spec/ol/source/images/12-655-1583.png',