diff --git a/src/snapshot/download.js b/src/snapshot/download.js index 82e2c589c07..50c9a7488eb 100644 --- a/src/snapshot/download.js +++ b/src/snapshot/download.js @@ -31,6 +31,8 @@ function downloadImage(gd, opts) { opts = opts || {}; opts.format = opts.format || 'png'; + opts.width = opts.width || null; + opts.height = opts.height || null; opts.imageDataOnly = true; return new Promise(function(resolve, reject) { diff --git a/src/traces/image/calc.js b/src/traces/image/calc.js index cfdf3e4b75e..9fa27fbb8b5 100644 --- a/src/traces/image/calc.js +++ b/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); -} diff --git a/src/traces/image/helpers.js b/src/traces/image/helpers.js new file mode 100644 index 00000000000..1fd442c364b --- /dev/null +++ b/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); +}; diff --git a/test/jasmine/tests/download_test.js b/test/jasmine/tests/download_test.js index 6b7473419df..2c483c9e5f0 100644 --- a/test/jasmine/tests/download_test.js +++ b/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) {