diff --git a/externs/olx.js b/externs/olx.js index 9406898b7a..a2795691e1 100644 --- a/externs/olx.js +++ b/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} diff --git a/src/ol/source/imagestaticsource.js b/src/ol/source/imagestaticsource.js index cd95f93799..fc6e75d9ab 100644 --- a/src/ol/source/imagestaticsource.js +++ b/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 = /** @type {number} */ (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); +}; diff --git a/test/spec/ol/source/imagestaticsource.test.js b/test/spec/ol/source/imagestaticsource.test.js index a180ba4ece..6278f7b435 100644 --- a/test/spec/ol/source/imagestaticsource.test.js +++ b/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: [254, 254], + projection: projection + }); + + source.on('imageloadend', function(event) { + expect(image.getImage().width).to.be(127); + expect(image.getImage().height).to.be(254); + 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',