擷取元素的屏幕截圖

嘿，我試圖用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;

它是某種不工作我總是得到整個頁面的截圖！我錯了什麼？

來源

2015-02-12 Alesfatalis

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

來源

2015-02-16 00:06:01 Alesfatalis

擷取元素的屏幕截圖

回答

相關問題