前言
最近工作中遇到一個需求，需要實現截圖功能，斷斷續續查找資料、驗證不同的實現方法終于算基本搞定了頁面截圖，因為中間過程曲折花費較多時間，分享出來幫助大家快速實現截圖
為什么選用phantomjs進行截圖
截圖可以實現的方式有很多，比如：
- selenium
- htmlunit
- html2image、、、and so on但是這些實現的截圖效果都不好。selenium只能實現截屏，不能截取整個頁面，而htmlunit、html2image對js的支持效果并不好，截下來的圖會有很多空白。phantomjs就是萬精油了，既能截取整個頁面，對js支持的效果又好
plantomjs提供了如 css 選擇器、dom操作、json、html5、canvas、svg 等。phantomjs 的用處很廣泛，如網絡監控、網頁截屏、頁面訪問自動化、無需瀏覽器的 web 測試等，這里只用到網頁截屏。
前期準備
安裝phantomjs。mac os
java" id="highlighter_457205">
|
1
|
brew install phantomjs |
命令行的方式進行截圖
安裝以后我們就可以小試牛刀了
打開終端，輸入以下命令：
|
1
2
3
4
|
/users/hetiantian/softwares/phantomjs/bin/phantomjs/users/hetiantian/softwares/phantomjs/examples/rasterize.jshttps://juejin.im/post/5bb24bafe51d450e4437fd96/users/hetiantian/desktop/juejin-command.png |
查看效果
發現圖片沒有加載好
來看以下剛剛的命令行：
/users/hetiantian/softwares/phantomjs/bin/phantomjs：phantomjs可執行文件保存地址
/users/hetiantian/softwares/phantomjs/examples/rasterize.js：rasterize.js文件地址
這段命令可以理解為用phantomjs去運行rasterize.js文件，所以要想解決圖片空白的問題我們需要去看一下rasterize.js文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
"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); } });} |
嘗試一：
對page.viewportsize = { width: 600, height: 600 };產生了疑問
