网页里的截图比想象中难。浏览器画出来的东西是拿不到原始像素的，想把某个区域变成一张图片，得把节点复制一份，把页面上生效的样式一条条算出来贴成内联样式，再把外链图片转成 base64 嵌进去，中间任何一个环节出错，出来的图就是空白或者错位的。录屏也不轻松，要处理浏览器录制的兼容差异、大文件分段、边录边传。这次整理了 4 款开源免费、可商用的截图与录制库，把这些最脏的活都干了，接入就能用。
把页面元素变成图片
html-to-image 是现在比较顺手的一款，传入一个 DOM 节点，直接返回图片地址或者二进制数据，支持 PNG、JPEG、SVG 三种格式，能自动把外部图片和字体内联进去，还能设置像素比导出高清图，做分享卡片、海报预览、图表存图都很合适。dom-to-image 出现得更早，接口是几个独立的方法，用法直观，社区里的解决方案和踩坑记录多，遇到问题好搜答案。两款思路一致，新项目优先前者，老项目或者想少踩坑的可以用后者，输出质量基本够用。
录屏有两种思路
rrweb 录的不是视频，而是页面上的每一次结构变化、鼠标移动、输入和滚动，回放的时候把这些事件重放出来。好处是文件比视频小几十倍，能拖动进度条、能快进慢放，还能看到用户到底点了哪里，常用于用户行为分析、问题复现和客服排障，包里附带了回放器需要的样式文件。RecordRTC 则是正儿八经的音视频录制，基于浏览器原生接口封装，支持录摄像头画面、麦克风声音和屏幕共享，还能边录边分片上传，做在线面试、网课录播、语音留言、屏幕演示都用得上。两者不是替代关系，一个看行为，一个存影音。
用起来必须知道的限制
网页截图只能截到同源的图片，图片在别的域名下会因为安全策略变成空白，解决办法是让图片服务器配上跨域头，这一点如果不知道，会误以为是库有问题。录屏和音视频捕获必须由用户点击触发，浏览器还会弹权限确认，被拒绝之后要有兜底提示。另外获取摄像头、麦克风和屏幕内容的接口只在安全环境里可用，也就是 HTTPS 或者本地调试环境，普通的 http 页面会直接失败。rrweb 的结构化录像有个特点，页面结构大改之后旧录像可能回放异常，长期存档要考虑这一点。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和未压缩版两种文件，正式项目引压缩版，调试时看未压缩版。四款库互相独立，用 script 标签引入就能拿到全局对象，也支持模块化引入。选型上，把节点存成图片用 html-to-image 或者 dom-to-image，做用户行为录制和回放用 rrweb，要真正的音视频和屏幕录制用 RecordRTC。每个目录都附带了官方说明文档和许可文件，方便核对用法和授权。
截图和录制属于那种用上了就很直观的能力。做一个分享按钮，把页面内容一键存成图，传播链路立刻就通了；接一个行为录制，用户提问题时能看到他到底点了哪里，排障效率完全不一样。上手建议是先做最简单的一件事，把一个卡片区域截成图片，跑通之后再往复杂场景扩。这四款全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端常用的组件和数据类合集，需要的可以先收藏。
暂无评论内容