Directly save image (without opening in browser)

[robinrosenstock]

Referencing: #596 and #564
For saving an image you have first open it in the browser,
for example in jupyter: plotly.offline.plot(fig, filename=filename, image='svg')
opens a new tab and download immediately, when adding auto_open=False:
plotly.offline.plot(fig, filename=filename, image='svg', auto_open=False)
then it will not open a new tab, but it will not download the image as well.
The jupyter command was only an example, of course this functionality would be more useful in text only scripts (python, javascript, R).

[cldougl]

As previously mentioned in the issues you've referenced this feature is not possible at this time and we do not have a plan to add it in the immediate future. You can always submit feature requests here: https://support.plot.ly/libraries/python

This is now supported 🎉 https://medium.com/@plotlygraphs/plotly-py-end-of-summer-updates-5422c98b9058

[jwhendy]

@cldougl since this is still open, could we do a quick thought experiment? Let's say the plotly team did take this on as a feature request... could someone sketch out the potential implementation?

Like would you need to do this in pure python? Would you get the div contents for the plot and call plotly.js locally (via python, or via js)? Would you use the existing mechanism and just figure out how to "open" the generated html behind the scenes (I think that's what the R version is doing with export())?

As @geniusupgrader referenced, there's issues on this already, and I'll add that there's activity on the forums and at least a couple of posts on SO about this.

The community wants this. I want this... but I'm newer to python and don't think what I might try intuitively would match what those behind the library would actually do to make this a reality.

So, my pitch is that if you could help the community to understand what a possible solution might look like instead of just closing issues outright, perhaps they would do it for you! Just an [optimistic, idealist] thought :)

I submitted a feature request to this effect though it appears plotly screens them as mine isn't showing up.

[jwhendy]

I just fiddled with this a bunch and I think there are at least two possible methods:

---

1. use selenium to screenshot the page.

I demonstrated the feasibility of this here. I tested minimally, so I'm not sure what the limitations are. I was surprised that basically copying bokeh's method out of the box worked with respect to size/crop.

---

2. utilize broken_symlink's method of simulating the button click.

Ultimately, I didn't actually need to use a button click. We just need to specify image=foo and image_filename=bar to plotly.offline.plot() which auto-downloads upon opening. It turns out the opening has to be in something other than phantomjs as it doesn't do downloads well or maybe even at all. That said, both ways work. I demonstrated the feasibility of this here.

---

Unknowns abound: os portability, plot type/size limitations, other system variables, dependency availability across os's and how complex it would be to detect them.

Still... I'm feeling pretty good. I consider myself not at all good at python and I did this in maybe 4-6hrs of researching, trial, and error.

Would you consider implementing something like this if you tell me where it could go in the api structure and I create a PR?

[robinrosenstock]

Thanks for your contribution @jwhendy!
I don't like your first solution to take a screenshot with selenium, because I'm mostly interested in downloading plots in vector formats, notably .svg.
And your second solution is not really ideal also, because as you already mentioned, there are many dependencies when using an browser automation software. For example I had first to install selenium, pillow, pyvirtualdisplay, Xvfb and ChromeDriver to get it to work.
Also I've tried to download a .svg but get this traceback:

---------------------------------------------------------------------------
OSError                                   Traceback (most recent call last)
<ipython-input-3-73a37a4afc39> in <module>()
     14 display.stop()
     15 
---> 16 image = Image.open('{}.svg'.format(os.path.join(dload, fname)))
     17 image

~/miniconda3/lib/python3.6/site-packages/PIL/Image.py in open(fp, mode)
   2570         fp.close()
   2571     raise IOError("cannot identify image file %r"
-> 2572                   % (filename if filename else fp))
   2573 
   2574 #

OSError: cannot identify image file '/home/robin/Downloads/plotly-fruit-plot.svg'

Is this a limitation of selenium that it can't handle .svg or similar?
Personally, I think, it must be possible to convert the generated (and structured) html to some other file format without the help of a browser?

[ghtmtt]

thanks for raising this issue again. I tried @jwhendy methods but in the way I'm using Plotly Python API it seems not feasible (https://github.com/ghtmtt/DataPlotly).

If someone is taking care to find a solution, please consider me as help/tester. Having also this feature would be awesome

[jwhendy]

@geniusupgrader thanks for the feedback. I certainly don't love either of them myself, but I'm not sure how to go about it otherwise.

Personally, I think, it must be possible to convert the generated (and structured) html to some other file format without the help of a browser?

Indeed... one would think so. I will say, from my noob perspective these are notable data points:

• this is how plotly implements for their R API. It uses webshot, which is a webpage screenshot library
• it's also what bokeh uses to export images

In other words, if this is possible, it's intriguing that two legit solutions out there did not use it and opted for these sort of painful and dependency-heavy workarounds.

Good feedback on the svg aims, as if that was a big deal for others it certainly helps steer the ship in a particular direction. Do you just prefer for usage/non-lossy, or perhaps you modify them later in some vector editor?

Re. the error, it appears it's just a limitation of pillow I wasn't aware of. Technically, it's not a true requirement; I was using that code just to show that the plot file was there in image format.

Try opening in a different viewer (or browser) and you should see it! Also, from looking around, it seems I could have just done this instead:

from IPython.display import SVG
SVG('{}.svg'.format(os.path.join(dload, fname)))

[robinrosenstock]

Do you just prefer for usage/non-lossy, or perhaps you modify them later in some vector editor?

it should be an end product, so no modification after the download is needed

[jwhendy]

Another idea was to run the js locally, as the functionality exists, but I don't know how to trigger it without loading the page. This is the magic in the file that auto-triggers the download:

<script>function downloadimage(format, height, width, filename) {var p =
    document.getElementById('div_uuid');Plotly.downloadImage(p,
    {format: format, height: height, width: width, filename:
      filename});};{downloadimage('svg', 600, 800, 'foo');}
</script>

Looking around for how to call js directly from python led me to py_mini_racer, but for reasons beyond my understanding, plotly is not loadable like that; it's a "browser package".

There is a node interface, but it requires providing a username and api key, so it defeats the purpose of offline image export.

@geniusupgrader

it should be an end product, so no modification after the download is needed

I don't understand. I wanted to know "why svg"? My guesses were either that it won't pixelate regardless of scale, or that you're editing it. To ask another way, at a high enough res, why isn't png okay?

[ghtmtt]

@jwhendy I step into the discussion "why svg". Having the chance to heavily editing the plot after it has been made (like a simple legend moving in a whatever other position) is a nice stuff to have.

[robinrosenstock]

@jwhendy vector format is (most of the times) definitely better for plots, cause scalable and such

[jwhendy]

In lieu of something better, feel free to tinker around with my export_img fork. It adds a save_img argument to plotly.offline.plot(). I leveraged the fact that image='type' makes the page auto-download. It allows more formats than screenshotting with selenium and might be less dependency heavy, as I suspect more users have one of the selenium webdrivers available vs. phantomjs.

You'd use it like this:

import plotly
import plotly.graph_objs as go

data = [go.Bar(x=['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries'],
               y=[5, 3, 4, 2, 4, 6])]

html_file = 'plotly-fruit-plot.html'
fname = 'plotly-fruit-plot'

plotly.offline.plot(data, filename=html_file, auto_open=False,
                    image_width=1280, image_height=800,
                    image_filename=fname, image='svg', save_img=True)

Some ideas for improvement/testing:

• does this work at all on Windows?
• allow (or detect) other browser backends in case chromium is not available
• same for pyvirtualdisplay (does this work on other platforms?)
• add checks I'm not thinking of... currently you're warned if auto_open=True (will download anyway and you'll get a duplicate) and if image=None (won't add the plot generation script)
• I could see making this move the image file to one's working dir after saving to ~/Downloads
• handle redundant downloads/duplicate names, which gives stuff like filename (2).png
• other stuff I'm not thinking of

---

@ghtmtt sorry this might not work for your case! I'm pretty stumped other than what I've found :(

@geniusupgrader understood re. svg, though I take this to mean you're primarily concerned with appearance quality? In other words, given a png of whatever dpi/size you wanted, is there any difference for your use case? I like svg in theory as well, but in practice as long as the png isn't ugly, I never notice the difference. In any case, the current method just exposes the image='type' options that plotly already gives us, so hopefully that works!

[robinrosenstock]

@jwhendy thanks again for your effort. In regard to png vs. svg: you're right, if post-editing is not needed and the png is high quality, then the format is not that important (except maybe the filesize, which depends on the use case wheter png or svg will be less in filesize or better manageable) That said I still favor svg.