nodejs如何将html页面转换成长图

在简书上看见一个长微博图片的功能,想用nodejs去实现一下,添加到自己的网站上。
nodejs如何将html也页面转换成长图

  • 安装所需模块phantom

    npm install phantom
    
  • 具体实现代码如下:

    var phantom = require("phantom");
    html_image("https://www.baidu.com","baidu");
    /**
    * html转换成长图
    * @param  {[type]} src      链接
    * @param  {[type]} img_name 文件名字
    */
    function html_image(src,img_name) {
    var _ph, _page;
    phantom
        .create()
        .then(ph => {
            _ph = ph;
            return _ph.createPage();
        })
        .then(page => {
            _page = page;
            return _page.open(src);
        })
        .then(status => {
            return _page.property("content");
        })
        .then(content => {
            _page.render(img_name + ".png");
            _page.close();
            _ph.exit();
        })
        .catch(e => console.log(e));
    }
    
    参考:https://github.com/amir20/phantomjs-node/blob/master/examples/simple.js
    最后使用node 运行这个文件即可生成长图
    首页的那段代码尝试了很多次,都没效果所以使用的这个。
  • 可能遇到的问题

mac:

nodejs如何将html页面转换成长图

1.如果安装pnantom的时候到这个位置报错,或则安装特别慢,可以退出这个安装。复制红框上面的链接(可能和我的不一样),自己去下载这个压缩文件,下载完成之后保存到红框选中的位置(可能和我的不一样)。

注意:不要解压!不要解压!不要解压!重要的事情说三遍!

2.重新安装phantom
npm uninstall phantom
npm install phantom

centos:

1.安装的时候和mac上面一样,可能会遇到这样一个问题:

nodejs如何将html页面转换成长图
遇到这个问题说明你的centos没有安装解压tar的工具(自行使用yum安装)

2.执行代码报 wirte EPIPE(错误信息中包含这个词)

nodejs如何将html页面转换成长图
你的centos里面缺少东西(我也不知道那个是什么,只能用东西代替,嘿嘿),执行下面代码即可:

yum install libXext  libXrender  fontconfig  libfontconfig.so.1

其他类似的wirte EPIPE问题,可以看这个:https://github.com/amir20/phantomjs-node/issues/649

3.最后还有一个关于字体的问题,(文字图标什么的显示不出来)具体表现如下图:

nodejs如何将html页面转换成长图
解决方法:
在centos当中找到一下路径,找到之后,拷贝一个字体文件进去。

/usr/share/fonts

转载请注明出处!

查看微博长图