Support Relative URL for Image src (#5487)

* Use clientWidth and clientHeight of upperCanvas to size hiddenTextarea to work with dynamic sized canvas.

* Fallback to using upperCanvas.width and upperCanvas.height if client dims are not available. Add test.

* Some test cleanup.

* Add srcFromAttribute flag to fabric.Image to support relative url src for image in broswer.

* rollback dist

* Update 'since' and address PR feedback

* Update comment

src/shapes/image.class.js

@@ -45,6 +45,15 @@
      */
     strokeWidth: 0,
 
+    /**
+     * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`.
+     * This allows for relative urls as image src.
+     * @since 2.7.0
+     * @type Boolean
+     * @default
+     */
+    srcFromAttribute: false,
+
     /**
      * private
      * contains last value of scaleX to detect
@@ -93,7 +102,7 @@
 
     /**
      * key used to retrieve the texture representing this image
-     * since 2.0.0
+     * @since 2.0.0
      * @type String
      * @default
      */
@@ -101,7 +110,7 @@
 
     /**
      * Image crop in pixels from original image size.
-     * since 2.0.0
+     * @since 2.0.0
      * @type Number
      * @default
      */
@@ -109,7 +118,7 @@
 
     /**
      * Image crop in pixels from original image size.
-     * since 2.0.0
+     * @since 2.0.0
      * @type Number
      * @default
      */
@@ -349,7 +358,13 @@
         if (element.toDataURL) {
           return element.toDataURL();
         }
-        return element.src;
+
+        if (this.srcFromAttribute) {
+          return element.getAttribute('src');
+        }
+        else {
+          return element.src;
+        }
       }
       else {
         return this.src || '';

test/unit/image.js

@@ -25,6 +25,7 @@
   }
 
   var IMG_SRC     = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
+      IMG_SRC_REL = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : '/fixtures/test_image.gif',
       IMG_WIDTH   = 276,
       IMG_HEIGHT  = 110;
 
@@ -72,10 +73,11 @@
     return fabric.document.createElement('img');
   }
 
-  function _createImageObject(width, height, callback, options) {
+  function _createImageObject(width, height, callback, options, src) {
     options = options || {};
+    src = src || IMG_SRC;
     var elImage = _createImageElement();
-    setSrc(elImage, IMG_SRC, function() {
+    setSrc(elImage, src, function() {
       options.width = width;
       options.height = height;
       callback(new fabric.Image(elImage, options));
@@ -90,6 +92,10 @@
     return _createImageObject(IMG_WIDTH / 2, IMG_HEIGHT / 2, callback, options);
   }
 
+  function createImageObjectWithSrc(callback, options, src) {
+    return _createImageObject(IMG_WIDTH, IMG_HEIGHT, callback, options, src);
+  }
+
   function setSrc(img, src, callback) {
     img.onload = function() {
       callback && callback();
@@ -294,6 +300,19 @@
     });
   });
 
+  QUnit.test('getSrc with srcFromAttribute', function(assert) {
+    var done = assert.async();
+    createImageObjectWithSrc(function(image) {
+      assert.equal(image.getSrc(), IMG_SRC_REL);
+      done();
+    },
+    {
+      srcFromAttribute: true
+    },
+    IMG_SRC_REL
+    );
+  });
+
   QUnit.test('getElement', function(assert) {
     var elImage = _createImageElement();
     var image = new fabric.Image(elImage);