puppeteer实现html截图的示例代码

puppeteer是谷歌官方出品的一个通过 DevTools协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

安装

直接运行安装命令:

npm install puppeteer

如果出现无法安装的问题,可以使用淘宝镜像。

puppeteer实现滑动截图

在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到,而实际上是因为有些图片是懒加载的,如果你没有滑动到图片的位置,那么这个图片是不会加载。

现在我的方式是采用模拟浏览器滚动条滑动的方式滑动底部来使图片加载出来。

代码如下:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
  await page.setViewport({
    width: 1200,
    height: 800
  });

  await autoScroll(page);

  await page.screenshot({
    path: '1.png',
    fullPage: true
  });

  await browser.close();
})();

function autoScroll(page) {
  return page.evaluate(() => {
    return new Promise((resolve, reject) => {
      var totalHeight = 0;
      var distance = 100;
      var timer = setInterval(() => {
        var scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;
        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    })
  });
}

动图如下:

puppeteer 实现 html element 截图

在某些情况下我们只想要针对html的某个位置进行截图而不是针对页面截全屏。

puppeteer提供了ElementHandle.screenshot 方法,该方法参数和page.screenshot 一样。而ElementHandle 对象是页面内的Dom对象。可以帮助我对 html element进行截图。这样的话你想截取页面的哪部分就截取页面的哪部分。

代码如下:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
  await page.setViewport({
    width: 1200,
    height: 800
  });
  //获取页面Dom对象
  let body = await page.$('#cnblogs_post_body');
  //调用页面内Dom对象的 screenshot 方法进行截图
  await body.screenshot({
    path: '2.png'
  });
  await browser.close();
})();

参考文档:

https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#elementhandlescreenshotoptions

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • puppeteer实现html截图的示例代码

    puppeteer是谷歌官方出品的一个通过 DevTools协议控制 headless Chrome 的Node库.可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据. 安装 直接运行安装命令: npm install puppeteer 如果出现无法安装的问题,可以使用淘宝镜像. puppeteer实现滑动截图 在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到,而实际上是因为有些图片是懒加载的,如果

  • iOS 对view进行截图的示例代码

    本文主要介绍了iOS 对view进行截图的示例代码,分享给大家,具体如下: 需要对WKWebView进行截图,之前用的是下面的方法,高版本的系统是没有问题的,低版本的却截到一张白图 - (UIImage *)convertViewToImage:(UIView *)view{ // 第二个参数表示是否非透明.如果需要显示半透明效果,需传NO,否则YES.第三个参数就是屏幕密度了 UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.boun

  • VC++基于Dx实现的截图程序示例代码

    本文所述的程序示例为VC++图象特效的截图示例,需要DirectX 3.0以上版,代码中的GetScreen函数是本截图程序的关键.运行这个程序可用Esc键结束.代码中需要ddutil.h与ddutil.cpp文件,请自行下载添加.关于InitDDraw()函数,功能是初始化DirectDraw环境,创建换页链(主页面,一个后台缓冲区),以及创建一个定时器. 具体的功能代码如下: #include <windows.h> #include <windowsx.h> #include

  • C++实现截图截屏的示例代码

    目录 1.截图工具 1.1 键盘截图(PrtScn键) 1.2 win10自带截图(Win+Shift+S) 1.3 系统自带的截图小工具 1.4 ffmpeg 1.5 ScreenToGif 1.6 Chrome 2.C++.GDI 2.1 微软官方例子 2.2 C++.GDI.CImage 3.C++.OpenGL 4.C++.OpenCV 5.C++.QT 1.截图工具 1.1 键盘截图(PrtScn键) 如何使用Microsoft Windows操作系统中的Print Screen(打印

  • Angularjs单选框相关的示例代码

    本文介绍了Angularjs单选框相关的示例代码,分享给大家.具体如下: 使用angular1.6.5 1.ng 获取ng-repeat遍历出来的radio的value 1)普通形式(不使用ng-repeat) 可以正常显示 <input type="radio" name="t1" ng-model="demo" value="a">a <br> <input type="radio&

  • js使用html2canvas实现屏幕截取的示例代码

    整理文档,搜刮出一个js使用html2canvas实现屏幕截取的示例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <

  • Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • Android 图片Bitmap的剪切的示例代码

    一.什么是Android中的Bitmap Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件. 二.Bitmap的剪切基本操作 复制代码 代码如下: public static Bitmap createBitmap (Bitmap source, int x, int y, int width, int height, Matrix m, boolean filter) 从原始位图剪切图像,这是一种高

  • ThinkPHP整合datatables实现服务端分页的示例代码

    最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php(使用thinkphp) 页面样式来自于H-ui框架(datatables版本为1.10.0) 主要修改(databases)配置项为: 1) bProcessing:true 使用ajax源 2) serverSide:true 使用服务端分页 3) createdRow:functi

  • Android PC投屏功能实现的示例代码

    本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 代码地址 :https://github.com/deepsadness/MediaProjectionDemo 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过WebSocket进行链接.将图片传递给网页 想法来源 看到vysor,觉得特别好玩,于是就想着自己能不能试着做一个类似的功能出来.搜索了相关实现.发现网上已经有网友针对vysor做了分析.于

随机推荐