使用Phantomjs和Node完成网页的截屏快照的方法

2020-06-17 05:37:15易采站长站整理

//执行成功则返回base64的数据
resp.data=stdout;
res.end(JSON.stringify(resp));
}
})
}

})

4.3)phantomjs执行的脚本,即index.js,如下:


var page = require('webpage').create();//获取webpage
var system = require('system'),
address;

if (system.args.length === 1) {//执行的命令应该包括请求的URL,否则退出phantom
console.log('Usage: URL error');
phantom.exit();
}
address = system.args[1];//请求的地址
address = address.replace(/%26/g, '&');//phantom不能识别%26,所以转为&
page.viewportSize = {//设置viewport
width: 1920,
height: 1080,
}
page.open(address, function(status) {//打开页面
setTimeout(function() {//2s之后获取base64结果,如果直接生成有可能页面还没有加载完成
if (status == 'success') {
var base64 = page.renderBase64('PNG');
console.log(base64);//将base64结果输出之后,在上边的getBase64接口中获取
phantom.exit();
}
}, 2000);
})

4.4)获取页面中部分内容的截图,可以将需要截图的DOM字符串,发送至后台,然后新建一个空的页面,使用phantom访问该空白页面,并将DOM字符串添加到预览的页面,然后生成截图,具体


app.post('/getPartPage', function(req, res) {
var xmlObj = req.body.xmlObj;//获取DOM字符串
const reqUrl = 'http:example.com/tmp.html';//要访问的空页面
var response = {
"status": '200',
};
if (xmlObj == undefined || xmlObj == '' || xmlObj == null) {
response.msg = 'DOM字符串内容未输入';
res.end(JSON.stringify(response));
}else {
fs.writeFile('tmp.txt', xmlObj, function(err) { //由于dom字符串内容过多,所以写入txt文本
if (err) {
response.msg = '生成页面失败,请稍后重试';
return res.end(JSON.stringify(response));
}

var strShell = 'phantomjs pages/index.js ' + reqUrl;//phantomjs执行的命令
process.exec(strShell, {
maxBuffer: 5000 * 1024,
}, function(error, stdout, strerr) {
if (error !== null) {
response.msg = '脚本执行错误,请稍后重试';
res.end(JSON.stringify(response));
} else {
response.data = stdout.replace("rn", "");
res.end(JSON.stringify(response));//返回结果
}

})

})

}

})

var server = app.listen(8808,function(){ //接口监听,访问的端口
var host = server.address().address
var port = server.address().port
console.log('http://%s:%s',host,port);
})

4.5)pages下的index.js内容如下所示: