前端截图功能方案汇总

发表于 分类于 / Changyan：

目前了解到的两种方案

  1. html2canvas
  2. webRTC

html2canvas

实现原理

  1. 递归目标元素的所有 DOM 节点，填充到一个 renderList ，并附加是否为顶层元素/包含内容的容器 等信息
  2. 通过 z-index、position、float 等css属性和元素的层级信息将 renderList 排序，计算出一个 canvas 的 renderQueue
  3. 遍历 renderQueue，将css样式转为 setFillStyle 可识别的参数，依据 nodeType 调用相对应 canvas 方法，如文本则调用 fillText，图片 drawImage，设置背景色的 div 调用 fillRect 等
  4. 将画好的 canvas 填充进页面

资源地址

常见问题解决方案

  1. 跨域方面: 配置 allowTaint: false
  2. 截图锯齿: 根据设备像素比进行缩放 const scale = window.devicePixelRatio;
  3. 对 CSS3 支持不好: 不支持部分 CSS3 样式, 如 background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform 等
  4. 图片跨域: 需要后端支持图片跨域

性能问题

由于这种方案需要遍历目标元素下的所有 DOM 再转为 canvas，所以一旦 dom 过多，就会导致转换巨慢（页面卡死 4-6s）

webRTC

实现原理

  1. 使用 getDisplayMedia 来捕获屏幕，得到 MediaStream 流
  2. 将得到的 MediaStream 流输出到 video 标签中
  3. 使用 canvas 将 video 标签中的内容绘制到 canvas 容器中

资源地址

缺点

  • 首次使用截图，浏览器会要求获取共享屏幕权限
  • 得保证网站运行在 https 或者 localhost 环境

相关资料