java 利用PhantomJS 生成網頁縮略圖

原文：https://www.jianshu.com/p/8210a17bcdb8

原文：http://www.javashuo.com/article/p-gegphweo-w.html

PhantomJS是一個基於webkit的JavaScript API。它使用QtWebKit做爲它核心瀏覽器的功能，使用webkit來編譯解釋執行JavaScript代碼。任何你能夠在基於webkit瀏覽器作的事情，它都能作到。它不只是個隱形的瀏覽器，提供了諸如CSS選擇器、支持Web標準、DOM操做、JSON、HTML五、Canvas、SVG等，同時也提供了處理文件I/O的操做，從而使你能夠向操做系統讀寫文件等。PhantomJS的用處可謂很是普遍，諸如網絡監測、網頁截屏、無需瀏覽器的 Web 測試、頁面訪問自動化等。

PhantomJS官方地址：http://phantomjs.org/。
　　PhantomJS官方API：http://phantomjs.org/api/。
　　PhantomJS官方示例：http://phantomjs.org/examples/。
　　PhantomJS GitHub：https://github.com/ariya/phantomjs/
　　PhantomJS 下載：https://phantomjs.org/download.html

 

下載完成後解壓文件，建議爲方便使用，單獨放在一個文件夾裏，如放在D:\workspace\phantomjs裏。

到這裏，你已經成功下載安裝好PhantomJS了。那麼，打開D:\workspace\phantomjs\bin文件夾，雙擊運行phantomjs.exe，出現以下界面，那麼你就能夠運行JS代碼了。

 

image.png

能夠考慮將D:\workspace\phantomjs\bin路徑配置到環境變量中.方便往後使用

第一個PhantomJS小程序

// demo.js
var page = require('webpage').create();
phantom.cutputEncoding = 'gbk';
page.open("https://www.jianshu.com", function(status) {
  if(status === "success") {
    page.render("jianshu.png");
  } else {
    console.log("Page failed to load.");
  };
phantom.exit();
});

 

而後在cmd命令行中, 切換到demo.js全部目錄運行demo.js.

 

image.png

demo.js會將抓取到頁面的截圖保存到當前頁面
如上圖所示的 jianshu.png.

PhantomJS核心API

• webpage:它的做用主要是提供了一套能夠訪問和操做web文檔的核心方法，包括操做DOM、事件捕獲、用戶事件模擬等等。
• system:該模塊提供了一些與操做系統相關的接口，例如訪問操做系統信息、訪問系統環境變量、接受命令行參數等等與程序執行相關的系統信息。
• fs:即FileSystem。熟悉NodeJS的朋友都知道，NodeJS也內建了相關的核心模塊。fs提供了執行文件I/O操做的標準接口，如讀寫文件、刪除文件等。它使得你持久化一些文件（如logfile等）變得很是容易。
• webserver:如其名字同樣，你能夠基於它來實現本身的webserver，用來處理請求而且執行PhantomJS代碼等。

Java代碼

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

/**
 * @Description:根據網頁地址轉換成圖片
 * @Author: admin
 * @CreateDate: 2018年6月22日
 */
public class PhantomTools {
    private static String tempPath = "D:/temp/img";// 圖片保存目錄
    private static String BLANK = " ";
    // 下面內容能夠在配置文件中配置
    private static String binPath = "D:/tooles/phantomjs/phantomjs-2.1.1-windows/bin/phantomjs.exe";// 插件引入地址
    private static String jsPath = "D:/tooles/phantomjs/phantomjs-2.1.1-windows/examples/rasterize.js";// js引入地址

    // 執行cmd命令
    public static String cmd(String imgagePath, String url) {
        return binPath + BLANK + jsPath + BLANK + url + BLANK + imgagePath;
    }
    //關閉命令
    public static void close(Process process, BufferedReader bufferedReader) throws IOException {
        if (bufferedReader != null) {
            bufferedReader.close();
        }
        if (process != null) {
            process.destroy();
            process = null;
        }
    }
    /**
     * @param userId 
     * @param url
     * @throws IOException 
     */
    public static void printUrlScreen2jpg(String url) throws IOException{
        String imgagePath = tempPath+"/"+System.currentTimeMillis()+".png";//圖片路徑
        //Java中使用Runtime和Process類運行外部程序
        Process process = Runtime.getRuntime().exec(cmd(imgagePath,url));
        InputStream inputStream = process.getInputStream();
        BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
        String tmp = "";
        while ((tmp = reader.readLine()) != null) {
            close(process,reader);
        }
        System.out.println("success");
    }
    
    public static void main(String[] args) throws IOException {
        String url = "https://www.baidu.com/";//以百度網站首頁爲例
        PhantomTools.printUrlScreen2jpg(url);
    }
}

負責截圖腳本examples文件夾下rasterize.js以下：

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    phantom.exit(1);
} else {
    address = system.args[1];//傳入url地址
    output = system.args[2];//輸出圖片的地址
    page.viewportSize = { width: 800, height: 1800 };//自定義定義寬高
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);//防止圖片加載過慢
        }
    });
}