开发手册 欢迎您!
软件开发者资料库

PhantomJS - 屏幕截图

PhantomJS屏幕截图 - 从基本概念到高级概念,从简单和简单的步骤学习PhantomJS,其中包括概述,环境设置,对象,方法,网页,文件系统,系统,Web服务器模块,属性,方法,事件/回调,子进程模块,命令行界面,屏幕捕获,页面自动化,网络监控,测试,REPL,示例。

PhantomJS非常有助于截取网页截图并将网页转换为PDF.我们在这里给出了一个简单的例子来演示它是如何工作的.

示例

var page = require('webpage').create();page.open('http://phantom.org/',function(status){   page.render('phantom.png');   phantom.exit();});

执行上述程序,输出将保存为 phantom.png .

Optimal Solution

将网页转换为PDF

PhantomJS还有助于转换将网页添加到带有页眉和页脚的PDF页面中.看一下下面的例子,了解它是如何工作的.

var wpage = require('webpage').create(); var url = "https://en.wikipedia.org/wiki/Main_Page"; var output = "test.pdf"; wpage.paperSize = {    width: screen.width+'px',    height: '1500px',       margin: {      'top':'50px',       'left':'50px',       'rigtht':'50px'    },    orientation:'portrait',    header: {       height: "1cm",       contents: phantom.callback(function(pageNumber, nPages) {          return "
Header " + pageNumber + " / " + nPages + "
";       })    },    footer: {       height: "1cm",       contents: phantom.callback(function(pageNumber, nPages) {            return "
Footer " + pageNumber + " / " + nPages + "
";       })    } } wpage.open(url, function (status) {    if (status !== 'success') {       console.log('Page is not opening');       phantom.exit();    } else {       wpage.render(output);       phantom.exit();        } });

上述程序生成以下输出.

The above will convert the page into pdf and will be saved in test.pdf

将画布转换为图像

Phantomjs可以轻松地将Canvas转换为图像.看看下面的例子,了解它是如何工作的.

var page = require('webpage').create(); page.content = ''; page.evaluate(function() {   var context,e1;    el = document.getElementById('surface');       context = el.getContext('2d');    context.font = "30px Comic Sans MS";    context.fillStyle = "red";    context.textAlign = "center";    context.fillText("Welcome to PhantomJS ", 200, 200);       document.body.style.backgroundColor = 'white';    document.body.style.margin = '0px'; }); page.render('canvas.png'); phantom.exit();

上述程序生成以下输出.

Welcome Phantomjs