PhantomJS、Puppeteer、SlimerJS网页截屏

简介: PhantomJS、Puppeteer、SlimerJS网页截屏

PhantomJS

PhantomJs(使用QtWebKit内核)已经停止维护了

baidu.js

// 创建一个网页实例
var page = require('webpage').create();
// 加载页面
page.open('https://www.baidu.com/', function () {
    // 给网页截屏保存
    page.render('baidu.png');
    phantom.exit();
})
$ phantomjs baidu.js

Puppeteer(chrome headless)

文档:https://github.com/puppeteer/puppeteer

安装

$ npm i puppeteer


example.js

const puppeteer = require("puppeteer");
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 设置视窗大小
  await page.setViewport({
    width: 1400,
    height: 800,
  });
  // 打开页面
  await page.goto("https://zhuanlan.zhihu.com/p/76237595"); 
  // path: 截屏文件保存路径
  await page.screenshot({ path: "example.png" ,fullPage: true }) 
  await browser.close();
})();

SlimerJS

SlimerJS是基于火狐的浏览器引擎Gecko

Firefox. version: 53.0 to 59.0

下载地址:https://slimerjs.org/download.html

安装依赖

npm install slimerjs
var page = require('webpage').create();
page.open("https://mp.weixin.qq.com/s/YHeEjam6lze8OgyiPBWorQ", function (status) {
    page.viewportSize = { width:1024, height:768 };
    page.render('screenshot.png');
    slimer.exit()
});
$ npx slimerjs screenshot.js

参考

JS 实现网页截屏五种方法

相关文章
|
27天前
|
Web App开发 Java 测试技术
使用selenium+chromedriver+xpath爬取动态加载信息(一)
使用selenium+chromedriver+xpath爬取动态加载信息(一)
42 1
|
27天前
使用selenium+chromedriver+xpath爬取动态加载信息(二)
使用selenium+chromedriver+xpath爬取动态加载信息(二)
35 0
|
Web App开发 JSON Unix
浏览器:好用的浏览器插件,亲测好用
浏览器:好用的浏览器插件,亲测好用
205 0
|
Web App开发 数据采集
解决Puppeteer内置的Chromium无法自动播放音频问题
解决Puppeteer内置的Chromium无法自动播放音频问题
205 0
|
Web App开发
Chrome 调试手机端网页
Chrome 调试手机端网页
127 0
Chrome 调试手机端网页
常用的浏览器插件
很多人为了提高浏览器效率,或者增强功能,会安装一些扩展插件、脚本等。
常用的浏览器插件
|
Web App开发
Chrome浏览器网页截屏
Chrome浏览器网页截屏
106 0
Chrome浏览器网页截屏
|
Web App开发 开发者
谷歌浏览器油猴插件安装教程,让你的浏览器更加强大
谷歌浏览器油猴插件安装教程,让你的浏览器更加强大
1021 0
谷歌浏览器油猴插件安装教程,让你的浏览器更加强大
C#编程-139:制作自己的浏览器
C#编程-139:制作自己的浏览器
239 0
|
Web App开发 搜索推荐 前端开发
Chrome插件我只服你——10w人都在使用的浏览器插件
Chrome插件我只服你——10w人都在使用的浏览器插件
Chrome插件我只服你——10w人都在使用的浏览器插件