I am trying to capture some screenshot of Web URLs so for this purpose, I searched everything on Google up to 10 pages and found nothing to clear my mind so finally asking for help here.
To have a better screenshot of my URLs, after searching many plugins, APIs, and codes, I found PhantomJS much reliable and recommended by many developers. Finally, I created my script to capture the screenshot below using Windows 10 and Wamp Local Server later will host my script on Linux based shared web hosting server.
1.) First I downloaded the PhantomJS from https://phantomjs.org/ for Windows (.exe) file and saved it in D:\Wamp_Server_64\www\MyProject\bin\phantomjs.exe folder.
2.) Created some below files as basics.
PHP file (capture.php):
<?php
$response = exec('D:\Wamp_Server_64\www\MyProject\bin\phantomjs D:\Wamp_Server_64\www\MyProject\js\screenshot.js http://www.google.com google.jpg');
?>
JS file (screenshot.js):
var system = require('system');
// Web Address (URL) of the page to capture
var url = system.args[1];
// File name of the captured image
var file = system.args[2];
var page = require('webpage').create();
// Browser size - height and width in pixels
// Change the viewport to 480x320 to emulate the iPhone
page.viewportSize = { width: 1200, height : 800 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1200, height: 600 };
// Set the User Agent String
// You can change it to iPad or Android for mobile screenshots
page.settings.userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5";
// Render the screenshot image
page.open ( url, function ( status ) {
if ( status !== "success") {
console.log("Could not open web page : " + url);
phantom.exit();
} else {
window.setTimeout ( function() {
page.render(file);
console.log("Download the screenshot : " + file);
phantom.exit();
}, 1000);
}
});
3.) Now after running the capture.php file in the browser via http://localhost/MyProject/capture.php, I got the file google.jpg downloaded in the same folder of capture.php.
Problem:
Now I have some problems related to each other and need suggestions as shared below.
- First the main problem is that I want to display the screenshot on
capture.phppage instead of downloading. - Second is that it is generating too heavy images so I want to decrease its quality of thumbnail.
- Third problem is that I want to make it like API something as
http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXXand then I should be able to use it as<img src="http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX"/>anywhere in MyProject. (Note: For this purpose, I tried to study https://github.com/jonnnnyw/php-phantomjs and also https://github.com/microweber/screen/tree/master/demo but not able to get it) - Fourth is that it is taking too much time with browser favicon keeps animating, I want to host it later on my general shared Linux based website server so how can I make its loading time fast and want to display a general loading image until it generates a thumbnail.
I know I asked too much but I am stuck on these steps. Rest I got all from Googling. :) #HappyCoding