I want to save the image inside the div specified in the code. But using the code below i"m getting some other portion rendered. Is this the correct way to do it? I'm just a beginner in phantomjs. So Please help.
var page = require('webpage').create();
page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
var clipRect = page.evaluate(function () {
return document.querySelector(".span7 demo").getBoundingClientRect(); });
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
window.setTimeout(function () {
page.render('capture.png');
phantom.exit();
}, 200);
}
});
PhantomJS is a discontinued headless browser used for automating web page interaction. PhantomJS provides a JavaScript API enabling automated navigation, screenshots, user behavior and assertions making it a common tool used to run browser-based unit tests in a headless system like a continuous integration environment.
Go to the “bin” folder and check phantomjs.exe file. If you are using it on a Windows OS, then you can set the path variable under the environment variable for fast access through command prompt. The command to run the PhantomJS program: C:\> phantomjs [options] file.
This might be completely wrong but the link that I provided in my comment does it like this:
Change
var clipRect = page.evaluate(function () {
return document.querySelector(".span7 demo").getBoundingClientRect(); });
to:
var clipRect = document.querySelector(".span7 demo").getBoundingClientRect(); });
Okay so I wanted to figure this one out and here's the code that works for me. I'm not familiar with the phantomjs api to use querySelector so I ended up using getElementsByClassName
which is pretty much the same.
var page = require('webpage').create();
page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
//Heres the actual difference from your code...
var bb = page.evaluate(function () {
return document.getElementsByClassName("span7 demo")[0].getBoundingClientRect();
});
page.clipRect = {
top: bb.top,
left: bb.left,
width: bb.width,
height: bb.height
};
page.render('capture.png');
phantom.exit();
}, 200);
}
});
You can easily capture an element with an ID too. Just replace getElementsByClassName("classname")[0]
by document.getElementById('divID')
. A full working example would be:
var page = require('webpage').create();
page.open("https://www.sejlar.com/maps.html", function (status) {
if (status !== 'success') {
console.log('Page not found');
}
else {
var p = page.evaluate(function () {
return document.getElementById('map').getBoundingClientRect();
});
page.clipRect = {
top: p.top,
left: p.left,
width: p.width,
height: p.height
};
page.render('screenshot.png');
phantom.exit();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With