截取元素的屏幕截图答案

【问题标题】：Take screenshot of element截取元素的屏幕截图
【发布时间】：2015-02-16 08:06:01
【问题描述】：

嘿，我正在尝试使用 phantomjs 呈现特定元素的屏幕截图。我正在为 nodejs 使用 phantomjs 桥：phantom

这是我目前得到的：

page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
var elementBounds = page.evaluate(function () {
    var clipRect = document.querySelector("#yw0").getBoundingClientRect();
    return {
        top: clipRect.top,
        left: clipRect.left,
        width: clipRect.width,
        height: clipRect.height
    };
});
var oldClipRect = page.clipRect;
page.clipRect = elementBounds;
page.render('element.png');
page.clipRect = oldClipRect;

不知何故，我总是得到整个页面的屏幕截图！我做错了什么？

【问题讨论】：

不使用 phantomjs 有更简单的方法，有兴趣吗？
@MohitBhasi 我需要使用 phantomjs，因为我的代码是更大程序的一部分
@MohitBhasi 也许您可以以这种方式发布作为答案。所以我可以尝试以某种方式在幻像中实现它。
它只是使用html的画布并绘制图像
@MohitBhasi 所以我可以将它转换为 dataUrl，当它返回时我可以用 nodejs 编写文件

标签： javascript jquery node.js phantomjs

【解决方案1】：

使用 NightmareJs 解决了这个问题。这是我的代码：

var Nightmare = require('nightmare');
var Screenshot = require('nightmare-screenshot');
var nightmare = new Nightmare();
nightmare.goto('url');
nightmare.use(Screenshot.screenshotSelector('element.png', 'img[id="yw0"]'));
nightmare.run();

【讨论】：