Puppeteer之大屏批量截图
事情的起因是客户三天两头的要求让我们给大屏截图,一定要最新的数据。所以我就自告奋勇研究了一下。
puppeteer是一款headless浏览器,由谷歌官方维护。先看看puppeteer入门 。思路是先打开所有链接,然后设置最长的等待时间,最后进行截图。(13版本puppeteer跟前一版api有挺多不同,headless设置为false,测试中headless为true不支持webgl绘制)。实现代码如下
const puppeteer = require('puppeteer');
const fs = require('fs');
(async() => {
const config = {
args: [
'--use-gl'
],
headless: false
}
const browser = await puppeteer.launch(config);
var info = [
{ url: 'https://developers.arcgis.com/javascript/latest/sample-code/visualization-point-styles/live/index.html', name: "a.jpeg" },
{ url: 'https://developers.arcgis.com/javascript/latest/sample-code/layers-custom-elevation-thematic/live/index.html', name: "b.jpeg" },
{ url: 'https://developers.arcgis.com/javascript/latest/sample-code/layers-imagery-pixelvalues/live/index.html', name: "c.jpeg" }
]
var that = this;
var length = info.length;
var a = [];
for (let j = 0; j < length; j++) {
var page = await browser.newPage();
await page.setViewport({ width: 4800, height: 1200 })
await page.goto(info[j].url);
a.push(page)
}
await a[0].waitFor(120 * 1000);
for (i = 0; i < length; i++) {
var item = info[i];
var url = item.url;
var name = item.name;
fs.exists(name, function(exists) {
console.log(exists ? fs.unlinkSync(name) : "no such file");
});
try {
await a[i].screenshot({ path: name });
console.log(name);
} catch (e) {
console.log(e)
}
}
await browser.close();
})();
Puppeteer之大屏批量截图的更多相关文章
- Qt编写项目作品大全(自定义控件+输入法+大屏电子看板+视频监控+楼宇对讲+气体安全等)
一.自定义控件大全 (一).控件介绍 超过160个精美控件,涵盖了各种仪表盘.进度条.进度球.指南针.曲线图.标尺.温度计.导航条.导航栏,flatui.高亮按钮.滑动选择器.农历等.远超qwt集成的 ...
- 【前端优化之渲染优化】大屏android手机动画丢帧的背后
前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...
- 从零开始设计数据大屏—基于Vue ZT
虽然已经决定这个项目用Wyn来做了,但是,了解一下如何从头开始写一个数据大屏还是挺有好玩的. ------------- 为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的 ...
- 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
- 大屏FAQ
1. 大屏可以分为哪几类?帆软有哪些大屏硬件合作商?编辑 拼接屏:通常由单个46-55寸的液晶显示屏组成屏幕墙,存在拼缝,借助矩阵.屏控系统来进行信号的输入与输出控制,可以实现屏幕墙上多个屏幕的组合. ...
- 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课
前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...
- Qt编写数据可视化大屏界面电子看板系统
一.前言 目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合, ...
- Qt编写数据可视化大屏界面电子看板12-数据库采集
一.前言 数据采集是整个数据可视化大屏界面电子看板系统核心功能,没有数据源,这仅仅是个玩具UI,没啥用,当然默认做了定时器模拟数据,产生随机数据,这个可以直接配置文件修改来选择采用何种数据采集方法,总 ...
- Qt编写数据可视化大屏界面电子看板11-自定义控件
一.前言 说到自定义控件,我是感觉特别熟悉的几个字,本人亲自原创的自定义控件超过110个,都是来自各个行业的具体应用真实需求,而不是凭空捏造的,当然有几个小控件也有点凑数的嫌疑,在编写整个数据可视化大 ...
随机推荐
- Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Ubuntu12.04下安ns-3.29及Ubuntu换源方法
目录 1.下载ns-3.29 2.安装gcc-4.9.2 3.编译.测试ns-3.29 第一种:更新,文章开头说的 第二种,更新源 主机型号:Ubuntu12.04 仿真环境版本:NS-3.29 安装 ...
- 好用的函数,assert,random.sample,seaborn tsplot, tensorflow.python.platform flags 等,持续更新
python 中好用的函数,random.sample等,持续更新 random.sample random.sample的函数原型为:random.sample(sequence, k),从指定序列 ...
- php内核一些常识
整个PHP环境和Zend环境会涉及多个全局变量,下面是几个比较重要的: php_core_globals core_globals(main/php_globals.h) ==> PG PHP调 ...
- Java集合类的那点通俗的认知
文/沉默王二 开门见山地说吧,Java提供了一套完整的集合类(也可以叫做容器类)来管理一组长度可变的对象(也就是集合的元素),其中常见的类型包括List.Set.Queue和Map.从我个人的编程经验 ...
- java代码之美(8)---guava字符串工具
guava字符串工具 在java开发过程中对字符串的处理是非常频繁的,google的guava工具对字符串的一些处理进行优化,使我们开发过程中让自己的代码看去更加美观,清爽. 一.Joiner 根据给 ...
- C#计算一段代码的运行时间
第一种方法利用System.DateTime.Now: static void SubTest() { DateTime beforDT = System.DateTime.Now; //耗时巨大的代 ...
- Owin学习笔记(二) 中间件开发
Owin中也有类似于ASP.NET的管道,以前在做ASP.NET项目的时候,可以制作很多不同功能HttpHandler或者HttpModule并注册在Web.config中重复使用.在Owin的管道中 ...
- redis 系列26 Cluster高可用 (1)
一.概述 Redis集群提供了分布式数据库方案,集群通过分片来进行数据共享,并提供复制和故障转移功能.在大数据量方面的高可用方案,cluster集群比Sentinel有优势.但Redis集群并不支持处 ...
- IDEA中MAVEN项目打JAR包的简单方法
Idea中为一般的非Web项目打Jar包是有自己的方法的,网上一搜就能查到很多. 但是如果是为Maven项目打Jar包,其实是很简单的,因为maven本身就有打Jar包的命令. 最简单的方法 ...