diff --git a/src/ol/style/IconImage.js b/src/ol/style/IconImage.js index b8b7041b1d..0fd4e3eddb 100644 --- a/src/ol/style/IconImage.js +++ b/src/ol/style/IconImage.js @@ -37,11 +37,13 @@ class IconImage extends EventTarget { * @private * @type {HTMLImageElement|HTMLCanvasElement} */ - this.image_ = !image ? new Image() : image; + this.image_ = image; - if (crossOrigin !== null) { - /** @type {HTMLImageElement} */ (this.image_).crossOrigin = crossOrigin; - } + /** + * @private + * @type {string|null} + */ + this.crossOrigin_ = crossOrigin; /** * @private @@ -85,6 +87,16 @@ class IconImage extends EventTarget { this.tainted_; } + /** + * @private + */ + initializeImage_() { + this.image_ = new Image(); + if (this.crossOrigin_ !== null) { + this.image_.crossOrigin = this.crossOrigin_; + } + } + /** * @private * @return {boolean} The image canvas is tainted. @@ -142,6 +154,9 @@ class IconImage extends EventTarget { * @return {HTMLImageElement|HTMLCanvasElement} Image or Canvas element. */ getImage(pixelRatio) { + if (!this.image_) { + this.initializeImage_(); + } this.replaceColor_(pixelRatio); return this.canvas_[pixelRatio] ? this.canvas_[pixelRatio] : this.image_; } @@ -166,6 +181,9 @@ class IconImage extends EventTarget { * @return {HTMLImageElement|HTMLCanvasElement} Image element. */ getHitDetectionImage() { + if (!this.image_) { + this.initializeImage_(); + } if (!this.hitDetectionImage_) { if (this.isTainted_()) { const width = this.size_[0]; @@ -199,19 +217,24 @@ class IconImage extends EventTarget { * Load not yet loaded URI. */ load() { - if (this.imageState_ == ImageState.IDLE) { - this.imageState_ = ImageState.LOADING; - try { - /** @type {HTMLImageElement} */ (this.image_).src = this.src_; - } catch (e) { - this.handleImageError_(); - } - this.unlisten_ = listenImage( - this.image_, - this.handleImageLoad_.bind(this), - this.handleImageError_.bind(this) - ); + if (this.imageState_ !== ImageState.IDLE) { + return; } + if (!this.image_) { + this.initializeImage_(); + } + + this.imageState_ = ImageState.LOADING; + try { + /** @type {HTMLImageElement} */ (this.image_).src = this.src_; + } catch (e) { + this.handleImageError_(); + } + this.unlisten_ = listenImage( + this.image_, + this.handleImageLoad_.bind(this), + this.handleImageError_.bind(this) + ); } /**