Puppeteer让你网页操作更简单(1)屏幕截图

这篇具有很好参考价值的文章主要介绍了Puppeteer让你网页操作更简单(1)屏幕截图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Puppeteer让你网页操作更简单(1)屏幕截图,react.js,javascript,前端,node.js

网页自动化设计爬虫工具 中就使用了Puppeteer进行对网页自动化处理,今天就来看看它是什么东西!

我们将学习什么?

在本教程中,您将学习如何使用JavaScript自动化和抓取 web。 为此,我们将使用Puppeteer。 Puppeteer是一个Node库API,允许我们控制无头Chrome。 无头Chrome是运行Chrome浏览器而不实际运行Chrome的一种方式。

如果这都没有任何意义,您真正需要知道的就是我们将编写将自动化Google Chrome的JavaScript代码。

在开始之前

在开始之前,您的电脑上需要安装Node 8+。 您可以在此处安装它。 请确保选择“Current”版本,因为它是8+。

如果您以前从未使用过Node并想学习它,请查看:[学习Node JS —— 3个最佳在线Node JS课程](https://codeburst.io/learn-node- js-the-3-best-online-node-js-courses-87e5841f4c47)。

安装Node后,创建一个新项目文件夹并安装Puppeteer。 Puppeteer随附了一个与API兼容的最新版本的Chromium:

npm install --save puppeteer

例1 —— 拍摄屏幕截图

安装Puppeteer后,我们将首先走through一个简单的示例。 此示例直接来自Puppeteer文档(仅做少量更改)。 我们将浏览的代码将为您告知的任何网站拍摄屏幕截图。

首先,创建一个名为test.js的文件,并复制以下代码:

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

让我们逐行浏览这个示例。

  • 第1行: 我们需要之前安装的Puppeteer依赖项
  • 第3-10行: 这是我们的main函数getPic()。 这个函数将保存我们所有的自动化代码。
  • **第12行:**在第12行上,我们正在调用我们的getPic()函数。 (运行功能)。

需要注意的重要一点是我们的getPic()函数是一个async函数,并使用新的ES 2017 async/await功能。 由于此函数是异步的,因此在调用时它返回一个Promise。 当async函数最终返回一个值时,Promise将解析(如果错误,则Reject)。

由于我们使用了async函数,因此我们可以使用await表达式,该表达式将暂停函数执行并等待Promise解析然后再继续。 如果现在还不明白也没关系。 随着教程的继续,这将变得更加清晰。

现在我们已经概述了main函数,让我们深入研究其内部工作原理:

  • 第4行:
const browser = await puppeteer.launch(); 

这是我们实际启动puppeteer的地方。 我们本质上是启动了一个Chrome实例并将其设置为我们新创建的browser变量。 因为我们也使用了await关键字,所以函数将在这里暂停,直到我们的Promise解析(直到我们成功创建了我们的Chrome实例,或者错误)

  • 第5行:
const page = await browser.newPage();

在这里,我们在自动化浏览器中创建一个新页面。 我们等待新页面打开并将其保存到我们的page变量中。

  • 第6行:
await page.goto('https://google.com');

使用我们在上一行代码中创建的page,我们现在可以告诉我们的page导航到一个URL。 在这个例子中,我们正在导航到谷歌。 我们的代码将暂停,直到页面加载完毕。

  • 第7行:
await page.screenshot({path: 'google.png'});

现在我们告诉Puppeteer拍摄当前页面的屏幕截图。 screenshot()方法以对象作为参数,我们可以在其中自定义我们的.png屏幕截图的保存位置。 同样,我们使用了await关键字,所以我们的代码在操作发生时会暂停。

  • 第9行:
await browser.close();

最后,我们已经到达getPic()函数的末尾,我们关闭browser

运行示例

您可以使用Node运行上面的示例代码:

node test.js

这是生成的屏幕截图:

Puppeteer让你网页操作更简单(1)屏幕截图,react.js,javascript,前端,node.js

太棒了! 为了增加更多乐趣(和更容易的调试),我们可以以非无头方式运行我们的代码。

这确切地意味着什么? 自己试试看。 将代码中的第4行从此更改:

const browser = await puppeteer.launch();

至此:

const browser = await puppeteer.launch({headless: false}); 

然后用Node再次运行:

node test.js

相当酷吧? 当我们运行{headless: false}时,您可以实际观察Google Chrome按指示浏览代码的工作方式。

在继续之前,我们将对此代码执行最后一项操作。 还记得我们的截图有点偏离中心吗? 好吧,那是因为我们的页面有点小。 我们可以通过添加这行代码来更改页面大小:

await page.setViewport({width: 1000, height: 500})

这会产生更好看的截图:

Puppeteer让你网页操作更简单(1)屏幕截图,react.js,javascript,前端,node.js

这是此示例的最终代码:

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.setViewport({width: 1000, height: 500})
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

Puppeteer让你网页操作更简单(1)屏幕截图,react.js,javascript,前端,node.js文章来源地址https://www.toymoban.com/news/detail-800127.html

到了这里,关于Puppeteer让你网页操作更简单(1)屏幕截图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Mac电脑长截图操作教程,网页完整的长截图怎么截?3步搞定!

    在很多时候,我们是需要把网页截长图的,比如想下载某张大图,但是网站把右键锁了,这个时候,就可以利用截长图的方法,截下来这张图,在我们的macz网站上有很多截图软件,今天为大家介绍的是不借助软件就可以完整的截出网页的长截图,非常简单,来和小编一起学习

    2024年02月07日
    浏览(39)
  • React--》学习Lodash:让你的JS代码更加优雅和易于阅读

            此时隔壁 vue专栏 正在项目实战,为了不打断它的文章连续性,我们把lodash的讲解文章搬到react专栏来进行学习,当然是否用框架或用什么框架都不会影响我们学习的恒心! 目录 初识Lodash 操作数组方法 操作语言方法 操作数学方法 操作对象方法 操作字符串方法

    2024年02月12日
    浏览(36)
  • react结合js获取屏幕鼠标滚动等距离实现页面懒加载

            也叫延迟加载,指的是在长网页中延迟加载内容或图像,是一种很好优化网页性能的方式。在滚动屏幕之前,可视化区域之外的内容不会进行加载,在屏幕滚动距离底部到一定距离时才加载。这样网页的加载速度更快,减少了服务器的负载。         懒加载适

    2024年02月10日
    浏览(42)
  • 用JS实现简单的屏幕录像机

    本文将介绍如何用JS实现简单的屏幕录像机。 创建一个按钮 书写JavaScript 看起来内容很多,但实际上,只是向按钮添加一个事件侦听器来开始和停止记录并相应地更改文本。 在写功能函数之前,声明 3 个全局变量(在函数之外)。 现在,开始屏幕录制 在用户屏幕之外创建媒

    2024年02月04日
    浏览(48)
  • video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载

    目录 1. 页面结构 2. 全屏方法 3. 截图方法 4. 样式代码 5. 效果截图 6. 附上完整代码 最近遇到的需求就是重新video标签的控制栏的样式,包括进度条、音量、倍速、全屏等样式,在正常状态下,可以将原生样式隐藏掉自定义新的控制栏元素定位上去,但是全屏后样式失效,出现

    2024年02月12日
    浏览(45)
  • 用js做一个简单的网页,用javascript做一个网页

    大家好,小编为大家解答用javascript写简单网页家乡的介绍代码的问题。很多人还不知道用javascript写简单网页小游戏,现在让我们一起来看看吧! 八、JavaScript基础 1.JavaScript JavaScript简称JS是用于制作网页的动态效果的,如:页面的弹出广告、浮动广告、下拉菜单、表单验证等

    2024年02月03日
    浏览(44)
  • 树莓派Ubuntu:屏幕截图

    1. 系统自带截图工具 使用键盘的\\\"prt sc\\\"截图 2. 使用scrot 安装 查看安装版本 截图

    2024年01月20日
    浏览(45)
  • unity屏幕截图功能

    1.在Editor文件夹新建脚本ScreenTest.cs 2.点击菜单栏的【Tools/截图】按钮 3.ctrl+r刷新下资源,图片会保存在Editor文件夹    备注: 1.运行/非运行状态下均可使用。 2.若想要自定义不同分辨率的图片可在Game窗口修改:    

    2024年02月15日
    浏览(43)
  • 屏幕截图编辑工具Snagit中文

    Snagit是一款优秀的屏幕、文本和视频捕获与转换程序。它能够捕获屏幕、窗口、客户区窗口、最后一个激活的窗口或用鼠标定义的区域,并支持BMP、PCX、TIF、GIF或JPEG格式的保存。Snagit还具有自动缩放、颜色减少、单色转换、抖动等功能,并能将捕获的图像转换为灰度级。此外

    2024年01月21日
    浏览(54)
  • 模拟动态加载网页数据Selenium,Puppeteer,WebDriver,Requests-HTML

    模拟动态加载网页数据,你可以使用以下工具: Selenium:Selenium是一个用于Web应用程序测试的工具,它可以模拟用户在浏览器上的操作,包括点击、滚动、填写表单等。因此,它也可以用于爬取那些动态加载内容的网页。Selenium支持多种浏览器,并且提供了多种编程语言的接口

    2024年04月25日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包