Saving a screenshot of an <iframe> in a notebook?

Question

I insert <iframe ...> objects that link to a remote website and give me interactive rendering in a notebook in Chrome (from An easy way to render a TensorFlow graph in Jupyter? ). The disadvantage of this is that when I close the laptop and open it again, all visualizations are replaced by an empty space.

I suspect this means that you need to re-execute javascript code in the iframe .

Another drawback is that when you place this laptop (i.e. github), all such cells are empty, so the approach using a static image is more portable than restarting javascript.

Can someone see a way to save screenshots of these cells and embed them in a notebook? Perhaps something like camera_ready(14) , which will include a static screenshot of the render from output cell 14.

Answer 1

PhantomJS can help you with screen capture. While your laptop is running, the PhantomJS browser will open it and take a screenshot with the specified output cell:

JS file for PhantomJS:

 // address of the notebook var address = "http://localhost:8888/notebooks/Untitled.ipynb"; // auth token from Jupyter console var authToken = "af6bc1d90688bb6c26aeb206b8690e4855d27ef8d265b1bc"; // cell number with a widget output var cellNumber = 10; // this function is used to verify that a page is fully loaded // source: https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js function waitFor(testFx, onReady, timeOutMillis) { var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, start = new Date().getTime(), condition = false, interval = setInterval(function() { if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) { // If not time-out yet and condition not yet fulfilled condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); } else { if(!condition) { // If condition still not fulfilled (timeout but condition is 'false') console.log("'waitFor()' timeout"); phantom.exit(1); } else { // Condition fulfilled (timeout and/or condition is 'true') console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms."); typeof(onReady) === "string" ? eval(onReady) : onReady(); clearInterval(interval); //< Stop this interval } } }, 250); //< repeat check every 250ms }; // log in to a notebook using a token function logIn() { console.log("Logging in"); page.evaluate(function(token) { document.forms[0].password.value = token; document.forms[0].submit(); }, authToken); } // wait for a notebook to fully load, find the // needed output cell and save it as a PNG file function saveAsPNG() { console.log("Saving PNG") // Wait for 'notebook-container' to be visible waitFor(function() { // Check in the page if a specific element is now visible return page.evaluate(function() { return $("#notebook-container").is(":visible"); }); }, function() { console.log("The notebook-container element should be visible now."); var clipRect = page.evaluate(function(cell){ // we are selecting only the output cell var searchStr = 'div.input_prompt:contains("[' + cell + ']:")'; var parentCell = $(searchStr).parents('div.cell')[0]; // get only the data div var outputSubarea = $(parentCell).find('div.output_subarea')[0]; // get the coordinates of the data div return outputSubarea.getBoundingClientRect() }, cellNumber); page.clipRect = { top: clipRect.top, left: clipRect.left, width: clipRect.width, height: clipRect.height }; page.render('example.png'); phantom.exit(); }); } var page = require('webpage').create(); // it seems, viewportSize should fully cover the // the rendered div position, or nothing will be saved. page.viewportSize = { width: 5000, height: 5000 }; page.open(address, function (status) { // Check for page load success if (status !== "success") { console.log("Unable to open a page"); } else { // Wait for 'password_input' to be visible waitFor(function() { // Check in the page if a specific element is now visible return page.evaluate(function() { return $("#password_input").is(":visible"); }); }, function() { console.log("The password_input element should be visible now."); logIn(); saveAsPNG(); }); } }); 

Specify the address of your laptop, authentication token and cell number in the script and run it with phantomjs:

phantomjs script.js