Stack Exchange
Stack Overflow
Questions
Tags
Users
About
Stack Overflow
Public
Questions
Tags
Users
About
Saving screenshot of
object in notebook?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2017-02-16T22:43:18.150" class="fromnow">Feb 16 '17 at 22:43</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2017-02-23T19:33:38.333" datetime="2017-02-23T19:33:38.333">Feb 23 '17 at 19:33</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,270 times"> <span class="fc-light mr2">Viewed</span> 1,270 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="42286090" data-ownerid="419116" data-score="7"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42286090"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> <button class="js-bookmark-btn s-btn s-btn__unset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I'm inserting <code><iframe ...></code> objects that reference remote website and give me an interactive visualization in notebook in Chrome (from <a href="../../questions/38189119/simple-way-to-visualize-a-tensorflow-graph-in-jupyter#38192374">Simple way to visualize a TensorFlow graph in Jupyter?</a>) . The downside of this is that when I close the notebook, and then open it again, all the visualizations are replaced with empty whitespace.</p> <p>I suspect showing it requires re-executing javascript code in the <code>iframe</code>.</p> <p>Another downside is that when hosting this notebook (ie, github), all such cells are empty, so a static image approach is more portable than re-executing javascript.</p> <p>Can someone see a way to save screenshots of these cells and embedding them into notebook? Maybe something like <code>camera_ready(14)</code> which will embed static screenshot of visualization from output cell 14.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/google-chrome" class="post-tag js-gps-track" title="show questions tagged 'google-chrome'" rel="tag">google-chrome</a> <a href="../../questions/tagged/ipython" class="post-tag js-gps-track" title="show questions tagged 'ipython'" rel="tag">ipython</a> <a href="../../questions/tagged/jupyter-notebook" class="post-tag js-gps-track" title="show questions tagged 'jupyter-notebook'" rel="tag">jupyter-notebook</a> <a href="../../questions/tagged/jupyter" class="post-tag js-gps-track" title="show questions tagged 'jupyter'" rel="tag">jupyter</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:09">edited May 23 '17 at 12:09</time> <a href="../../users/-1/community" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 16 '17 at 22:43">asked Feb 16 '17 at 22:43</time> <a href="../../users/419116/yaroslav-bulatov" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/419116.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Yaroslav Bulatov" /> </a> <div class="s-user-card--info"> <a href="../../users/419116/yaroslav-bulatov" class="s-user-card--link">Yaroslav Bulatov</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">57,332</li> <li class="s-award-bling s-award-bling__gold" title="22 gold badges">22</li> <li class="s-award-bling s-award-bling__silver" title="139 silver badges">139</li> <li class="s-award-bling s-award-bling__bronze" title="197 bronze badges">197</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="42321932"></a> <div id="answer-42321932" class="answer " data-answerid="42321932" data-ownerid="1438906" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42321932"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><a class="external-link" href="http://phantomjs.org/" rel="nofollow noreferrer">PhantomJS</a> can help you with screen capture. While your notebook is running, PhantomJS browser will open it and make a screenshot of a specified output cell:</p> <p>JS file for PhantomJS:</p> <pre><code>// 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(); }); } }); </code></pre> <p>Specify the address of your notebook, auth token and cell number in the script and run it with phantomjs:</p> <p><code>phantomjs script.js</code></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-02-23T19:33:38.333" class="relativetime">Feb 23 '17 at 19:33</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">wombatonfire</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Feb 18 '17 at 23:40">answered Feb 18 '17 at 23:40</time> <a href="../../users/1438906/wombatonfire" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1438906.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="wombatonfire" /> </a> <div class="s-user-card--info"> <a href="../../users/1438906/wombatonfire" class="s-user-card--link">wombatonfire</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,585</li> <li class="s-award-bling s-award-bling__silver" title="28 silver badges">28</li> <li class="s-award-bling s-award-bling__bronze" title="36 bronze badges">36</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-42321932" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="42321932" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-71797600" class="comment js-comment " data-comment-id="71797600" data-comment-owner-id="419116" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71797600_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">The challenge here is that it's not just a static external webpage showed in output, but a javascript widget which has been interacted with in the notebook. So I want to save the same thing I'm seeing in the notebook (the widget is http://stackoverflow.com/q/39840323/419116 )</span> – <a href="../../users/419116/yaroslav-bulatov" title="57,332 reputation" class="comment-user owner">Yaroslav Bulatov</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71797600_42321932"><span title="2017-02-19T00:11:27.720 License: CC BY-SA 3.0" class="relativetime-clean">Feb 19 '17 at 00:11</span></a></span> </div> </div> </li> <li id="comment-71797737" class="comment js-comment " data-comment-id="71797737" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71797737_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">PhantomJS is a headless web browser capable of evaluating JS. How do you pass your data to the widget in iframe? Do you use URL parameters? If so, use the same URL to open it in PhantomJS and save the screenshot.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71797737_42321932"><span title="2017-02-19T00:21:33.697 License: CC BY-SA 3.0" class="relativetime-clean">Feb 19 '17 at 00:21</span></a></span> </div> </div> </li> <li id="comment-71798488" class="comment js-comment " data-comment-id="71798488" data-comment-owner-id="419116" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71798488_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I physically interact with it using my mouse, so there are no parameters sent over to the server. (it's basically a javascript graph visualizer that lets you customize a view interactively)</span> – <a href="../../users/419116/yaroslav-bulatov" title="57,332 reputation" class="comment-user owner">Yaroslav Bulatov</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71798488_42321932"><span title="2017-02-19T01:19:30.917 License: CC BY-SA 3.0" class="relativetime-clean">Feb 19 '17 at 01:19</span></a></span> </div> </div> </li> <li id="comment-71813364" class="comment js-comment " data-comment-id="71813364" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71813364_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Ok, then we will make a screenshot from the address of your notebook. Have a look at the updated answer.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71813364_42321932"><span title="2017-02-19T17:27:14.800 License: CC BY-SA 3.0" class="relativetime-clean">Feb 19 '17 at 17:27</span></a></span> </div> </div> </li> <li id="comment-71888618" class="comment js-comment " data-comment-id="71888618" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71888618_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Yaroslav Bulatov, have you checked the solution? Does it work for you?</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71888618_42321932"><span title="2017-02-21T14:08:53.013 License: CC BY-SA 3.0" class="relativetime-clean">Feb 21 '17 at 14:08</span></a></span> </div> </div> </li> <li id="comment-71912979" class="comment js-comment " data-comment-id="71912979" data-comment-owner-id="419116" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71912979_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">That was actually due to mispelling of URL, after fixing it I now have infinite stream of "TypeError: undefined is not an object (evaluating 'outputResult.getBoundingClientRect')" errors. I tried it on various cells, not just the ones with javascript widget</span> – <a href="../../users/419116/yaroslav-bulatov" title="57,332 reputation" class="comment-user owner">Yaroslav Bulatov</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71912979_42321932"><span title="2017-02-22T03:16:17.160 License: CC BY-SA 3.0" class="relativetime-clean">Feb 22 '17 at 03:16</span></a></span> </div> </div> </li> <li id="comment-71946851" class="comment js-comment " data-comment-id="71946851" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71946851_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It looks like the output cell was not found. Could you use this debug version of the script: http://pastebin.com/pEiPC2sN and show me it's output?</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71946851_42321932"><span title="2017-02-22T18:53:10.337 License: CC BY-SA 3.0" class="relativetime-clean">Feb 22 '17 at 18:53</span></a></span> </div> </div> </li> <li id="comment-71952112" class="comment js-comment " data-comment-id="71952112" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71952112_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Could you also export a notebook as pdf or make a screenshot of the area with a cell with iframe on which it fails? And what version of Jupyter Notebook are you using? For me it works nicely on version 4.3.1. When an output cell with the specified number exists in a notebook, the screenshot is always created.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71952112_42321932"><span title="2017-02-22T21:24:50.443 License: CC BY-SA 3.0" class="relativetime-clean">Feb 22 '17 at 21:24</span></a></span> </div> </div> </li> <li id="comment-71990442" class="comment js-comment " data-comment-id="71990442" data-comment-owner-id="419116" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71990442_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Here's the notebook with error message and script I used (I tried your script on first cell of same notebook ) -- https://github.com/yaroslavvb/stuff/blob/master/phantomjs-tryout.ipynb</span> – <a href="../../users/419116/yaroslav-bulatov" title="57,332 reputation" class="comment-user owner">Yaroslav Bulatov</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71990442_42321932"><span title="2017-02-23T17:30:12.067 License: CC BY-SA 3.0" class="relativetime-clean">Feb 23 '17 at 17:30</span></a></span> </div> </div> </li> <li id="comment-71994913" class="comment js-comment " data-comment-id="71994913" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71994913_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Yaroslav Bulatov, I fixed the issue. Please use updated code from the answer. The problem was that the logic relied on 'Out[```num```]' text when searching for output cell and didn't handle cells without a prompt. Now it should work for any cell.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71994913_42321932"><span title="2017-02-23T19:43:56.257 License: CC BY-SA 3.0" class="relativetime-clean">Feb 23 '17 at 19:43</span></a></span> </div> </div> </li> <li id="comment-71995539" class="comment js-comment " data-comment-id="71995539" data-comment-owner-id="419116" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71995539_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hm, it generates me this image -- https://github.com/yaroslavvb/stuff/blob/master/example.png . I've updated notebook with screenshot of what I actually see https://github.com/yaroslavvb/stuff/blob/master/phantomjs-tryout.ipynb . Works on other cells though.</span> – <a href="../../users/419116/yaroslav-bulatov" title="57,332 reputation" class="comment-user owner">Yaroslav Bulatov</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71995539_42321932"><span title="2017-02-23T20:02:04.983 License: CC BY-SA 3.0" class="relativetime-clean">Feb 23 '17 at 20:02</span></a></span> </div> </div> </li> <li id="comment-71996945" class="comment js-comment " data-comment-id="71996945" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71996945_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Well, the question is how the widget inserts its elements. I need to look at the DOM of the page. If you are using Chrome, could you right click on the widget -> Inspect, then navigate to the root ```div class="cell"``` select it and copy (http://imgur.com/a/x6lZB). I need to look at the resulting listing.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71996945_42321932"><span title="2017-02-23T20:42:55.503 License: CC BY-SA 3.0" class="relativetime-clean">Feb 23 '17 at 20:42</span></a></span> </div> </div> </li> <li id="comment-71997254" class="comment js-comment " data-comment-id="71997254" data-comment-owner-id="419116" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment71997254_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Here's a paste of the whole output cell with the widget -- http://pastebin.com/vurHCk0G</span> – <a href="../../users/419116/yaroslav-bulatov" title="57,332 reputation" class="comment-user owner">Yaroslav Bulatov</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment71997254_42321932"><span title="2017-02-23T20:51:44.650 License: CC BY-SA 3.0" class="relativetime-clean">Feb 23 '17 at 20:51</span></a></span> </div> </div> </li> <li id="comment-72043784" class="comment js-comment " data-comment-id="72043784" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment72043784_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Unfortunately, iframe with a graph visualization is always rendered blank. I have no idea why. Tried different approaches with no luck.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment72043784_42321932"><span title="2017-02-24T23:27:35.927 License: CC BY-SA 3.0" class="relativetime-clean">Feb 24 '17 at 23:27</span></a></span> </div> </div> </li> <li id="comment-72043910" class="comment js-comment " data-comment-id="72043910" data-comment-owner-id="1438906" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment72043910_42321932"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I will try to investigate further, as for some reason it does not work specifically with that iframe. If you embed an iframe from YouTube for example it's rendered successfuly. Will let you know if I find a solution.</span> – <a href="../../users/1438906/wombatonfire" title="4,585 reputation" class="comment-user ">wombatonfire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42286090/saving-screenshot-of-iframe-object-in-notebook#comment72043910_42321932"><span title="2017-02-24T23:35:02.363 License: CC BY-SA 3.0" class="relativetime-clean">Feb 24 '17 at 23:35</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>