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

前端截图功能涉及到 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()// 移除canvasURL.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 = streamawait video.play()// 创建画布承载内容const canvas = document.createElement('canvas')canvas.width = video.videoWidthcanvas.height = video.videoHeightconst context = canvas.getContext('2d')// 3.绘制视频帧到画布context?.drawImage(video, 0, 0, canvas.width, canvas.height)// 4.将画布内容转换为图片转成base64const base64 = canvas.toDataURL()// 停止录制，节约资源video.srcObject.getTracks().forEach((track) => track.stop)// 下载const aTag = document.createElement('a') // 创建一个<a> 标签用于下载aTag.href = base64aTag.download = 'screenshot.png'aTag.click()
}