Hello everyone, today I bring a simple tutorial where we will learn to
create thumbnail or thumbnail of a web page
. In this tutorial
we will not use any external service
that provides us with an API to create the web thumbnails, since they are usually paid.
To be honest, this article was going to be titled in another way, more specifically its title was going to be
"What is PhantomJS and what is it for?"
I had chosen that title because I wanted to talk about PhantomJS to those who do not know, but after writing the article I decided that it would be better to put a title of something more practical and useful, such as the
creation of free web page thumbnails
and at the same time serve as a presentation for PhantomJS.
What is PhantomJS and what is it for?
First of all I must make an explanation far above what PhantomJS is and what we can use it for. The literal definition of the documentation would be:
"PhantomJS is a WebKit (without graphical interface) with which we can do scripting in Javascript"
.
The previous thing to many will tell us little or nothing, so to understand it better I will explain it with my words: PhantomJS is a
WebKit-
based
browser
that
lacks a graphical interface
, but we can execute it through the command line and at the same time it facilitates us a Javascript API to interact with web pages.
The next step is to
install PhantomJS on our PC
, for this we go to the official page
http://phantomjs.org/
and download the latest version
(at the moment I am using version 2.1.1 for Windows)
. In the case of the Windows version we will download a
zip
file that we will unzip and within the
bin
folder we will find the executable
phantomjs.exe
that will be the one that we will execute through the command line.
We already have PhantomJS installed!
, now we just need a text editor (I usually use
Sublime Text
) to write our code in Javascript.
Creating our first script for PhantomJS.
We will start by creating a small script that will serve as a base code to create thumbnails of the websites. The content of our
test.js
file is:
var page = require('webpage').create();
page.open('https://www.vozidea.com/', function() {
page.render('TechnoWikis.png');
phantom.exit();
});
We copy the code and save it in our
test.js
file that will be in the same folder as the
phantomjs.exe
executable. We go to the Windows console and execute the following command:
phantomjs.exe test.js
After executing it we see that the
TechnoWikis.png
file has been created, which is the Vozidea.com thumbnail.
How to create thumbnail or thumbnail of web page.
In this section we will polish the previous code to adapt it to our needs. If you have seen the image that was created in the previous section, PhantomJS took the capture for a width of 400 pixels, since it is the minimum viewport width of the
responsive design
of Vozidea.com.
In this section we will define a custom size of viewport, in order to adjust the size of the thumbnail to our needs. Another improvement that we will include in the script will be to add messages that inform us when the thumbnail creation work is finished or if the process has failed. The final code would look like this:
var page = require('webpage').create();
page.viewportSize = { width: 1400, height: 1000}; //Definimos las dimensiones (alto y ancho) del viewport
page.open('http://www.vozidea.com', function(status) {
if(status === "success") {
page.render('example.png');
console.log("Thumbnail creado!");
}
else {
console.log("Error: no se pudo cargar la página!");
}
phantom.exit();
});
Conclusions
With PhantomJS we can perform a lot of tasks, not just create thumbnails or web page thumbnails. As it is a browser
(although it does not have a graphical interface) it
offers us great flexibility, especially when it comes to performing automatic web tests. I could not say goodbye without mentioning
CasperJS
, a complement to PhantomJS that facilitates the task of automating tasks.
This is all for today, you can leave any doubts in the comments.