In [1]:
!date
Sat Feb  8 08:10:58 PST 2014

Pasting Images into in IPython Notebook

An exchange on the IPython-Dev mailing list addressed a feature request for the IPython Notebook that I have been longing for, for a while now:

Le 7 févr. 2014 à 21:04, Edeler, Torsten a écrit :

Hi everybody. I’m playing around with the notebook. It is fantastic! Thank you for this amazing piece of software!

I’m just missing the ability to paste images directly from the clipboard (e.g. screenshots) into the notebook. My OS is Win7. How do I make that work?

After some initial ideas about workarounds to accomplish this functionality,

On 2/7/14 1:47 PM, Juergen Hasch wrote: It only takes around 15 lines of Javascript code to implement this as clipboard paste event for Chrome. All you have to do is receive the image from clipboard, create a markdown cell, and paste the image as base64.

Not efficient and slow as hell for larger images, so I won't say this is a viable solution. Still, technically it can be done.

Hasch then provided those lines of code, and they work for me!

In [2]:
from IPython.display import Javascript
In [4]:
Javascript("""
// On 2/7/14 1:57 PM, Juergen Hasch writes:
// This is my hack. Slow as hell for anything larger than some 10k.

window.addEventListener('paste', function(event){
    var cell = IPython.notebook.get_selected_cell();
    var items = event.clipboardData.items;
    for (var i = 0; i < items.length; ++i) {
        if (items[i].kind == 'file' && items[i].type.indexOf('image/') !== -1) {
            var blob = items[i].getAsFile();
            window.URL = window.URL || window.webkitURL;
            var blobUrl = window.URL.createObjectURL(blob);
            var img = document.createElement('img');
            img.src = blobUrl;

            var reader = new FileReader();
            reader.onload = ( function(evt) {
                var new_cell = IPython.notebook.insert_cell_below('markdown');
                var str = '<img src="' + evt.target.result + '">';
                new_cell.set_text(str);
                new_cell.edit_mode();
                new_cell.execute();
                } );
            reader.readAsDataURL(blob);
        }
    }
});
""")
Out[4]:

To test this:

Copy an image, e.g. with Windows Snipping Tool, paste, and see what happens:

Amazing! And slow, as promised. But amazing!

Thanks to everyone involved in asking and answering this questions.