Screenshoot Website dengan Phantomjs

Untuk mengambil sebuat screen website pastinya kita membutuhkan alat untuk mengambil screenshoot website tersebut. ya mungkin seperti tools website screenshoot yang ada di internet dengan beberapa browser yang ada, ataupun dengan menggunakan tools extension di google chrome.
Nah untuk kali ini kita akan coba untuk mengambil sebuah screenshoot website dengan javascript via server side. kita dapat menggunakan PhantomJS. Ya PhantomJS menawarkan kita untuk layaknya berinteraksi dengan website dengan menggunakan Engine Webkit andalan nya, tapi dengan menggunakan Javascript API, sehingga kita dapat membuat automation system pada script tersebut. dan PhantomJS ini pun tanpa visualisasi web nya, kecuali jika anda ingin men-screenshoot nya. PhantomJS mempunyai kemampuan standar biasa seperti browser webkit sejenisnya (Ex: Chrome, Opera) Seperti DOM handling, CSS Selector, JSON, Canvas, dan SVG.
Dan keren nya, applikasi ini dikembangkan oleh orang asli Bandung, Indonesia yang sedang bekerja di luar negri uwaw....
oke udah dulu ceritanya ntar ga kelar kelar lagi...
Install PhantomJS Ada beberapa cara untuk menginstall PhantomJS.
Untuk Windows bisa mendownload File binary nya di website phantomJS yang siap pakai.
Untuk Linux Bisa juga mendownload file Binary nya di website phantomJS kemudian bisa menaruh nya di folder /usr/bin.
perlu diketauhi untuk versi linux, karena binary yang di compile tersebut adalah pada versi Centos 5.8, berarti beberapa kernel diatas versi Centos Tersebut dapat berjalan dengan baik, untuk versi terdahulu dapat men-compile dengan source code yang ada.
Untuk OSX dapat menggunakan Brew dengan perintah

brew update && brew install phantomjs

Menjalankan Script
Untuk melakukan Screenshoot kita dapat melakukan nya dengan Script berikut.

var page = require('webpage').create()
,   alamat = 'http://www.google.co.id/';
 
page.open(alamat, function () {
    window.setTimeout(function () {
                page.render('screenshot.png');
                phantom.exit();
                console.log("[Captured]....");
            }, 800);
});

Selintas script tersebut mirip dengan NodeJS, variable alamat kita isi alamat website apa yang akan kita screenshoot. lalu fungsi page.open() untuk membuka website tersebut layaknya seperti browser biasa, kemudian fungsi page.render() untuk men-render hasil website yang telah terload, kemudian dilanjutkan fungsi phantom.exit() untuk mengakhiri proses.
Untuk fungsi window.setTimeout() sebenarnya sih untuk memberi delay jika ada bebera konten yang belum terload dapat terambil juga.
dan bagaimaana hasilnya ? taraa... dan hasilnya adalah seperti berikut.

nah untuk anda yang ingin mengetest responsive website bisa mengubah resolusi visual Viewport yang ada dengan menambahkan baris kode sebelum eksekusi page.open() dengan kode berikut.

page.viewportSize = { width: 1820, height: 928 }

hehe itu resolusi monitor saya, :p kegedean yah? kan bisa diatur-atur juga seperti lebar layar iPad layar Android Phone dll. dan maka hasil nya akan seperti berikut.

Tapi perlu diingat bahwa ada beberapa kendala dengan PhantomJS, dimana Jenis Webfont tidak dapat dirender di PhantomJS, alternatif bisa menggunakan Font tipe SVG.
Oke mungkin itu yang bisa saya beri, selain untuk men-screenshot sebuah halaman, PhantomJS juga dapat menjadi sebuah Analysis system, Automatic System, dll yang berhubungan dengan browser. sehingga masalah bot dan bot jadi lebih mudah #ehhh
Referensi :
http://phantomjs.org/ https://github.com/ariya/phantomjs/