前端实现截屏的两种常见方式

function getScreenshot() {
  // 获取需要截图的dom元素
  const el = document.getElementById('screenDiv')
  // 使用html2canvas将dom结构渲染到画布
  html2canvas(el, {
    useCORS: true, // 允许跨域
  }).then((canvas) => {
    // 下载
    const aTag = document.createElement('a') // 创建一个<a> 标签用于下载
    aTag.href = canvas.toDataURL()
    aTag.download = 'screenshot.png'
    aTag.click()
    // 移除canvas
    URL.revokeObjectURL(aTag.href)
  })
}

// html部分
<button @click="screenshot">点击截图(mediaDevices) </button>

// js部分
async function screenshot() {
  // 1.获取屏幕或窗口内容（获取屏幕流）
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
  })
  // 2.创建视频元素或画布（创建流）
  const video = document.createElement('video')
  video.srcObject = stream
  await video.play()
  // 创建画布承载内容
  const canvas = document.createElement('canvas')
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  const context = canvas.getContext('2d')
  // 3.绘制视频帧到画布
  context?.drawImage(video, 0, 0, canvas.width, canvas.height)
  // 4.将画布内容转换为图片转成base64
  const base64 = canvas.toDataURL()
  // 停止录制，节约资源
  video.srcObject.getTracks().forEach((track) => track.stop)
  // 下载
  const aTag = document.createElement('a') // 创建一个<a> 标签用于下载
  aTag.href = base64
  aTag.download = 'screenshot.png'
  aTag.click()
}