目标网页生成截图的方法,摆脱手动大量截图的烦恼
对目标网页生成截图可使用的方法有如下几种
- 手动操作
- phantomjs
- cutycapt
- chromium 或 firefox 的 headless 模式
本文通过node的puppeteer操作chrome headless模式生成截图
实际项目在此更新：
一个用于网页截图及相关服务的docker镜像，支持命令行和http接口。使用node、puppeteer和chrome headless实现。
a docker image for web page screenshot and related services, supporting both command line and http interface. implemented with node, puppeteer and chrome headless
在docker中运行的方法
1. 获取镜像
有两种方法获取镜像：
-
从docker hub获取镜像
docker pull eyunzhu/webpage-screenshot -
克隆仓库自己构建镜像
git clone https://github.com/eyunzhu/webpage-screenshot cd webpage-screenshot docker build -t eyunzhu/webpage-screenshot .
2. 运行容器
docker run -d -p 1234:8080 --cap-add sys_admin --name screenshot-service eyunzhu/webpage-screenshot
该镜像的工作目录为/app，本地可挂载目录/app/data，用作保存截图的目录，(即请求参数p可以设置为data)
3. 调用服务
提供两种调用服务的方式：
-
通过http接口方式
使用以下url获取指定网站的截图：
http://ip:{port}/?url=https://eyunzhu.com请求参数
参数 描述 默认值 url 目标url j9九游会真人游戏第一品牌-九游会官网真人游戏第一品牌 w 截图宽度 1470 h 截图高度 780 q 截图质量百分比 100 d 下载标志（如果非空，下载图像） p 服务器保存路径（如果非空，在服务器上保存图像，确保路径存在） n 图像名称 screenshot.jpeg f 如果非空，捕获完整页面 -
通过命令行方式
# 进入上述启动的容器，然后执行以下示例命令生成截图 # 指定url和宽度参数 node cmd.js --url https://eyunzhu.com --width 800命令行参数
options: --version 显示版本号 [布尔] -u, --url 要截图的url [字符串] [默认值: "https://eyunzhu.com"] -w, --width 视口宽度 [数字] [默认值: 1470] -h, --height 视口高度 [数字] [默认值: 780] -q, --quality 截图质量 [数字] [默认值: 100] -p, --path 保存截图的目录 [字符串] [默认值: "data"] -n, --name 截图文件名称 [字符串] [默认值: "screenshot.jpeg"] -f, --fullpage 捕获完整页面 [布尔] [默认值: false] --help 显示帮助
在本地电脑中使用的方法
本地使用前提需要安装node、puppeteer、yargs、chrome浏览器。
以下在mac下演示。
# 前提安装好node、chrome浏览器
git clone https://github.com/eyunzhu/webpage-screenshot
cd webpage-screenshot
-
http方式，运行
http.jsnpm install puppeteer yargs # 安装puppeteer、yargs// 运行脚本前先修改 http.js 脚本中的 http 服务端口和 google chrome stable 路径 const port = 8080; const browser = await puppeteer.launch({ // 此路径请根据系统中安装 google chrome stable 的实际情况更改；mac 下安装了 chrome 浏览器时，可注释掉不写 //executablepath:'/usr/bin/google-chrome-stable', defaultviewport: { width, height } });node http.js # 启动服务服务启动后即可通过 http 进行调用。
-
cmd方式，运行
cmd.js// 运行脚本前先修改 cmd.js 脚本中的 google chrome stable 路径 const browser = await puppeteer.launch({ // 此路径请根据系统中安装 google chrome stable 的实际情况更改；mac 下安装了 chrome 浏览器时，可注释掉不写 //executablepath:'/usr/bin/google-chrome-stable', defaultviewport: { width, height } });# 开始使用 node cmd.js --help
附录
附上node使用puppeteer操作浏览器截图的代码
前提是安装了node、puppeteer库、chrome浏览器
const puppeteer = require('puppeteer');
async function autoscroll(page) {
return page.evaluate(() => {
return new promise((resolve, reject) => {
let totalheight = 0;
let distance = 100;
let timer = setinterval(() => {
let scrollheight = document.body.scrollheight;
window.scrollby(0, distance);
totalheight = distance;
if (totalheight >= scrollheight) {
clearinterval(timer);
resolve();
}
}, 100);
})
});
}
async function main() {
// const browser = await puppeteer.launch();
const browser = await puppeteer.launch(
{
//关闭无头模式
headless: false,
//全屏打开浏览器
args: ['--start-maximized'],
//设置浏览器页面尺寸
defaultviewport: { width: 1474, height: 864 }
});
const page = await browser.newpage();
await page.goto('https://eyunzhu.com/', { waituntil: 'networkidle2' });//networkidle2 表示 不但加载了所有 html、css、javascript 等静态资源，也完成了一些必要的动态数据请求
// await page.waitforselector('body');//等待元素出现
// await page.waitfortimeout(5000);//等待5秒加载
// // 对元素截图
// let body = await page.$('.download_js')
// await body.screenshot({
// path: 'download.png'
// })
// 滚动
await autoscroll(page)
await page.screenshot({
path: 'apex.jpg',
quality: 15, // 设置截图质量为 15%
fullpage: true,//是否截全页，如果截取全页请先滚动页面
});
await browser.close();
}
main()
另
在mac中也可直接命令行操作chrome截图
/applications/google\ chrome.app/contents/macos/google\ chrome --no-sandbox --disable-setuid-sandbox --headless --disable-gpu --window-size=1024x768 --screenshot --screenshot-quality=90 https://eyunzhu.com
目前评论：0