java使用phantomjs進(jìn)行截圖

斷斷續(xù)續(xù)查找資料、驗(yàn)證不同的實(shí)現(xiàn)方法終于算基本搞定了頁(yè)面截圖，因?yàn)橹虚g過(guò)程曲折花費(fèi)較多時(shí)間，分享出來(lái)幫助大家快速實(shí)現(xiàn)截圖

為什么選用phantomjs進(jìn)行截圖

截圖可以實(shí)現(xiàn)的方式有很多，比如：

  • selenium
  • HtmlUnit
  • Html2Image
    、、、and so on
    但是這些實(shí)現(xiàn)的截圖效果都不好。selenium只能實(shí)現(xiàn)截屏，不能截取整個(gè)頁(yè)面，而HtmlUnit、Html2Image對(duì)js的支持效果并不好，截下來(lái)的圖會(huì)有很多空白。phantomjs就是萬(wàn)精油了，既能截取整個(gè)頁(yè)面，對(duì)js支持的效果又好

前期準(zhǔn)備

安裝phantomjs。mac os

brew install phantomjs

命令行的方式進(jìn)行截圖

安裝以后我們就可以小試牛刀了

  • 打開(kāi)終端，輸入以下命令：
/Users/hetiantian/SoftWares/phantomjs/bin/phantomjs
/Users/hetiantian/SoftWares/phantomjs/examples/rasterize.js
https://juejin.im/post/5bb24bafe51d450e4437fd96
/Users/hetiantian/Desktop/juejin-command.png

  • 查看效果


    juejin-command.png

    發(fā)現(xiàn)圖片沒(méi)有加載好


    難受

來(lái)看以下剛剛的命令行：
/Users/hetiantian/SoftWares/phantomjs/bin/phantomjs：phantomjs可執(zhí)行文件保存地址
/Users/hetiantian/SoftWares/phantomjs/examples/rasterize.js：rasterize.js文件地址
這段命令可以理解為用phantomjs去運(yùn)行rasterize.js文件，所以要想解決圖片空白的問(wèn)題我們需要去看一下rasterize.js文件。

"use strict";
var page = require('webpage').create(),
    system = require('system'),
    address, output, size, pageWidth, pageHeight;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    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);
        }
    });
}

嘗試一：
對(duì)page.viewportSize = { width: 600, height: 600 };產(chǎn)生了疑問(wèn)???
把height調(diào)大十倍，發(fā)現(xiàn)基本是完美截圖了，但是如果頁(yè)面的篇幅特別短，會(huì)發(fā)現(xiàn)有瑕疵，下面留有一大片空白。原因：page.viewportSize = { width: 600, height: 600 };設(shè)置的是初始打開(kāi)瀏覽器的大小，通過(guò)增大這個(gè)值可以加載js。如果我們能拿到實(shí)際頁(yè)面的大小在設(shè)置height大小，但是不，我不能。

難受.jpeg

并且不能接受預(yù)先設(shè)定一個(gè)很大的height值，比如30000，因?yàn)椴荒芙邮艿紫铝舭椎男Ч?br> 嘗試二：
在window.setTimeout方法之前加入以下代碼

 page.evaluate(function(){
     scrollBy(0, 18000); 
});

無(wú)奈evaluate里不能在用for循環(huán)了，前端渣渣真的不知道如何改，遂放棄

java代碼方式進(jìn)行截圖

  • 需要的依賴(lài)
       <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>2.45.0</version>
        </dependency>

        <dependency>
            <groupId>com.codeborne</groupId>
            <artifactId>phantomjsdriver</artifactId>
            <version>1.2.1</version>
            <!-- this will _always_ be behind -->
            <exclusions>
                <exclusion>
                    <groupId>org.seleniumhq.selenium</groupId>
                    <artifactId>selenium-java</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.seleniumhq.selenium</groupId>
                    <artifactId>selenium-remote-driver</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
  • 代碼實(shí)現(xiàn)
public class PhantomjsTest2 {
    public static void main(String[] args) throws InterruptedException, IOException {
        //設(shè)置必要參數(shù)
        DesiredCapabilities dcaps = new DesiredCapabilities();
        //ssl證書(shū)支持
        dcaps.setCapability("acceptSslCerts", true);
        //截屏支持
        dcaps.setCapability("takesScreenshot", true);
        //css搜索支持
        dcaps.setCapability("cssSelectorsEnabled", true);
        //js支持
        dcaps.setJavascriptEnabled(true);
        //驅(qū)動(dòng)支持（第二參數(shù)表明的是你的phantomjs引擎所在的路徑）
        dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY,
                "/Users/hetiantian/SoftWares/phantomjs/bin/phantomjs");
        //創(chuàng)建無(wú)界面瀏覽器對(duì)象
        PhantomJSDriver driver = new PhantomJSDriver(dcaps);

        //設(shè)置隱性等待（作用于全局）
        driver.manage().timeouts().implicitlyWait(1, TimeUnit.SECONDS);
        long start = System.currentTimeMillis();
        //打開(kāi)頁(yè)面
        driver.get("https://juejin.im/post/5bb24bafe51d450e4437fd96");
        Thread.sleep(30 * 1000);
        JavascriptExecutor js = driver;
        for (int i = 0; i < 33; i++) {
            js.executeScript("window.scrollBy(0,1000)");
            //睡眠10s等js加載完成
            Thread.sleep(5 * 1000);
        }
        //指定了OutputType.FILE做為參數(shù)傳遞給getScreenshotAs()方法，其含義是將截取的屏幕以文件形式返回。
        File srcFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        Thread.sleep(3000);
        //利用FileUtils工具類(lèi)的copyFile()方法保存getScreenshotAs()返回的文件對(duì)象
        FileUtils.copyFile(srcFile, new File("/Users/hetiantian/Desktop/juejin-01.png"));
        System.out.println("耗時(shí)：" + (System.currentTimeMillis() - start) + " 毫秒");
    }
}

注釋已經(jīng)夠詳細(xì)了不多說(shuō)了。唯一說(shuō)一點(diǎn)：通過(guò)去執(zhí)行js代碼實(shí)現(xiàn)頁(yè)面滑動(dòng)，并且每次滑動(dòng)都會(huì)通過(guò)睡眠保證有時(shí)間可以將 js加載進(jìn)來(lái)。會(huì)調(diào)用33次滑動(dòng)，因?yàn)閜hantomjs截取最大的高度為32767px(int 32位的最大整數(shù))，所以滑動(dòng)33次可以保證能夠截取到的最大頁(yè)面部分其js已經(jīng)是加載完成了的
附：window.scrollBy(0,1000)、window.scrollTo(0,1000)的區(qū)別

window.scrollBy(0,1000)
window.scrollBy(0,1000)
執(zhí)行到這里頁(yè)面滑動(dòng)1000+1000px
window.scrollTo(0,1000)
window.scrollTo(0,1000)
執(zhí)行到這里頁(yè)面滑動(dòng)到1000px處

window.scrollTo(0, document.body.scrollHeight可以滑動(dòng)到頁(yè)面底部，不選擇有兩個(gè)原因：
1）一下子滑動(dòng)到底部js會(huì)來(lái)不及被加載
2）有些頁(yè)面沒(méi)有底部，可以一直滑動(dòng)加載
注：這里所說(shuō)的js來(lái)不及加載指的是：想要截取頁(yè)面的js來(lái)不及加載
該方式的缺點(diǎn)：比較費(fèi)時(shí)間。果然熊和魚(yú)掌不可兼得也，統(tǒng)計(jì)了一下截取一張圖片大概需要四分多鐘
===================更新于2018.10.15====================

phantomjs的缺點(diǎn)

  • 有最大截圖長(zhǎng)度32767px
  • 可能會(huì)出現(xiàn)跨越的問(wèn)題
  • 需要裝瀏覽器驅(qū)動(dòng)

可以使用google的puppeteer完成截圖功能：
附簡(jiǎn)單demo:

const puppeteer = require('/usr/local/lib/node_modules/puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    // await page.goto('https://www.zhihu.com/question/22263777');
    await page.goto('http://www.iqiyi.com');
    await page.setViewport({
        width: 1200,
        height: 800
    });

    await autoScroll(page);

    await page.screenshot({
        path: 'jd.png',
        fullPage: true
    });

    await browser.close();
})();


function autoScroll(page) {
    return page.evaluate(() => {
        return new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if (totalHeight >= scrollHeight) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        })
    });
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評(píng)論 25贊 709
  • 用兩張圖告訴你，為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 14,024評(píng)論 2贊 59
  • 從出生相伴的你 不知何時(shí)離開(kāi)了 不帶一點(diǎn)猶豫和傷感 和傷心為伍的你枯萎在土地里 是悲痛太炙熱 抑或你已經(jīng)習(xí)慣這塵世...
    傷陽(yáng)閱讀 485評(píng)論 0贊 1
  • 感賞自己一大早起床學(xué)習(xí)，大聲讀書(shū)，也帶動(dòng)了同事學(xué)習(xí)的積極性?，F(xiàn)在感覺(jué)到自己是一個(gè)一直在學(xué)習(xí)中的人，從來(lái)沒(méi)有止步不前...
    阿梨梨梨閱讀 180評(píng)論 0贊 3
  • 今天上午給兒子做好早飯，哄他起床吃飯，習(xí)慣性跟我撒嬌的他依舊磨蹭了會(huì)才起床，我等著他洗漱完過(guò)來(lái)吃飯，早飯后，...
    鍇博麻麻閱讀 147評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容