原创 使用PhantomJS实现网页快照

分类:Node.js 浏览:2,712次
使用PhantomJS实现网页快照

前言

公司要搞画谱的步骤截图,无奈ios截图太消耗手机内存了,影响用户体验,只好生成好图片交给IOS了。

简介

PhantomJS 是一个无界面的 Webkit 内核浏览器,对 DOM 操作、CSS 选择器、JSON、 Canvas 和 SVG 等 WEB 标准有非常快的、原生的支持。总之 PhantomJS 就是一个有 API 的浏览器,可以用来进行网页截图、自动化测试等。
官网:http://phantomjs.org/build.html

npm安装PhantomJS

PHANTOMJS_CDNURL=https://npm.taobao.org/dist/phantomjs npm install -g phantomjs --registry=https://registry.npm.taobao.org --no-proxy

来自:phantomjs被墙解决办法

如果中文显示不出来的话说明没有安装对应的字体,debian/ubuntu 可以安装 xfonts-wqy, centos 的话可以安装 wqy-bitmapfont (需下载)或者 bitmap -fonts 和 bitmap-fonts-cjk,安装完之后中文应该就可以正常显示了。

安装 xfonts-wqy 命令:

sudo apt-get install xfonts-wqy

使用PhantomJS截图

这里有官方DEMO

https://raw.github.com/ariya/phantomjs/master/examples/rasterize.js
phantomjs rasterize.js https://www.janecc.com janecc.png

我司,需要根据画谱id来执行,这里用到nodejs](https://janecc.com/tag/nodejs/ "查看关于 nodejs 的相关文章")的子进程调用shell命令

var process = require('child_process')
function onShell(id) {
    var shell = 'phantomjs ./rasterize.js https://janecc.cdn.ixu.me/page/' + id ./public/upload/' + id + '.png'
    return new Promise(function(resolve, reject) {
        process.exec(shell, function(error, stdout, stderr) {
            console.log(error);
            if (error !== null) { //当成功时,error 会是 null
                console.log('exec error: ' + error);
                reject()
            }
            resolve()
            console.log('stdout:' + stdout);
            console.log('stderr:' + stderr);
        });
    })
}

上线

上线后用PM2来监控进程,最后通过nginx代理服务端口

我司生成快照思路

根据检测画谱修改时间>快照生成时间,就会更新快照,最后通过express的路由生成接口提供给IOS图片链接

作者: JaneCC最后编辑于:2017-05-17 15:29
坚持把简单的事情做好就是不简单,坚持把平凡的事情做好就是不平凡。所谓成功,就是在平凡中做出不平凡的坚持。

--JaneCC

众说纷纭Comments1条留言

  1. 沙发
    :

    😳 😮 😮 😮 😮 😮 汉字

    来自Google Chrome 53.0.2785.104Windows 7的精彩回复 [回复]

发表感言