前端
面试题
前端
面试题

1.前端如何实现截图？

1. 使用场景

  • 飞书文档的内容在列表页查看

    • 文档类项目导出为pdf

  • 内容导出为图片格式

    • 比如说医疗行业的诊断书导出为图片

  • 设计类软件，出图

2. 方案

  • canvas
    • 一般使用html2canvas、canvas2image这两个库
    • 基本原理
      • 递归遍历目标节点以及其子节点，收集节点信息
      • 计算节点本身的层级关系，根据一定优先级策略将节点逐一绘制到canvas画布中
      • 重复这一过程，最终实现目标节点的全部绘制
  • svg
    • 一般使用dom-to-image这个库来实现
    • 主要用法是先把DOM转换为SVG然后再把SVG转换为图片
  • puppetter(无头浏览器)

    • 页面在移动端和PC端展示的不同，截图以什么方式截？

3. 落地

  • 全页面截图

  • 局部截图

  • 特定区域截图

  • 截图工具的时候，需要考虑通用性，通过selecter选择器选择body、header、dom等区域

  • 设计具体协议

    • 函数式、组件式
      • 一般都是用函数式，调用一下函数，在内存中处理，再悄悄的创建一个canvas，然后把内容导出来后再把canvas删除
      • 如何隐藏canvas

  • 代码编写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="
https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
"></script>
  </head>
  <body>
    <div id="screenshot-target" style="padding: 20px; background: #f5f5f5">
      <h1>hello world</h1>
      <p>this is the content to capture</p>
    </div>
    <button onclick="takeScreenshot()">take screenshot</button>
  </body>
  <script>
    function takeScreenshot(){
      const element=document.getElementById('screenshot-target')
      html2canvas(element).then(canvas=>{
        const img=canvas.toDataURL('image/png')
        const link=document.createElement('a')
        link.href=img
        link.download='screenshot.png'
        link.click()
      })
    }
  </script>
</html>