Github 如何保存Jupyter html输出的图像快照？

因此，假设我在查看时使用

itkwidget

，我会看到：

然而，将其保存到GitHub会产生如下内容：

另一个现场直播。因此，我想知道在保存文件时（在GitHub上），应该实现什么来保持用户的视图交互，同时保持GitHub可预览的2d图像快照

换句话说，假设我有一个函数

#。。。
返回HTML（显示（“”）

我们希望为它提供一个静态图像数据，以便在笔记本电脑不活动的情况下进行渲染。如何/通过什么可以做这样的事情？

可以帮助您进行屏幕截图。当您的笔记本运行时，PhantomJS浏览器将打开它并对指定的输出单元格进行屏幕截图：

PhantomJS的JS文件：

// 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();
        });
    }
});

//笔记本的地址
变量地址=”http://localhost:8888/notebooks/Untitled.ipynb";
//来自Jupyter控制台的身份验证令牌
var authToken=“af6bc1d90688bb6c26aeb206b8690e4855d27ef8d265b1bc”；
//带有小部件输出的单元格编号
var-cellNumber=10；
//此函数用于验证页面是否已完全加载
//资料来源：https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js
函数waitFor（testFx、onReady、timeOutMillis）{
var maxtimeOutMillis=timeOutMillis？timeOutMillis:3000，
开始=新日期（）.getTime（），
条件=假，
间隔=设置间隔（函数（）{
如果（（新日期（）.getTime（）-start

在脚本中指定笔记本的地址、身份验证令牌和单元号，并使用phantomjs运行：

---

phantomjs script.js

我想知道这个解决方案是否与在提交之前保存小部件状态（“小部件”->“保存笔记本小部件状态”有关？这一策略帮助我应对了类似的挑战，尽管不是这个特定的挑战。