&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！课题_使用phantomjs操作DOM并对页面进行截图需要注意的几个问题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
课题_使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
上传于||暂无简介
阅读已结束，如果下载本文需要使用5下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢& & & 近来研究了下phantomjs,只是初涉，还谈不上深入研究，首先介绍下什么是phantomjs。
& & & 官网上的介绍是：&PhantomJS is a headless WebKit scriptable with a JavaScript API. It has&fast&and native&support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.&翻译过来就是：&PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 &&& PhantomJS 可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。
& & &本文结合nodejs利用phantomjs网页截屏功能实现对多个URL进行批处理截图操作，并将图片上传至七牛服务器，批量获得图片下载地址后存储在本地文件。
& & &下面就开始讲讲这个demo具体过程是怎么实现的。
& & 关于nodejs的安装，在之前的文章中都有讲过，这里就不再赘述。具体可参见nodejs官网：；
2、phantomjs
& & 关于phantomjs的安装，这里主要讲windows环境下的安装方式：
& & 首先，进入官网
下载phantomjs压缩包，并解压至本地磁盘中，比如我本机上解压后存放的地址是：D:\Program files\phantomjs-2.1.1；
& & 其次，配置环境变量。将phantomjs解压后目录中的bin目录的路径（例如我本机bin目录的位置是：D:\Program files\phantomjs-2.1.1\bin ）加到系统变量Path变量中；
& & 然后，打开cmd，输入 &phantomjs --version& 命令，查看phantomjs是否安装成功，如果出现版本号信息则说明安装成功，如果报错，那么你需要重启一下电脑。
结果如下所示：
二、设计思路
& & &首先说说写这个demo的初衷。因为在工作中每次发邮件时需要用到一些截图，不想多个图片每次都自己手动去截取，所以就想用个自动化的批处理工具来自动截图，但是这样也仅仅是完成了截图，在使用的时候还是得上传图片，我还是觉得麻烦，所以就想截图完成后将这些图片自动上传到七牛服务器上，然后从服务器上获取图片下载地址，之后就可以直接使用图片的下载地址就ok了。下面是具体的设计思路。
针对上图中的截图器而言，具体的程序流程是：
1、关于模拟生成Echarts图表的工程代码及启动方法，不详述，可参见我在github上发布的源码：
2.1、capture.js
主要利用phantomjs进行截图操作
1 var page=require('webpage').create();//创建一个网页对象;
2 var system=require('system');
3 var address,fileN
4 // page.viewportSize={width:1024,height:800};//设置窗口的大小为；
5 // page.clipRect={top:0,left:0,width:1024,height:800};//截取从{0,0}为起点的大小的图像;
6 // //禁止Javascript，允许图片载入;
7 // // 并将userAgent改为"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0";
8 // page.settings={
javascriptEnabled: false,
loadImages: true,
userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0'
14 if (system.args.length === 1) {
console.log('Try to pass some args when invoking this script!');
phantom.exit(1);
//获取指令传递的参数,参数是以数组的形式传递的;
address=system.args[1];
fileName=system.args[2];
count=system.args[3];
max=system.args[4];
//打开一个网页；
page.open(address,function(status){
console.log(status);
if(status==='success'){
//成功后将页面存储为图片并放在指定的位置；
page.render('./pictures/'+fileName+'.png');
// page.close();//释放;
phantom.exit();
2.2、phantom.js
Nodejs开启新的子进程，发出phantomjs指令进行截图操作，截图成功后并发出上传图片的指令进行图片上传:
* Created by Administrator on .
4 var urls=["http://localhost:3000/","http://localhost:3000/table",""];
5 var count=0;
6 var max=urls.
7 if(urls.length!=0){
capture(urls[0]);
10 //生成随机字符串作为图片名称;
11 function createRandomName(len){
len = len || 32;
/****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.
var pwd = '';
for (i = 0; i & i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
22 //开始执行截图命令;
23 function capture(url){
var randomPicName='test'+createRandomName(Math.random()*8);
console.log("获取的随机名称="+randomPicName);
var spawn=require('child_process').
var process=spawn('phantomjs',['capture.js',url,randomPicName,count,max],{cwd:'./routes/'});
process.stdout.setEncoding('utf8');
process.stdout.on("data",function(data){
console.log(data);
console.log("spawnSTDOUT:"+JSON.stringify(data));
var code=data.replace(/[\r\n]/g,"");
console.log(code);
if(code=='success'){
var execFile=require('child_process').execF
var filePath='./pictures/'+randomPicName+'.png';
var execProcess=execFile('node',['upload.js',filePath,randomPicName,count,JSON.stringify(urls)],{cwd:'./routes/'},
function(err,stdout,stderr){
console.log("execFileSTDOUT:", stdout);
console.log("execFileSTDERR:", stderr);
process.stderr.on('data',function(data){
console.log("stderr"+data);
process.on('close',function(code){
if (code == 1) {
console.log('child process异常结束。目标：' + url);
process.on('exit',function(code){
console.log('child process exited with code ' + code);
if(count!=urls.length){
capture(urls[count]);
2.3、upload.js
主要是将图片上传至七牛并获取图片的下载地址，并将结果存储在本地txt文件中：
* Created by Administrator on .
var qiniu = require("qiniu");
var config=require('./config');
var argvs=process.argv.splice(2);
var fs=require("fs");
console.log(argvs);
10 filePath=argvs[0];
11 key=argvs[1]+'.png';
13 var count=parseInt(argvs[2]);
15 var urls=JSON.parse(argvs[3]);
16 var max=urls.
17 console.log("get the arguments:"+filePath+"---"+key+"--"+count+"---"+max);
* 第一步：初始化
* @type {string}
22 //需要填写你的 Access Key 和 Secret Key
qiniu.conf.ACCESS_KEY = config.qiniu.ACCESS_KEY;
qiniu.conf.SECRET_KEY = config.qiniu.SECRET_KEY;
25 //要上传的空间
bucket = config.qiniu.Bucket_N
* 第二步：获取上传的token
* @param bucket
* @param key
33 //构建上传策略函数，设置回调的url以及需要回调给业务服务器的数据
function uptoken(bucket, key) {
var putPolicy = new qiniu.rs.PutPolicy(bucket+":"+key);
console.log("token= "+putPolicy.token());
return putPolicy.token();
//生成上传 Token
token = uptoken(bucket, key);
* 第三步：上传图片
* @type {string}
46 //构造上传函数
function uploadFile(uptoken, key, localFile,count,max) {
var extra = new qiniu.io.PutExtra();
qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
if(!err) {
console.log("上传成功-------------------");
// 上传成功， 处理返回值
// console.log(ret.hash, ret.key, ret.persistentId);
//构建私有空间的链接
url = config.qiniu.Domain+ret.
var policy = new qiniu.rs.GetPolicy();
//生成下载链接url
var downloadUrl = policy.makeRequest(url);
//打印下载的url
console.log("downloadUrl= "+downloadUrl);
var date=new Date();
var dateString=date.toLocaleDateString();//日期;
var timeString=date.toLocaleTimeString();//时间;
var time=date.toLocaleDateString()+" "+date.toLocaleTimeString();
console.log(time);
var signalArray={
"编号":count+1,
"被截屏的路径地址":urls[count],
"上传七牛后的图片名称":key,
"下载地址":downloadUrl,
"截图时间":time
if(count==0){
// fs.appendFile(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作开始----------------------\r\n",function(err){
if(err){console.log('fail')}
fs.appendFileSync(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作开始----------------------\r\n",{encoding:'utf8'});
fs.appendFile(__dirname+'/downloadUrl.txt',JSON.stringify(signalArray)+'\r\n',function(err){
if(err){console.log("fail")}
// fs.appendFileSync(__dirname+'/downloadUrl.txt',JSON.stringify(signalArray)+'\r\n',{encoding:'utf8'});
// if((count+1)==max){
fs.appendFile(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作结束----------------------\r\n",function(err){
if(err){console.log('fail')}
fs.appendFileSync(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作结束----------------------\r\n\n",{encoding:'utf8'});
// 上传失败， 处理返回代码
console.log(err);
//调用uploadFile上传,并返回下载地址；
uploadFile(token, key, filePath,count,max);
2.4、执行：
先 npm install 安装需要的包，其次，直接输入&node routes/phantom.js&，回车，程序开始执行，下面来看看执行的结果：
2.4.1、/pictures目录下:
该目录下多了图片文件，这些就是phantomjs截图而来的图片；
2.4.2、七牛服务器
网页登陆七牛后，在我自己的bucket中可以看到，新增了很多图片文件，表示我们上传成功了：
2.4.3、本地downloadUrl.txt文件
然后我们测试下下载地址是否能正确下载图片：
以上就是整个利用nodejs+phantomjs+七牛 实现截图操作，将截图上传七牛并将下载地址存储在本地磁盘的做法。
PS：但是，有个问题就是，七牛的token设置了有效期，也就说时效过去后，之前的url就不能用了，可以再重新上传一次，或者直接在七牛上下载之前的图片。
如果有需要源码的小伙伴们可以在我github上进行下载，下载地址是：
Phantomjs_pic工程（生成echarts图表等）：；
phantomjsScreenCapture工程（实现截图并上传图片）：；
ps:此次只是对phantomjs的简单应用，如有意见和建议，欢迎广大朋友指出，谢谢！
阅读(...) 评论()Windows中Phantomjs + Casperjs安装使用方法-Windows服务器-操作系统-壹聚教程网Windows中Phantomjs + Casperjs安装使用方法
下文给大家整理了一篇关于Windows中Phantomjs + Casperjs安装使用方法，希望这个例子能帮助到各位同学哦。
安装 Phantomjs + Casperjs
Casperjs是用JavaScript编写的导航测试脚本和开发工具，这篇文章主要讲解Casperjs在windows下的安装和使用，如果你刚刚听说Casperjs，请到 CasperJS 介绍 章节了解Casperjs的功能和作用，然后再回来这里学习CasperJS的安装。
CasperJS的使用是基于PhantomJS的，所以在安装CasperJS之前要先安装PhantomJS，请到这里下载PhantomJS。在windows下安装请下载windows版本。
第一步：下载了PhantomJS后，把压缩包里的文件夹解压到D盘，重命名文件夹为phantomjs，然后在windows中添加环境变量;D:＼phantomjs到Path中。在这里先不用关心phantomjs文件夹下的内容。
第二步：接下来我们就要下载CasperJS了，点击这里进行下载，在这里我下载的是version is 1.1-beta3版本。
第三步：下载CasperJS，同样把压缩包里的文件夹解压到D盘，重命名文件夹为casperjs，然后在windows中添加环境变量;D:＼casperjs＼bin到Path中。
第四步：把在运行中运行cmd命令打开控制台，运行命令&casperjs &version，如果可以打印出版本号，恭喜你，CasperJS安装成功。
PhantomJS 实现网站截图
2. phantomjs应用场景
web回归测试
网页截图,png,pdf
网络状况监控
3. phantomjs网页截图
1、到这里下载phantomjs的Windows版本：
http://phantomjs.org/download.html
2、下载后解压，得到以下文件：
3、右键-&新建一个文件，命名为snap.js，里面输入如下内容：
var page = new WebPage(), address, output,
if (phantom.args.length & 2 || phantom.args.length & 3)
console.log('Usage: rasterize.js URL filename');
phantom.exit();
address = phantom.args[0];
output = phantom.args[1];
page.viewportSize = { width: 600, height: 600 };
page.open(address, function (status)
if (status !== 'success')
console.log('Unable to load the address!');
window.setTimeout(function ()
page.render(output);
phantom.exit();
4、在开始菜单--&搜索--&输入CMD，开启命令行模式：
5、定位到你的phantomjs目录，输入如下代码，回车后得到如下运行状态：
phantomjs snap.js .sg google.png
6、得到截图
中文网站截图乱码，安装字体解决
用phantomjs去截取中文页面的网站可能会出现乱码的情况，也就是截图中中文的位置全是方框。
解决办法就是安装字体。
在centos中执行：yum install bitmap-fonts bitmap-fonts-cjk
在ubuntu中执行：sudo apt-get install xfonts-wqy
这样再去截图中文的页面就不会出现一堆的方框了。
上一页： &&&&&下一页：相关内容PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。
获取网页快照并生成缩略图可分两步进行：
1、获取网页快照
2、生成缩略图
获取网页快照
这里我们用 phantomjs 来实现。关于 phantomjs 的详细用法可参考官方网站。http://phantomjs.org/
我的环境是CentOS 7，安装时直接下载源码，我下的版本是2.0.0，安装按照官网的说明即可。
phantomjs的调用需要一个js脚本。这个js脚本接收两个参数，分别是网址url和快照文件名称filename，脚本snap.js内容如下：
* desc: get snapshot from url
* example: phantomjs snap.js
var page = require(‘webpage‘).create();
var args = require(‘system‘).
var pageW = 1024;
var pageH = 768;
page.viewportSize = {
width: pageW,
height: pageH
var filename = args[2];
page.open(url, function (status) {
if (status !== ‘success‘) {
console.log(‘Unable to load ‘ + url + ‘ !‘);
phantom.exit();
window.setTimeout(function () {
page.clipRect = { left: 0, top: 0, width: pageW, height: pageH };
page.render(filename);
console.log(‘finish:‘, filename);
phantom.exit();
在这个脚本中还有个小小的设置，就是设置打开页面的浏览器可视区域的大小为，然后取第一屏内容。
调用命令如下：
复制代码 代码如下:
phantomjs snap.js
注意：这里执行命令的用户需要对目录有写权限。
获取的截图如下：
生成缩略图
生成缩略图用的是ImageMagick工具，ImageMagick是个非常强大的图片处理工具，可对图片进行转化（格式转换、缩放、剪切、模糊、反转等）、屏幕截图、图片显示等，详细用法可参考& 我的ImageMagick使用心得 一文。
redhat系列可使用yum安装：
复制代码 代码如下:
# yum install ImageMagick ImageMagick-devel
其他平台安装请参考官方网站：http://www.imagemagick.org/script/binary-releases.php，根据你的系统选择相应的包或自己编译源码。
我们这里只使用图片缩放工具，语法为：
convert -resize 320x240 baidu.png baidu_thumbnail.png
默认是按比率缩放，如果要强制缩放，可以在尺寸后面加感叹号：
convert -resize 320x240! baidu.png baidu_thumbnail.png
生成的缩略图如下：
如果希望将上两步自动化，可以写一个shell脚本实现：
# !/bin/bash
# desc: create snapshot from url
# example: sh createsnap.sh
IMAGE_NAME=$2
SNAPSHOT_NAME="${IMAGE_NAME}.png"
THUMBNAIL_NAME="${IMAGE_NAME}_thumbnail.png"
phantomjs snap.js $URL $SNAPSHOT_NAME
convert -resize 320x240 $SNAPSHOT_NAME $THUMBNAIL_NAME
Copyright &
All Rights Reserved &&&&&&}