JavaScript实现网页截屏方法总结
“
关注『前端开发博客』公众号,回复 加群
”
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法。主要看了以下几个:
PhantomJS
Puppeteer(chrome headless)
SlimerJS
dom-to-image
html2canvas
测试的网页使用了WebGL技术,所以下面的总结会和WebGL相关。
名词定义
headless browser
无界面浏览器,多用于网页自动化测试、网页截屏、网页的网络监控等。
PhantomJS
PhantomJS是可以通过JS进行编程的headless浏览器,使用的是QtWebKit内核。
实现截屏的代码,假设文件名为github.js:
// 创建一个网页实例
var page = require('webpage').create();
// 加载页面
page.open('http://github.com/', function () {// 给网页截屏,保存到github.png文件中page.render('github.png');phantom.exit();
})
运行:
phantomjs github.js
普通的页面没有问题,但是如果运行包含WebGL的页面,发现截屏不对。经过一些调查,发现不支持WebGL,github issue。
总结:
PhantomJs已经停止维护了,所以不太建议继续使用。停止维护的一个原因是chrome发布的headless版本对它造成了一定冲击。
不支持WebGL。但是,还是有开发者说可以自己给PhantomJS添加WebGL支持,不过,这个方案目前超出我的知识范围了,就没有继续研究。
Puppeteer(chrome headless)
Puppeteer是一个Node库,提供了控制chrome和chromium的API。默认运行headless模式,也支持界面运行。
实现截屏的代码example.js:
const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.setViewport({ // 设置视窗大小width: 600,height: 800});await page.goto('https://example.com'); // 打开页面await page.screenshot({path: 'example.png'}); // path: 截屏文件保存路径await browser.close();
})();
运行:
node example.js
接下来看下screenshot
方法的实现原理:
screenshot
的源码位于lib/cjs/puppeteer/common/Page.js
文件中,是一个异步方法:
async screenshot(options = {}) {// ...return this._screenshotTaskQueue.postTask(() => this._screenshotTask(screenshotType, options));
}
async _screenshotTask(format, options) {// ...const result = await this._client.send('Page.captureScreenshot', {format,quality: options.quality,clip,});// ...
}
这个this._client.send
又是个什么东西?别急,我们重新看下Puppeteer的定义:
“
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
”
看到最后面那个DevTools Protocol了吗?这是个什么东西:
“
The Chrome DevTools Protocol allows for tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink-based browsers.
”
详细的解释可以看这篇博客。
简单来说,Puppeteer就是通过WebSocket给浏览器发送遵循Chrome Devtools Protocol的数据,命令浏览器去执行一些操作。然后,浏览器再通过WebSocket把结果返回给Puppeteer。这个过程是异步的,所以看源代码会发现好多async/await。
所以screenshot
方法是调用了Chrome Devtools Protocol的captureScreenshot。
总结:
支持WebGL。
网页比较复杂的话,截屏时间也挺长的,我测试的页面是几百毫秒。
Puppeteer是对(CDP)Chrome Devtools Protocol功能的封装。大部分功能都是通过WebSocket传输给CDP处理的。
SlimerJS
SlimerJS和PhantomJS类似。不同点是SlimerJS是基于火狐的浏览器引擎Gecko,而不是Webkit。
SlimerJS可以通过npm安装,最新版本是1.x。不过兼容的火狐版本是53.0到59.0。我看现在火狐最新版本都82了。因为我本机是安装了火狐最新版本的,所以我还得安装一个老版本的火狐,比如59.0。可以参考这篇安装旧版本的火狐浏览器。我是mac系统,感觉安装还是挺容易的。
实现截屏的代码screenshot.js:
var page = require('webpage').create();
page.open("http://slimerjs.org", function (status) {page.viewportSize = { width:1024, height:768 };page.render('screenshot.png');
});
运行
// mac操作系统设置火狐路径
export SLIMERJSLAUNCHER=/Applications/Firefox.app/Contents/MacOS/firefox
./node_modules/.bin/slimerjs screenshot.js // 我是局部安装的slimer包
需要注意的是SLIMERJSLAUNCHER=/Applications/Firefox.app/Contents/MacOS/firefox
启动的是火狐默认的安装路径,因为我一开始就有火狐浏览器,所以启动的是最新版本的浏览器,然后就报错了,说不兼容。在前面我安装过一个59版本的火狐,那么这个火狐浏览器的路径是什么?
在应用程序里面我把这个旧版本的火狐命名为Firefox59,然后这个路径就是/Applications/Firefox59.app/Contents/MacOS/firefox
。重新设置SLIMERJSLAUNCHER
为59版本的火狐浏览器之后,发现就能成功了。
不过,Puppeteer默认会打开浏览器界面,也就是non-headless模式。如果要使用headless模式,可以
./node_modules/.bin/slimerjs --headless screenshot.js
不过,headless模式下,不支持WebGL。
我在写例子的时候,发现的一个明显的不同就是Puppeteer截屏是异步函数,而SlimerJS截屏是同步函数?好奇心驱使下,看了下源码(src/modules/slimer-sdk/webpage.js):
render: function(filename, options) {// ...let canvas = webpageUtils.getScreenshotCanvas(browser.contentWindow,finalOptions.ratio,finalOptions.onlyViewport, this);}canvas.toBlob(function(blob) {let reader = new browser.contentWindow.FileReader();reader.onloadend = function() {content = reader.result;}reader.readAsBinaryString(blob);}, finalOptions.contentType, finalOptions.quality);// ...
}
webpageUtils.getScreenshotCanvas(src/modules/webpageUtils.jsm):
getScreenshotCanvas : function(window, ratio, onlyViewport, webpage) {// ...// create the canvaslet canvas = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");canvas.width = canvasWidth;canvas.height = canvasHeight;let ctx = canvas.getContext("2d");ctx.scale(ratio, ratio);ctx.drawWindow(window, clip.left, clip.top, clip.width, clip.height, "rgba(0,0,0,0)");ctx.restore();return canvas;
}
关键代码就是那行ctx.drawWindow
。what?JS原生API还支持直接截屏?
CanvasRenderingContext2D.drawWindow():只有火狐支持,已经被废弃掉的非规范定义的标准API。
总结
1.0版本支持的火狐版本是53.0到59.0。不保证最新版本火狐可用。
headless模式下,不支持WebGL。
dom-to-image
dom-to-image:前端截屏的开源库。工作原理是:
SVG的foreignObject标签可以包裹任意的html内容。那么,为了渲染一个节点,主要进行了以下步骤:
递归地拷贝原始dom节点和后代节点;
把原始节点以及后代节点的样式递归的应用到对应的拷贝后的节点和后代节点上;
字体处理;
图片处理;
序列化拷贝后的节点,把它插入到foreignObject里面,然后组成一个svg,然后生成一个data URL;
如果想得到PNG内容或原始像素值,可以先使用data URL创建一个图片,使用一个离屏canvas渲染这张图片,然后从canvas中获取想要的数据。
测试的时候,发现外部资源不能加载,所以简单的了解了后就放弃了。
html2canvas
html2canvas。网上查了下感觉有一篇文章写的挺好的:浅析 js 实现网页截图的两种方式。感兴趣的可以看下。
未验证的猜想
虽然后面这两种是前端的实现方式,但是结合前面讲的headless库,也是可以实现后端截屏的。以Puppeteer的API为例,可以首先使用page.addScriptTag(options)
往网页中添加前端截屏的库,然后在page.evaluate(pageFunction[, ...args])
中的pageFunction
函数里面写相应的截屏代码就可以了,因为pageFunction的执行上下文是网页上下文,所以可以获取到document
等对象。
总结
对截屏的一个简单研究,写篇博客整理下思路。如果文中有叙述错误的地方,欢迎评论留言。
“
关注公众号「前端开发博客」,回复1024,领取前端资料包
”
原文:https://segmentfault.com/a/1190000037673677
JavaScript实现网页截屏方法总结相关推荐
- JavaScript 实现网页截屏五种方法
JavaScript 实现网页截屏五种方法 最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS P ...
- JavaScript实现网页截屏的5种方法(详解+代码)
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS Puppeteer(chrome headle ...
- js截屏代码_JavaScript网页截屏方法,你get到了嘛?
之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容 ...
- JS 实现网页截屏五种方法
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS Puppeteer(chrome headle ...
- 【JS】1007- JavaScript实现网页截屏的5种方法
作者:luckness 原文:https://segmentfault.com/a/1190000037673677 最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及 ...
- Java实现网页截屏功能(基于phantomJs)
公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...
- java网页截图_Java实现的简单网页截屏功能示例
本文实例讲述了Java实现的简单网页截屏功能.分享给大家供大家参考,具体如下: package awtDemo; import java.awt.AWTException; import java.a ...
- java 截图_Java实现网页截屏
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. import java.awt.AWTException; import java.awt ...
- android利用反射调用截屏api,Android利用反射机制调用截屏方法和获取屏幕宽高的方法...
想要在应用中进行截屏,可以直接调用 View 的 getDrawingCache 方法,但是这个方法截图的话是没有状态栏的,想要整屏截图就要自己来实现了. 还有一个方法可以调用系统隐藏的 screen ...
最新文章
- 助力军事内容持续产出,军武次位面完成B轮融资...
- 解决方案、项目、程序集、命名空间
- NSMapTable
- 培训时常犯的学习误区与应对方法
- 皖西学院计算机科学与技术分数线,2017年皖西学院艺术类本科专业录取分数线...
- linux任务计划详解
- 程序员:请不要对我的代码指手画脚!
- python调用库有哪些_十大Python机器学习常用库 python开发,你用过几个?
- springboot学习笔记1
- Microsoft Office 2016 简体中文Vl批量官方授权版镜像下载
- GitLab账号注册及分组
- 使用递归方法查询所有分类(一)
- 使用OpenBTS基站测试物联网模块安全性
- sever and mirroring(服务器和镜像)是什么
- 第一章 常用半导体器件-----------------本征半导体
- 关于Android Https网络连接失败奇葩问题 ExtCertPathValidatorException
- Google在东京搬出了所有的AI产品和技术,你知道哪个? | 精选
- postman问题及汉化
- (一)C#Winform导入Excel数据到datagridview控件
- 一个硅谷网工的四年打怪升级史!
热门文章
- 68 个 Python 内置函数详解
- mysql优化之in内子查询
- 预言机私享,Defi实战特训,一场对开放式金融认知新突围来了!
- OpenCL Programming Cases and Optimization Methods, Pinned Memory
- POJ1555-Polynomial Showdown
- 小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件...
- 如何获取有价值的用户反馈?
- 68个dlib的landmarks
- Android 与Js通信报Java Exception was raised during method Invocation错误,引发的惨案
- 后台打log(便于查看问题和调试)方法