add new promise-based toImage and downloadImage to Plotly #446

timelyportfolio · 2016-04-19T18:08:27Z

ref original pull timelyportfolio#1 for very long discussion and commits

Addresses

Summary of Changes

attach promise-based toImage directly to Plotly
attach promise-based downloadImage directly to Plotly
preserve existing unofficial Plotly.Snapshot for backward compatibility with exception of adding promise option in svgToImg

Example Usage

Plotly.toImage

var img = document.createElement('img');
document.body.appendChild(img);

Plotly.plot()
    .then(Plotly.toImage)
    .then(function(url){
        img.src = url;
    });

// all the options
Plotly.plot()
    .then(function(gd){
        return Plotly.toImage({
            format: 'png', //also can use 'jpeg', 'webp', 'svg'
            height: 500,
            width: 700
        });
    })
    .then(function(url){
        img.src = url;
    });

Plotly.downloadImage

Plotly.plot()
    .then(Plotly.downloadImage)
    .then(function(filename){
        console.log(filename);
    });

// all the options
Plotly.plot()
    .then(function(gd){
        return Plotly.downloadImage({
            filename: 'myspecialplot',
            format: 'png', //also can use 'jpeg', 'webp', 'svg'
            height: 500,
            width: 700
        });
    })
    .then(function(filename){
        console.log(filename);
    });

mdtusz · 2016-04-19T18:51:29Z

src/plot_api/to_image.js

+        opts.format = opts.format || 'png';
+
+        if(
+            (opts.width && isNumeric(opts.width) && opts.width < 1) ||


🐄 Let's set these as values above so the if is a bit more clean.

Or define a quick helper function to call on opts.____.

and isNumeric(undefined || null) returns false.

So, opts.width && isNumeric(opts.width) is equivalent to isNumeric(opts.width).

but the opts.width and opts.height might be undefined or null, and those are valid options. In the case of null || undefined we use layout height and width.

Ah. I see. 👍 My mistake

etpinard · 2016-04-19T19:24:25Z

src/plot_api/to_image.js

+* LICENSE file in the root directory of this source tree.
+*/
+
+/*eslint dot-notation: [2, {"allowPattern": "^catch$"}]*/


Let's remove the {"allowKeywords": false} option in the eslintrc file and remove this line.

ok, this was just copy/paste.

etpinard · 2016-04-19T19:46:09Z

@timelyportfolio looking good. This will make a lot folks happy.

You'll need one good linting commit. You can run npm run lint to check for linting mistakes locally.

Let me know if you need any clarifications about #446 (comment)

timelyportfolio · 2016-04-20T17:51:32Z

@etpinard, how should I handle these eslint errors?

.catch is a syntax error  dot-notation

etpinard · 2016-04-20T18:15:50Z

@timelyportfolio

how should I handle these eslint errors

We should remove the {"allowKeywords": false} option in the eslintrc file. That it,

"dot-notation": [2, {"allowKeywords": false}]

should become

"dot-notation": [2]

After some research, this only breaks things in ECMAScript version 3. So, let's not worry about it.

etpinard · 2016-04-27T21:50:04Z

src/components/modebar/buttons.js

@@ -55,17 +55,15 @@ modeBarButtons.toImage = {
            return;
        }

-        if(gd._snapshotInProgress) {
-            Lib.notifier('Snapshotting is still in progress - please hold', 'long');


@timelyportfolio why did you review this?

Nevermind. I see. It's here now: https://github.com/plotly/plotly.js/pull/446/files#diff-40d98cbce238527d9bffcf2ecd4efa9bR33

mdtusz · 2016-04-27T22:01:46Z

Seems to work just peachy on Safari. 👍

timelyportfolio · 2016-04-28T01:54:12Z

@etpinard, @mdtusz - rebased and squashed into one commit

timelyportfolio · 2016-04-28T01:55:45Z

src/snapshot/filesaver.js

+ * By Eli Grey, http://eligrey.com
+ * License: MIT
+ *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
+ */


@etpinard, is this ok for attribution?

Yes. Nicely done. You'll need to add this block:

/** * Copyright 2012-2016, 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. */

at the top of the file to make npm run test-syntax happy.

etpinard · 2016-04-28T16:11:41Z

@timelyportfolio @mdtusz I tested out toImage and downloadImage in IE11, looks like toImage is broken in IE11.

First, I discovered a bug in tosvg.js fixed in #489 .

After fixing that bug, svgtoimg.js break before getting to img.onload:

Maybe IE11 doesn't like encodeURIComponent ??

timelyportfolio · 2016-04-28T16:16:12Z

@etpinard, and the fun continues :). I have had this error before in an unrelated project, but I cannot find any notes. So, before IE was not supported at all, but it seems we should take the opportunity to get this working in all the browsers. Maybe I write a function for both encodeURIComponent and createObjectURL and pick based on browser. Does that sound like a reasonable approach? I intentionally included the FileSaver bit for IE >10, so that we might be able to get it working.

mdtusz · 2016-04-28T16:18:41Z

It's possible we just need to specify the encoding for it to work in IE 11 as shown here.

etpinard · 2016-04-28T16:24:41Z

Maybe I write a function for both encodeURIComponent and createObjectURL and pick based on browser. Does that sound like a reasonable approach?

Yes. That sounds good. We have a lib function Lib.IE setup. Feel free to use it.

timelyportfolio · 2016-04-28T16:25:03Z

@mdtusz bringing back good memories, but that just goes back to base64 which is what we were doing with createObjectURL, or am I missing something.

timelyportfolio · 2016-05-16T18:53:20Z

@etpinard, @mdtusz Ok, I think this is ready. Let me know if you want me to rebase and squash. Thanks.

etpinard · 2016-05-16T19:28:33Z

@timelyportfolio well deserved 🍻

timelyportfolio · 2016-05-16T19:36:25Z

@etpinard and @mdtusz, thanks so much for your patience and help. This was far more difficult than I could have imagined.

yniknafs · 2016-06-30T04:25:57Z

@etpinard @timelyportfolio

Hi. Thanks for all your help on here. I've tried using the latest release to save an SVG. I call the downloadImage function, using the "svg" format option.

However, the SVG that is dowloaded can be viewed by chrome, but not illustrator or adobe acrobat. Any thoughts?

I looks like you worked on addressing this directly, but I'm still struggling with it. Really want to be able to download my plotly plots as some form of SVG graphic.

mdtusz · 2016-06-30T13:36:07Z

@yniknafs could you share the data and layout from your example if possible, or better yet, the downloaded svg file for me to inspect? Support with Illustrator is mostly there for most plots, but there are still some edge cases of things that Illustrator's svg parser/renderer doesn't like, and unfortunately, there are very sparse error messages and documentation on what exactly their requirements are - it certainly doesn't adhere to the svg spec.

yniknafs · 2016-06-30T14:07:54Z

@mdtusz Thanks so much for the reply. We have a number of plots (bar, box, pie) on the site we are developing, and the svg --> illustrator wasn't working with any of the plots.

I have attached the plot. The data is coming from a seql db, can't really paste here, but you can see it in the attached plot.

SVG was downloaded using the modebar (changed modebar code to have "format: 'svg';" in /modebar/buttons.js).

Here is the code to call the plot.

var expression_layout = {
    title: 'TPM vs. Transcripts',
    xaxis: {
        title: 'Transcripts',
        showgrid: false,
        zeroline: false
    },
    yaxis: {
        title: 'TPM',
        showline: false
    },
    boxmode: 'group'
};

function redraw_expression_plot(json_response) {
    var data = [];
    for (var key in json_response) {
        var trace = {
            y: json_response[key][1],
            x: json_response[key][0],
            type: 'box',
            name: key
        }
        data.push(trace);
    }
    expression_layout.yaxis.title = "TPM";
    Plotly.newPlot('expression_plot', data, expression_layout);
    highlight_linear();
    highlight_box();
}

newplot.svg.zip

mdtusz · 2016-06-30T16:00:20Z

@yniknafs using Adobe Illustrator CC, I'm able to open the svg and it looks ok to me. I don't have Acrobat installed however so I can't verify that either.

The main issue we encountered from before was with respect to opacities and quotation marks, but looking through the SVG neither of those issues seem to be present. What sort of warnings does Illustrator spit out at you when you attempt to open it?

yniknafs · 2016-06-30T16:38:54Z

@mdtusz thanks for that. quite interesting. I just download Adobe Illustrator CC and it worked.

I have Adobe CS6 installed. And it did not work (see images). Any chance you know why its not working with the CS version? Will be a little limiting to force users to have CC (I'm sure lots of people using our tool will have some illustrator CS5/6 installed).

rreusser · 2016-06-30T17:10:05Z

@yniknafs @mdtusz FWIW, a quick sanity-check with the W3C validator shows the file is 100% valid. A workaround: I was able to open it in Illustrator CS5 by first running it through Inkscape to convert to PDF. For mac/linux (and probably windows too), Inkscape can be invoked from the command line:

$ inkscape /Users/rreusser/Desktop/newplot.svg --export-pdf=/Users/rreusser/Desktop/newplot.pdf

which is nice, though plenty weird that you must pass it a full path to the file. It's not a great solution, but if it's the blocker, it's something.

a59 · 2016-09-22T22:22:12Z

Please could someone give an example of how to use this with the Python Notebook API.

etpinard · 2016-09-22T22:24:58Z

@a59 see here

a59 · 2016-09-22T22:43:37Z

Thanks for the pointer. That's very useful.

However, it doesn't seem to be working quite as advertised. I am on OS X and have tried both Safari and Firefox. I do get a picture which is downloaded to my 'Downloads' folder after the Dialog, but it is given the name 'Unknown' and no extension. I even tried setting the option filename='plot' in the call.

a59 · 2016-09-22T22:46:26Z

My apologies, it works in Firefox.

ETA. Spoke too soon. The .svg is mangled from Firefox.

etpinard · 2016-09-22T22:46:34Z

@a59 http://community.plot.ly/ is the best place to look for help.

amirmog · 2016-10-11T18:53:00Z

Hello folks,
I'm still encountering that after I download the image, not all data is exported into the .png file, in a nutshell, I'm drawing bar charts and some of the bars are missing.

Essentially it's the same issue as was originally raised here:

#50
and
#42

I'm not sure if this pull request is supposed to fix this or not, or it's already included in the Plotly CDN?

Any help would be appreciated.

Thanks,

etpinard · 2016-10-11T20:53:08Z

@amirmog are you referring to issue #50 ? Ticket #446 is this PR which added a top-level API for to-image exports.

Sharing a reproducible example would help us help you. Thanks.

amirmog · 2016-10-11T21:06:39Z

@etpinard I apologize yes, it was the #50 and #42

I'm using the plotly CDN ( https://cdn.plot.ly/plotly-latest.js )
and when I download the image produced by the default download to image button ("Download plot as a png") in the chart toolbar (modeBar), only some of the bars endup being in the .png file.

This is what the chart looks like:

This is what the downloaded png looks like:

Please let me know what other info I can provide.

Thanks.

vsabeti · 2016-10-20T10:46:13Z

PNG toImage for IE Edge works if img.crossOrigin is set to 'Anonymous'. The tainted canvas is fixed for the Edge browser (and works with this one change), but apparently will not be fixed for IE11. https://connect.microsoft.com/IE/feedback/details/828416/cavas-todataurl-method-doesnt-work-after-draw-svg-file-to-canvas
It would be great if in a future plotlyjs release, toImage png format is allowed for Edge while still restricting IE11 and below to be svg format only.

etpinard · 2016-10-20T14:12:30Z

@vsabeti thanks for your comments. I'll it over to #699

timelyportfolio changed the title ~~add new promise-based toImage and downloadImage to Plotly~~ add new promise-based toImage and downloadImage to Plotly Apr 19, 2016

timelyportfolio mentioned this pull request Apr 19, 2016

Feature/snapshot timelyportfolio/plotly.js#1

Closed

mdtusz reviewed Apr 19, 2016
View reviewed changes

etpinard added type: feature status: reviewable labels Apr 19, 2016

etpinard reviewed Apr 19, 2016
View reviewed changes

timelyportfolio force-pushed the feature/snapshot-pull branch 2 times, most recently from 0a059ce to 6124b99 Compare April 20, 2016 17:39

timelyportfolio force-pushed the feature/snapshot-pull branch from 582332b to cea7c5e Compare April 27, 2016 21:19

etpinard reviewed Apr 27, 2016
View reviewed changes

timelyportfolio force-pushed the feature/snapshot-pull branch 2 times, most recently from fb6eeea to bc96343 Compare April 28, 2016 01:53

timelyportfolio reviewed Apr 28, 2016
View reviewed changes

etpinard merged commit 0be79e2 into plotly:master May 16, 2016

This was referenced May 16, 2016

Clean up plotly code googledatalab/datalab#846

Closed

Clean up plotly code googledatalab/pydatalab#8

Closed

mdtusz mentioned this pull request Jun 14, 2016

PNG snapshots on Safari #250

Closed

etpinard mentioned this pull request Jun 28, 2016

Download plot as a png not working in IE from 1.13.0 #699

Closed

etpinard mentioned this pull request Jul 4, 2016

Plotly downloadImage won't open in Adobe Illustrator CS5 and CS6 #707

Closed

etpinard mentioned this pull request Jun 21, 2019

"Failed - network error" when downloading large png using toImage button #3771

Closed

add new promise-based toImage and downloadImage to Plotly #446

add new promise-based toImage and downloadImage to Plotly #446

Conversation

timelyportfolio commented Apr 19, 2016 • edited

Summary of Changes

Example Usage

mdtusz Apr 19, 2016 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Apr 19, 2016

timelyportfolio commented Apr 20, 2016

etpinard commented Apr 20, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdtusz commented Apr 27, 2016

timelyportfolio commented Apr 28, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Apr 28, 2016

timelyportfolio commented Apr 28, 2016

mdtusz commented Apr 28, 2016

etpinard commented Apr 28, 2016

timelyportfolio commented Apr 28, 2016

timelyportfolio commented May 16, 2016

etpinard commented May 16, 2016

timelyportfolio commented May 16, 2016

yniknafs commented Jun 30, 2016

mdtusz commented Jun 30, 2016 • edited

yniknafs commented Jun 30, 2016 • edited

mdtusz commented Jun 30, 2016 • edited

yniknafs commented Jun 30, 2016

rreusser commented Jun 30, 2016

a59 commented Sep 22, 2016

etpinard commented Sep 22, 2016

a59 commented Sep 22, 2016

a59 commented Sep 22, 2016 • edited

etpinard commented Sep 22, 2016

amirmog commented Oct 11, 2016 • edited

etpinard commented Oct 11, 2016 • edited

amirmog commented Oct 11, 2016

vsabeti commented Oct 20, 2016

etpinard commented Oct 20, 2016

timelyportfolio commented Apr 19, 2016 •

edited

mdtusz Apr 19, 2016 •

edited

mdtusz commented Jun 30, 2016 •

edited

yniknafs commented Jun 30, 2016 •

edited

mdtusz commented Jun 30, 2016 •

edited

a59 commented Sep 22, 2016 •

edited

amirmog commented Oct 11, 2016 •

edited

etpinard commented Oct 11, 2016 •

edited