mirror of
https://github.com/ariya/phantomjs.git
synced 2024-10-26 06:17:33 +03:00
responsive screenshot example
This commit is contained in:
parent
c0574c152d
commit
f7ad5e1649
181
examples/responsive-screenshot.js
Normal file
181
examples/responsive-screenshot.js
Normal file
@ -0,0 +1,181 @@
|
||||
/**
|
||||
* Captures the full height document even if it's not showing on the screen or captures with the provided range of screen sizes.
|
||||
*
|
||||
* A basic example for taking a screen shot using phantomjs which is sampled for https://nodejs-dersleri.github.io/
|
||||
*
|
||||
* usage : phantomjs responsive-screenshot.js {url} [output format] [doClipping]
|
||||
*
|
||||
* examples >
|
||||
* phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/
|
||||
* phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/ pdf
|
||||
* phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/ true
|
||||
* phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/ png true
|
||||
*
|
||||
* @author Salih sagdilek <salihsagdilek@gmail.com>
|
||||
*/
|
||||
|
||||
/**
|
||||
* http://phantomjs.org/api/system/property/args.html
|
||||
*
|
||||
* Queries and returns a list of the command-line arguments.
|
||||
* The first one is always the script name, which is then followed by the subsequent arguments.
|
||||
*/
|
||||
var args = require('system').args;
|
||||
/**
|
||||
* http://phantomjs.org/api/fs/
|
||||
*
|
||||
* file system api
|
||||
*/
|
||||
var fs = require('fs');
|
||||
|
||||
/**
|
||||
* http://phantomjs.org/api/webpage/
|
||||
*
|
||||
* Web page api
|
||||
*/
|
||||
var page = new WebPage();
|
||||
|
||||
/**
|
||||
* if url address does not exist, exit phantom
|
||||
*/
|
||||
if ( 1 === args.length ) {
|
||||
console.log('Url address is required');
|
||||
phantom.exit();
|
||||
}
|
||||
|
||||
/**
|
||||
* setup url address (second argument);
|
||||
*/
|
||||
var urlAddress = args[1].toLowerCase();
|
||||
|
||||
|
||||
/**
|
||||
* set output extension format
|
||||
* @type {*}
|
||||
*/
|
||||
var ext = getFileExtension();
|
||||
|
||||
/**
|
||||
* set if clipping ?
|
||||
* @type {boolean}
|
||||
*/
|
||||
var clipping = getClipping();
|
||||
|
||||
/**
|
||||
* setup viewports
|
||||
*/
|
||||
var viewports = [
|
||||
{
|
||||
width : 1200,
|
||||
height : 800
|
||||
},
|
||||
{
|
||||
width : 1024,
|
||||
height : 768
|
||||
},
|
||||
{
|
||||
width : 768,
|
||||
height : 1024
|
||||
},
|
||||
{
|
||||
width : 480,
|
||||
height : 640
|
||||
},
|
||||
{
|
||||
width : 320,
|
||||
height : 480
|
||||
}
|
||||
];
|
||||
|
||||
page.open(urlAddress, function (status) {
|
||||
if ( 'success' !== status ) {
|
||||
console.log('Unable to load the url address!');
|
||||
} else {
|
||||
var folder = urlToDir(urlAddress);
|
||||
var output, key;
|
||||
|
||||
function render(n) {
|
||||
if ( !!n ) {
|
||||
key = n - 1;
|
||||
page.viewportSize = viewports[key];
|
||||
if ( clipping ) {
|
||||
page.clipRect = viewports[key];
|
||||
}
|
||||
output = folder + "/" + getFileName(viewports[key]);
|
||||
console.log('Saving ' + output);
|
||||
page.render(output);
|
||||
render(key);
|
||||
}
|
||||
}
|
||||
|
||||
render(viewports.length);
|
||||
}
|
||||
phantom.exit();
|
||||
});
|
||||
|
||||
/**
|
||||
* filename generator helper
|
||||
* @param viewport
|
||||
* @returns {string}
|
||||
*/
|
||||
function getFileName(viewport) {
|
||||
var d = new Date();
|
||||
var date = [
|
||||
d.getUTCFullYear(),
|
||||
d.getUTCMonth() + 1,
|
||||
d.getUTCDate()
|
||||
];
|
||||
var time = [
|
||||
d.getHours() <= 9 ? '0' + d.getHours() : d.getHours(),
|
||||
d.getMinutes() <= 9 ? '0' + d.getMinutes() : d.getMinutes(),
|
||||
d.getSeconds() <= 9 ? '0' + d.getSeconds() : d.getSeconds(),
|
||||
d.getMilliseconds()
|
||||
];
|
||||
var resolution = viewport.width + (clipping ? "x" + viewport.height : '');
|
||||
|
||||
return date.join('-') + '_' + time.join('-') + "_" + resolution + ext;
|
||||
}
|
||||
|
||||
/**
|
||||
* output extension format helper
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
function getFileExtension() {
|
||||
if ( 'true' != args[2] && !!args[2] ) {
|
||||
return '.' + args[2];
|
||||
}
|
||||
return '.png';
|
||||
}
|
||||
|
||||
/**
|
||||
* check if clipping
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function getClipping() {
|
||||
if ( 'true' == args[3] ) {
|
||||
return !!args[3];
|
||||
} else if ( 'true' == args[2] ) {
|
||||
return !!args[2];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* url to directory helper
|
||||
*
|
||||
* @param url
|
||||
* @returns {string}
|
||||
*/
|
||||
function urlToDir(url) {
|
||||
var dir = url
|
||||
.replace(/^(http|https):\/\//, '')
|
||||
.replace(/\/$/, '');
|
||||
|
||||
if ( !fs.makeTree(dir) ) {
|
||||
console.log('"' + dir + '" is NOT created.');
|
||||
phantom.exit();
|
||||
}
|
||||
return dir;
|
||||
}
|
Loading…
Reference in New Issue
Block a user