Merge pull request #7480 from ahocevar/load-imagetile

Create a new image when loading tile after an error

src/ol/imagetile.js

@@ -22,6 +22,12 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, op
 
   ol.Tile.call(this, tileCoord, state, opt_options);
 
+  /**
+   * @private
+   * @type {?string}
+   */
+  this.crossOrigin_ = crossOrigin;
+
   /**
    * Image URI
    *
@@ -124,7 +130,14 @@ ol.ImageTile.prototype.handleImageLoad_ = function() {
  * @api
  */
 ol.ImageTile.prototype.load = function() {
-  if (this.state == ol.TileState.IDLE || this.state == ol.TileState.ERROR) {
+  if (this.state == ol.TileState.ERROR) {
+    this.state = ol.TileState.IDLE;
+    this.image_ = new Image();
+    if (this.crossOrigin_ !== null) {
+      this.image_.crossOrigin = this.crossOrigin_;
+    }
+  }
+  if (this.state == ol.TileState.IDLE) {
     this.state = ol.TileState.LOADING;
     this.changed();
     this.imageListenerKeys_ = [

test/spec/ol/imagetile.test.js

@@ -68,11 +68,14 @@ describe('ol.ImageTile', function() {
       var tileLoadFunction = ol.source.Image.defaultImageLoadFunction;
       var tile = new ol.ImageTile(tileCoord, state, src, null, tileLoadFunction);
 
-      ol.events.listen(tile, ol.events.EventType.CHANGE, function(event) {
+      var key = ol.events.listen(tile, ol.events.EventType.CHANGE, function(event) {
         var state = tile.getState();
         if (state == ol.TileState.ERROR) {
           expect(state).to.be(ol.TileState.ERROR);
-          expect(tile.image_.src).to.be(ol.ImageTile.blankImageUrl);
+          expect(tile.image_).to.be.a(HTMLCanvasElement);
+          ol.events.unlistenByKey(key);
+          tile.load();
+          expect(tile.image_).to.be.a(HTMLImageElement);
           done();
         }
       });

test/spec/ol/source/zoomify.test.js

@@ -1,7 +1,6 @@
 
 
 goog.require('ol');
-goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.proj.Projection');
 goog.require('ol.source.Zoomify');
@@ -287,15 +286,13 @@ describe('ol.source.Zoomify', function() {
     });
 
     it('"tile.getImage" returns and caches an unloaded image', function() {
-      // It'll only cache if the same context is passed, see below
-      var context = ol.dom.createCanvasContext2D(256, 256);
       var source = getZoomifySource();
 
       var tile = source.getTile(0, 0, -1, 1, proj);
-      var img = tile.getImage(context);
+      var img = tile.getImage();
 
       var tile2 = source.getTile(0, 0, -1, 1, proj);
-      var img2 = tile2.getImage(context);
+      var img2 = tile2.getImage();
 
       expect(img).to.be.a(HTMLImageElement);
       expect(img).to.be(img2);