使用JS将网页元素保存为图像

Question

我知道之前已经提出过这个问题，但所有答案都来自几年前，所以也许有些事情发生了变化。

我发现了https://github.com/apollolm/phantasm，这看起来就像我需要的那样。但是我在OSX上似乎没有得到支持。

那么，我如何使用javascript来保存网页的partulcar部分的图像？

Answer 1

您可以使用phantomjs来渲染页面并获取其图像。

提出问题的示例：

var page = require('webpage').create();

page.viewportSize = {width: 1600, height: 900};

console.log('opening page');
page.open('http://stackoverflow.com/questions/37570827/saving-element-of-webpage-as-an-image-using-js', function(status) {
    console.log('check status ', status);
    if (status == 'success') {
        console.log('getting rect for part of page which we want to render to file');
        var rect = page.evaluate(function() {
            var questionElement = document.getElementById("question");
            return questionElement.getBoundingClientRect();
        });
        console.log('setting rect ', rect);
        page.clipRect = rect;
        console.log('rendering, check file question.png near your script');
        page.render("question.png");            
    }
    console.log('exiting');
    phantom.exit();
})

使用phantomjs SCRIPT_FILENAME.js运行它并等待结果：