reusing images in ol.style.Icon#clone

src/ol/style/icon.js

@@ -176,24 +176,11 @@ ol.inherits(ol.style.Icon, ol.style.Image);
 
 
 /**
- * Clones the style.
+ * Clones the style. The underlying Image/HTMLCanvasElement is not cloned.
  * @return {ol.style.Icon} The cloned style.
  * @api
  */
 ol.style.Icon.prototype.clone = function() {
-  var oldImage = this.getImage(1);
-  var newImage;
-  if (this.iconImage_.getImageState() === ol.ImageState.LOADED) {
-    if (oldImage.tagName.toUpperCase() === 'IMG') {
-      newImage = /** @type {Image} */ (oldImage.cloneNode(true));
-    } else {
-      newImage = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
-      var context = newImage.getContext('2d');
-      newImage.width = oldImage.width;
-      newImage.height = oldImage.height;
-      context.drawImage(oldImage, 0, 0);
-    }
-  }
   return new ol.style.Icon({
     anchor: this.anchor_.slice(),
     anchorOrigin: this.anchorOrigin_,
@@ -201,9 +188,7 @@ ol.style.Icon.prototype.clone = function() {
     anchorYUnits: this.anchorYUnits_,
     crossOrigin: this.crossOrigin_,
     color: (this.color_ && this.color_.slice) ? this.color_.slice() : this.color_ || undefined,
-    img: newImage ? newImage : undefined,
+    src: this.getSrc(),
-    imgSize: newImage ? this.iconImage_.getSize().slice() : undefined,
-    src: newImage ? undefined : this.getSrc(),
     offset: this.offset_.slice(),
     offsetOrigin: this.offsetOrigin_,
     size: this.size_ !== null ? this.size_.slice() : undefined,

test/spec/ol/style/icon.test.js

@@ -70,18 +70,18 @@ describe('ol.style.Icon', function() {
       });
 
       var clone = original.clone();
+      expect(original.getImage(1)).to.be(clone.getImage(1));
+      expect(original.iconImage_).to.be(clone.iconImage_);
       expect(original.getAnchor()).to.eql(clone.getAnchor());
       expect(original.anchorOrigin_).to.eql(clone.anchorOrigin_);
       expect(original.anchorXUnits_).to.eql(clone.anchorXUnits_);
       expect(original.anchorYUnits_).to.eql(clone.anchorYUnits_);
       expect(original.crossOrigin_).to.eql(clone.crossOrigin_);
       expect(original.getColor()).to.eql(clone.getColor());
-      expect(original.getImage(1).src).to.eql(clone.getImage(1).src);
-      expect(original.getImage(1).toDataURL()).to.eql(original.getImage(1).toDataURL());
       expect(original.offset_).to.eql(clone.offset_);
       expect(original.offsetOrigin_).to.eql(clone.offsetOrigin_);
       expect(original.getSize()).to.eql(clone.getSize());
-      expect(original.getSrc()).not.to.eql(clone.getSrc());
+      expect(original.getSrc()).to.eql(clone.getSrc());
       expect(original.getOpacity()).to.eql(clone.getOpacity());
       expect(original.getRotation()).to.eql(clone.getRotation());
       expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
@@ -91,33 +91,30 @@ describe('ol.style.Icon', function() {
         src: src
       });
       var clone2 = original2.clone();
-      expect(original2.getSrc()).to.be(clone2.getSrc());
+      expect(original2.getImage(1)).to.be(clone2.getImage(1));
+      expect(original2.iconImage_).to.be(clone2.iconImage_);
+      expect(original2.getSrc()).to.eql(clone2.getSrc());
     });
 
     it('the clone does not reference the same objects as the original', function() {
-      var canvas = document.createElement('canvas');
       var original = new ol.style.Icon({
         anchor: [1, 0],
         color: [1, 2, 3, 0.4],
-        img: canvas,
+        src: src,
-        imgSize: size,
         offset: [1, 2],
         size: [10, 12]
       });
       var clone = original.clone();
       expect(original.getAnchor()).not.to.be(clone.getAnchor());
-      expect(original.getImage(1)).not.to.be(clone.getImage(1));
       expect(original.offset_).not.to.be(clone.offset_);
       expect(original.getColor()).not.to.be(clone.getColor());
       expect(original.getSize()).not.to.be(clone.getSize());
 
       clone.anchor_[0] = 0;
-      clone.getImage(1).width = 50;
       clone.offset_[0] = 0;
       clone.color_[0] = 0;
       clone.size_[0] = 5;
       expect(original.anchor_).not.to.eql(clone.anchor_);
-      expect(original.getImage(1).width).not.to.eql(clone.getImage(1).width);
       expect(original.offset_).not.to.eql(clone.offset_);
       expect(original.color_).not.to.eql(clone.color_);
       expect(original.size_).not.to.eql(clone.size_);