撷取元素的屏幕截图

问题描述：

嘿，我试图用phantomjs呈现特定元素的屏幕截图。我现在用的是phantomjs桥的NodeJS：幻影撷取元素的屏幕截图

这是我走到这一步：

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有一个更简单的方法，感兴趣吗？ – 2015-02-12 07:47:36

@MohitBhasi我需要使用phantomjs，因为我的代码是更大程序的一部分 – Alesfatalis 2015-02-12 07:49:11

@MohitBhasi也许您可以将此方式作为答案发布。所以我可以尝试以虚幻的方式实现它。 – Alesfatalis 2015-02-12 08:16:20

答

使用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();

撷取元素的屏幕截图

相关推荐