Quickly sharing screenshots of cells

[Tim Hopper]

I routinely find myself taking screenshots of IPython cells to share on Twitter or with colleagues (esp plots). I wondered if it would be possible to build something into the notebook to automate this. 

I've never written an extension or interacted with the Javascript component of notebooks, but I thought I'd give it a shot.

There's a JS library called html2canvas that can create an image from a DOM element. It's easy to get the element corresponding to the currently selected cell: IPython.notebook.get_selected_cell().element. 

I figure out how to programmatically upload an image to Imgur using Javascript from Stackoverflow. 

Combining all those things, I created this example notebook where I add a keyboard shortcut that will screenshot the current cell and upload it to Imgur: https://github.com/tdhopper/jupyter-shot/blob/master/jupyter-shot.ipynb. 

Obviously, a lot of work would need to be done to make this a usable tool, but I'm excited that it's feasible. 

Someone already forked it to create a version that will work with multiple cell selection: https://github.com/msjgriffiths/jupyter-shot/blob/master/jupyter-shot.ipynb

[Nicholas Bollweg]

Great stuff! Will definitely check it out!

I've used html2canvas a few times... I find its quality really depends on what you are screenshotting: fonts are particularly troubling, especially mathjax. Have you had any trouble getting it to work on different kinds of content?

[Tony Hirst]

Nice:-)

And it makes me think: that could be really useful as an extension?

eg select one or more consecutive cells (e using the rubber band thing that example extension uses), click a button or use a shortcut, grab an image and then do something with it. eg as a default, just save it to the clipboard so it can be pasted into a student support course forum post.

tony

[Matthias Bussonnier]

Really nice, 

With a server-side extension you could save the screenshot directly on the Desktop or somewhere else !

you can likely package it here:

https://github.com/ipython-contrib/IPython-notebook-extensions

That would make it easier to install and available in all notebooks !

I’m sure Books and tutorials authors would appreciate it !

-- 

M

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/076eefa3-f647-4a0e-9935-cc8b51772336%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nicholas Bollweg]

With a server-side extension you could save the screenshot directly on the Desktop or somewhere else !

Server-side rendering of web content is hard, but we're getting there:

https://github.com/Anaconda-Server/nbbrowserpdf

It's a work in progress, and doesn't run yet, as I am refactoring it from:

https://github.com/Anaconda-Server/nbpresent

Here's what it can generate:
https://github.com/Anaconda-Server/nbpresent/files/38659/Examples.1.pdf

Right now, it doesn't work against a live notebook with, say, widgets, and of course generates PDF...but adding PythonMagic would let you target png. I already have some behavior for capturing more than one screenshot as pdf (specifically slides) and joining them... one could as easily generate one image per thing (slide) captured, then dump those as some other format: a zip of images would be okay, but a layered inkscape file with the images embedded might be even better.

The resolution artifacts immediately jumps out at you: screen DPI is somewhere around 72-95dpii, while decent printable content needs to be at least 600dpi. If we don't account for that, we're just the new excel, but in a bad way.

[Matthias Bussonnier]

On Nov 25, 2015, at 16:01, Nicholas Bollweg <nick.b...@gmail.com> wrote:

With a server-side extension you could save the screenshot directly on the Desktop or somewhere else !

Server-side rendering of web content is hard, but we're getting there:

No I was thinking of screenshooting and using a custom handler to save the actual bytes  on disk 

(kinda like using the content manager) instead of uploading to imager. 

https://github.com/Anaconda-Server/nbbrowserpdf

It's a work in progress, and doesn't run yet, as I am refactoring it from:

https://github.com/Anaconda-Server/nbpresent

Here's what it can generate:
https://github.com/Anaconda-Server/nbpresent/files/38659/Examples.1.pdf

Still nice !

-- 

M