nodejs生成网页快照base64图片

首先，npm install phantomjs-prebuilt --save-dev

这是在node上能够执行shell脚本的前置条件
若npm太慢可选择cnpm执行

定义接口

const childProcess = require(‘child_process’);//执行命令行所需， 是node内置对象
const phantomjs = require(‘phantomjs-prebuilt’);
const binPath = phantomjs.path;
const path = require(‘path’);
router.post(’/getBase64’, function (req, res, next) {
let params = paramUtil.getParams(req); // 自定义方法，获取req中的参数
let { url } = params;
res.writeHead(200,{‘Content-Type’:‘text/html;charset=utf-8’});// 改写返回头
let resp={ // 定义返回内容
“status”:‘200’
}
var childArgs = [path.join(__dirname, ‘phantomjs-script.js’), url];
childProcess.execFile(binPath, childArgs, { // 执行
maxBuffer:5000*1024 // 改写buffer最大值
},function(err, stdout, stderr) {
if(err!==null){
resp.msg=‘转换失败，稍后重试’;
res.end(JSON.stringify(resp));
} else {
resp.data=stdout;
res.end(JSON.stringify(resp));
}
});
});

phantomjs-script.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);
})

前端接口调用

let me = this;
let url = ‘http://nodejs.cn/api/synopsis.html’; // 快照原文件地址，此处是一个html页面
this.getBase64({url}).then((resp) => {
me.pageSrc = ‘data:image/jpg;base64,’+resp;// 把返回结果添加前缀，可用于img标签的src中使用
});

《img :src=“pageSrc” alt="" />