# page-render

**Repository Path**: chindar/page-render

## Basic Information

- **Project Name**: page-render
- **Description**: Phantomjs 根据freemarker模板将html渲染成图片
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-06
- **Last Updated**: 2021-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PhantomJS在服务端根据模板渲染图片

 **主要功能：给定模板html，模板所需数据，生成图片，并以Base64字符串返回。** 

## 1. PhantomJS 介绍

[PhantomJS](http://phantomjs.org/)是一个不需要浏览器的富客户端。
    
    官方介绍：PhantomJS是一个基于 WebKit 的服务器端JavaScript API。它全面支持web而不需浏览器支持，支持各种Web标准：DOM处理，CSS选择器, JSON，Canvas，和SVG。
    PhantomJS常用于页面自动化，网络监测，网页截屏，以及无界面测试等。
    
    通常我们使用PhantomJS作为爬虫工具。传统的爬虫只能单纯地爬取html的代码，对于js渲染的页面，就无法爬取，如Echarts统计图。而PhantomJS正可以解决此类问题。

>我们可以这么理解PhantomJS，PhantomJS是一个无界面、可运行脚本的谷歌浏览器。
        
### 1.1 PhantomJS下载安装

PhantomJS安装非常简单，官网[http://phantomjs.org/download.html](http://phantomjs.org/download.html)下载最新的安装包，
安装包有Windows，Mac OS X, Linux 64/32 bit，选择对应的版本下载解压即可使用，在下载包里有个example文件夹，里面对应了许多示例供参考。

为方便使用，我们将phantomjs添加至环境变量中。

    windows：
    右键我的电脑->属性->高级系统设置->高级->环境变量->用户变量/系统变量->Path=D:\phantomjs\bin;
    或
    cmd->set path=%path%;D:\phantomjs\bin
    
    linux:
    wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
    tar -xvf phantomjs-2.1.1-linux-x86_64.tar.bz2
    mv phantomjs-2.1.1-linux-x86_64 /usr/local/phantomjs
    rm -rf phantomjs-2.1.1-linux-x86_64.tar.bz2
    ln -s /usr/local/phantomjs/bin/phantomjs /usr/bin/phantomjs

### 1.2 PhantomJS页面加载

创建`pageload.js`脚本：

```javascript
"use strict";
var page = require('webpage').create();
page.open('https://www.baidu.com/', function () {
    page.render('baidu.png');
    phantom.exit();
});
```

运行`phantomjs pageload.js`即可在同级目录下得到一张`baidu.png`的图片

>由于它的这个特性，PhantomJS 可以用来“网页截屏”，截取网页的快照，比如将网页、SVG存成图片，PDF等

>将页面渲染成图片也是基于page.render此功能

## 将page-render封装成docker镜像
> 此脚本对外暴露端口默认为: 9090
```shell script
docker build -t phantomjs:v1 .
docker run -p 9090:9090 --name phantomjs -d phantomjs:v1
```
或
```shell script
docker-compose up -d
```