Merge pull request #4415 from ahocevar/fix-imagesize

Scale StaticImage image to imageExtent

src/ol/image.js

@@ -35,7 +35,7 @@ ol.Image = function(extent, resolution, pixelRatio, attributions, src,
 
   /**
    * @private
-   * @type {Image}
+   * @type {HTMLCanvasElement|Image|HTMLVideoElement}
    */
   this.image_ = new Image();
   if (crossOrigin) {
@@ -44,7 +44,7 @@ ol.Image = function(extent, resolution, pixelRatio, attributions, src,
 
   /**
    * @private
-   * @type {Object.<number, Image>}
+   * @type {Object.<number, (HTMLCanvasElement|Image|HTMLVideoElement)>}
    */
   this.imageByContext_ = {};
 
@@ -142,6 +142,14 @@ ol.Image.prototype.load = function() {
 };
 
 
+/**
+ * @param {HTMLCanvasElement|Image|HTMLVideoElement} image Image.
+ */
+ol.Image.prototype.setImage = function(image) {
+  this.image_ = image;
+};
+
+
 /**
  * Discards event handlers which listen for load completion or errors.
  *

src/ol/source/imagestaticsource.js

@@ -4,6 +4,7 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.Image');
 goog.require('ol.ImageLoadFunctionType');
+goog.require('ol.ImageState');
 goog.require('ol.extent');
 goog.require('ol.proj');
 goog.require('ol.source.Image');
@@ -26,12 +27,6 @@ ol.source.ImageStatic = function(options) {
 
   var imageExtent = options.imageExtent;
 
-  var resolution, resolutions;
-  if (options.imageSize !== undefined) {
-    resolution = ol.extent.getHeight(imageExtent) / options.imageSize[1];
-    resolutions = [resolution];
-  }
-
   var crossOrigin = options.crossOrigin !== undefined ?
       options.crossOrigin : null;
 
@@ -42,16 +37,34 @@ ol.source.ImageStatic = function(options) {
   goog.base(this, {
     attributions: attributions,
     logo: options.logo,
-    projection: ol.proj.get(options.projection),
-    resolutions: resolutions
+    projection: ol.proj.get(options.projection)
   });
 
   /**
    * @private
    * @type {ol.Image}
    */
-  this.image_ = new ol.Image(imageExtent, resolution, 1, attributions,
+  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);
+
   goog.events.listen(this.image_, goog.events.EventType.CHANGE,
       this.handleImageChange, false, this);