当前位置：首页 > article >正文

【实践功能7】前端实现截屏

article 2024/9/24 13:01:07

前端截图功能涉及到 HTML5 的 Canvas API，下面总结两种可实现截图的方式

一、使用第三方库-html2canvas

1. 原理

html2canvas可以通过获取HTML的某个元素，然后生成Canvas，然后再通过调用的canvas的toDataURL()方法生成图片，从而能让用户保存为图片。

2.步骤

获取当前页面的标签节点：向html2canvas传入需要生成图片的DOM节点
渲染画布canvas：等到html2canvas通过该DOM节点的信息生成canvas
再调用canvas.toDataURL(‘image/png’)方法，image/png是要生成的图片格式为png，然后该方法会返回一个图片的base64

3.代码

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)
  })
}

注意：
跨域问题：html2canvas默认不会加载跨域的图片资源，通过设置 useCORS: true来启用跨域请求支持。

二、navigator.mediaDevices.getDisplayMedia

navigator.mediaDevices.getDisplayMedia 是一个浏览器API，允许网页应用访问用户的屏幕或特定窗口的内容，主要用于屏幕共享或屏幕录制等功能。这个API是WebRTC的一部分，它使得开发人员能够更容易地捕捉到用户的屏幕内容，而不需要依赖Flash或其他插件。

1.主要特点

安全性：为了保护用户隐私，使用getDisplayMedia时通常需要用户的明确许可。这意味着会弹出一个对话框让用户选择他们想要共享的内容（如整个屏幕、单个应用程序窗口或浏览器标签页）。
跨平台：可以在支持的现代浏览器中使用，包括Chrome、Firefox、Edge等。
媒体流：返回一个MediaStream对象，包含了屏幕共享的视频轨道（可能还有音频轨道），可以被用来显示在元素中，或者作为其他媒体处理的一部分，比如录制或传输。
参数配置：可以通过传递选项对象来指定捕获的媒体类型（视频、音频）和其他约束条件，如分辨率、帧率等。

2.使用步骤

获取屏幕共享流：使用getDisplayMedia 方法获取屏幕或窗口内容
创建视频元素或画布：创建一个元素或者Canvas对象用于显示或处理获取到的媒体流
截图并转换为图片：通过Canvas 的绘制方法将视频绘制到画布上，并转换为图片格式

3.示例

// 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()
}