reuse getImageSize function and test download image size

Author: archmoj

src/traces/image/calc.js

@@ -13,9 +13,7 @@ var constants = require('./constants');
 var isNumeric = require('fast-isnumeric');
 var Axes = require('../../plots/cartesian/axes');
 var maxRowLength = require('../../lib').maxRowLength;
-var sizeOf = require('image-size');
-var dataUri = require('../../snapshot/helpers').IMAGE_URL_PREFIX;
-var Buffer = require('buffer/').Buffer;  // note: the trailing slash is important!
+var getImageSize = require('./helpers').getImageSize;
 
 module.exports = function calc(gd, trace) {
     var h;
@@ -96,10 +94,3 @@ function makeScaler(trace) {
         return c;
     };
 }
-
-// Get image size
-function getImageSize(src) {
-    var data = src.replace(dataUri, '');
-    var buff = new Buffer(data, 'base64');
-    return sizeOf(buff);
-}

src/traces/image/helpers.js

@@ -0,0 +1,19 @@
+/**
+* Copyright 2012-2020, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var sizeOf = require('image-size');
+var dataUri = require('../../snapshot/helpers').IMAGE_URL_PREFIX;
+var Buffer = require('buffer/').Buffer;  // note: the trailing slash is important!
+
+exports.getImageSize = function(src) {
+    var data = src.replace(dataUri, '');
+    var buff = new Buffer(data, 'base64');
+    return sizeOf(buff);
+};

test/jasmine/tests/download_test.js

@@ -2,6 +2,7 @@ var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 
 var helpers = require('@src/snapshot/helpers');
+var getImageSize = require('@src/traces/image/helpers').getImageSize;
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -164,6 +165,33 @@ describe('Plotly.downloadImage', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should default width & height for downloadImage to match with the live graph', function(done) {
+        spyOn(Lib, 'isSafari').and.callFake(function() { return true; });
+        spyOn(helpers, 'octetStream');
+
+        var fig = {
+            data: [{y: [0, 1]}]
+        };
+
+        gd.style.width = '500px';
+        gd.style.height = '300px';
+
+        Plotly.plot(gd, fig)
+        .then(function() { return Plotly.downloadImage(gd, {format: 'png'}); })
+        .then(function() {
+            var args = helpers.octetStream.calls.allArgs();
+            var blob = args[0][0];
+            expect(blob.slice(0, 8)).toBe(';base64,', 'format:png');
+            var size = getImageSize('data:image/png' + blob);
+            expect(size.width).toBe(gd._fullLayout.width, 'fullLayout width');
+            expect(size.height).toBe(gd._fullLayout.height, 'fullLayout height');
+            expect(size.width).toBe(500, 'div width');
+            expect(size.height).toBe(300, 'div height');
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 function downloadTest(gd, format) {