node+puppeteer node+selenium-webdriver网页截图

• Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 + headless 模式运行，但是可以通过修改配置文件运行“有头”模式。
  本文通过node+puppeteer实现网页界面长截图，需要注意的是，puppeteer只能在chrome截图

• 运行一下代码之前需要先安装puppeteer依赖

npm i puppeteer

运行代码

node text.js

text.js

/**
 * 在无头浏览器中将一个网页截图保存为图片
 */

 const puppeteer = require('puppeteer');

 const saveScreenshot = async (url) => {
 
     // 启动浏览器
     const browser = await puppeteer.launch();
     // 打开页面
     const page = await browser.newPage();
     // 设置浏览器视窗
     page.setViewport({
         width: 1920,
         height: 768,
     });
         // 地址栏输入网页地址
    await page.goto(url, {
        // 等界面加载完
        waitUntil: 'networkidle0'
    });
    await page.screenshot({ path: `./${new Date().getMinutes()}_${new Date().getSeconds()}.png`, fullPage: true });
    // 关闭浏览器
    console.log('[ over ]')
    await browser.close();
 };

    saveScreenshot('https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6');

运行效果图

• node还可以使用selenium-webdriver库进行截图，该库使用方法如下，selenium-webdriver可以指定浏览器进行截图，包括chrome、firefork、edge等
• 使用之前安装依赖即可

npm install selenium-webdriver

npm install geckodriver

var webdriver = require('selenium-webdriver');
var fs = require('fs');
require('geckodriver');

const take = async () => {
  console.log('[ 111 ]', 111)
  const { Builder } = webdriver
  let driver = await new Builder().forBrowser('firefox').build();
  driver.get('https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6')
  setTimeout(() => {
    driver.takeScreenshot().then(function(data){
      var base64Data = data.replace(/^data:image\/png;base64,/,"")
      fs.writeFile("./out.png", base64Data, 'base64', function(err) {
          if(err) console.log(err);
      });
      driver.close()
      driver.quit()
    });
  }, 3000)
  }
take()