use createObjectURL during Plotly.downloadImage

... to workaround Chrome URL length limit (#3771) and
    probably (not tested) have a perf boost.

    N.B. createObjectURL expects Blob object which itself
    expect data string w/o data:image prefix, so use
    imageDataOnly in the Plotly.toImage call

Author: etpinard

src/snapshot/download.js

@@ -15,23 +15,23 @@ var toImage = require('../plot_api/to_image');
 var fileSaver = require('./filesaver');
 var helpers = require('./helpers');
 
-/** Plotly.downloadImage
+/**
+ * Plotly.downloadImage
  *
  * @param {object | string | HTML div} gd
  *   can either be a data/layout/config object
  *   or an existing graph <div>
  *   or an id to an existing graph <div>
- * @param {object} opts (see ../plot_api/to_image)
+ * @param {object} opts (see Plotly.toImage in ../plot_api/to_image)
  * @return {promise}
  */
 function downloadImage(gd, opts) {
     var _gd;
     if(!Lib.isPlainObject(gd)) _gd = Lib.getGraphDiv(gd);
 
-    // check for undefined opts
     opts = opts || {};
-    // default to png
     opts.format = opts.format || 'png';
+    opts.imageDataOnly = true;
 
     return new Promise(function(resolve, reject) {
         if(_gd && _gd._snapshotInProgress) {
@@ -55,7 +55,7 @@ function downloadImage(gd, opts) {
 
         promise.then(function(result) {
             if(_gd) _gd._snapshotInProgress = false;
-            return fileSaver(result, filename);
+            return fileSaver(result, filename, opts.format);
         }).then(function(name) {
             resolve(name);
         }).catch(function(err) {

src/snapshot/filesaver.js

@@ -6,6 +6,10 @@
 * LICENSE file in the root directory of this source tree.
 */
 
+'use strict';
+
+var Lib = require('../lib');
+
 /*
 * substantial portions of this code from FileSaver.js
 * https://github.com/eligrey/FileSaver.js
@@ -18,52 +22,82 @@
 * License: MIT
 *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
 */
-
-'use strict';
-
-var fileSaver = function(url, name) {
+function fileSaver(url, name, format) {
     var saveLink = document.createElement('a');
     var canUseSaveLink = 'download' in saveLink;
+
     var promise = new Promise(function(resolve, reject) {
-        // IE <10 is explicitly unsupported
-        if(typeof navigator !== 'undefined' && /MSIE [1-9]\./.test(navigator.userAgent)) {
+        var blob;
+        var objectUrl;
+
+        if(isIE9orBelow()) {
             reject(new Error('IE < 10 unsupported'));
         }
 
-        // First try a.download, then web filesystem, then object URLs
-            // Safari doesn't allow downloading of blob urls
-            document.location.href = 'data:application/octet-stream' + url.slice(url.search(/[,;]/));
-            resolve(name);
+        // Safari doesn't allow downloading of blob urls
         if(Lib.isSafari()) {
+            document.location.href = 'data:application/octet-stream' + url;
+            return resolve();
         }
 
-        if(!name) {
-            name = 'download';
+        // IE 10+ (native saveAs)
+        if(Lib.isIE()) {
+            // At this point we are only dealing with a decoded SVG as
+            // a data URL (since IE only supports SVG)
+            blob = createBlob(url, format);
+            window.navigator.msSaveBlob(blob, name);
+            blob = null;
+            return resolve(name);
         }
 
         if(canUseSaveLink) {
-            saveLink.href = url;
+            blob = createBlob(url, format);
+            objectUrl = window.URL.createObjectURL(blob);
+
+            saveLink.href = objectUrl;
             saveLink.download = name;
             document.body.appendChild(saveLink);
             saveLink.click();
+
             document.body.removeChild(saveLink);
-            resolve(name);
-        }
+            window.URL.revokeObjectURL(objectUrl);
+            blob = null;
 
-        // IE 10+ (native saveAs)
-        if(typeof navigator !== 'undefined' && navigator.msSaveBlob) {
-            // At this point we are only dealing with a SVG encoded as
-            // a data URL (since IE only supports SVG)
-            var encoded = url.split(/^data:image\/svg\+xml,/)[1];
-            var svg = decodeURIComponent(encoded);
-            navigator.msSaveBlob(new Blob([svg]), name);
-            resolve(name);
+            return resolve(name);
         }
 
         reject(new Error('download error'));
     });
 
     return promise;
-};
+}
+
+function isIE9orBelow() {
+    return (
+        Lib.isIE() &&
+        typeof window.navigator !== 'undefined' &&
+        /MSIE [1-9]\./.test(window.navigator.userAgent)
+    );
+}
+
+// Taken from https://bl.ocks.org/nolanlawson/0eac306e4dac2114c752
+function fixBinary(b) {
+    var len = b.length;
+    var buf = new ArrayBuffer(len);
+    var arr = new Uint8Array(buf);
+    for(var i = 0; i < len; i++) {
+        arr[i] = b.charCodeAt(i);
+    }
+    return buf;
+}
+
+function createBlob(url, format) {
+    if(format === 'svg') {
+        return new window.Blob([url]);
+    } else {
+        var binary = fixBinary(window.atob(url));
+        return new window.Blob([binary], {type: 'image/' + format});
+    }
+}
 
 module.exports = fileSaver;

test/jasmine/tests/download_test.js

@@ -180,12 +180,8 @@ function downloadTest(gd, format) {
         var linkadded = domchanges[domchanges.length - 2].addedNodes[0];
         var linkdeleted = domchanges[domchanges.length - 1].removedNodes[0];
 
-        // check for a <a element and proper file type
-        expect(linkadded.getAttribute('href').split(format)[0]).toEqual('data:image/');
-        // check that filename option handled properly
-        expect(filename).toEqual('plotly_download.' + format);
-
-        // check that link removed
+        expect(linkadded.getAttribute('href').split(':')[0]).toBe('blob');
+        expect(filename).toBe('plotly_download.' + format);
         expect(linkadded).toBe(linkdeleted);
     });
 }