目前比较普遍的浏览器截图技术，一般是使用 html2canvas。html2canvas的原理是通过遍历页面的DOM元素和渲染之后的每个DOM节点的样式信息，并将其转换为canvas的属性，利用offset等属性辅助位置信息，将节点渲染到canvas上，建立一个页面的展示镜像，从而实现页面截图的功能。由于这种方案需要遍历目标元素下的所有 DOM 再转为 canvas，所以一旦 dom 过多，就会导致转换巨慢（页面卡死 4-6s）。
html2Canvas 的缺点和局限
此外html2canvas还有下列各种局限：
- 不支持iframe
- 不支持跨域图片渲染
- 不能在浏览器插件中使用
- 不支持flash
- 部分浏览器上不支持svg图片
- 不支持古代浏览器和IE
类似的方案 Dom-to-image，也会有相类似的性能问题。下面是我在开发过程中，探索出来的一些更加现代、优雅的截图方案
利用webrtc 进行截图
实现原理
- 使用 getDisplayMedia 来捕获屏幕，得到 MediaStream 流
- 将得到的 MediaStream 流输出到 video 标签中
- 使用 canvas 将 video 标签中的内容绘制到 canvas 容器中
缺点：
- 首次使用截图，浏览器会要求获取共享屏幕权限
- 得保证网站运行在 https 或者 localhost 环境
具体使用可以基于相关的开源项目直接开箱即用：
使用 Chrome 插件来辅助截图
- 这样可以一次安装之后快速截图
-
- 目前 Chrome 插件已经不支持一键安装，这里的交互复杂点在于引导用户安装 Chrome 插件，后续快速使用
- 编辑功能可以更加多一些
chrome 本身对于 chrome 插件提供了截图能力，接入非常方便，这里是示例代码：
chrome.tabs.captureVisibleTab(null, {
format : "png",
quality : 100
}, function(data) {
});
具体可以参考类似的开源库：
使用现代 web worker 库来截图
Modern-screenshot是一个用于现代浏览器的截屏工具，它支持多种浏览器，如Chrome、Firefox、Selenium等。与传统的截屏工具相比，Modern-screenshot具有更高的性能和更丰富的功能。它可以捕获整个页面或特定区域的截图，支持多种截图模式（如full page、partial page、free form等），并且通过重用上下文和 web worker，每秒快速截图，性能相比于 html-to-image、html2Canvas 和 dom-to-image 等截图库有显著提升。复用 web worker 功能，对于浏览器来说也可以减少卡顿，是使用下来体验最佳的截图库。
相关文章
欢迎关注我最近在周更的“一口前端美食”技术专栏，用美食的理念诠释前端开发的艺术，为您呈现一口吃个够的前端知识盛宴。从入门到进阶，一起探索前端技术的精髓，品味前端开发的独特魅力。juejin.cn/column/7317…
