前端实现截屏的两种常见方式
作者：Mae_cpski
这篇文章主要介绍了前端实现截屏的两种常见方式,分别是使用第三方库html2canvas和navigator.mediaDevices.getDisplayMedia,两种方法都给出了详细的代码示例,需要的朋友可以参考下
前端截图功能涉及到 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()
}
点击按钮触发截图。通过调用 getDisplayMedia 方法获取屏幕流，然后利用 元素播放此流，并将其内容绘制到 画布上，然后将画布的图像数据转换为base64编码的URL, 创建 a 标签进行下载。
总结
到此这篇关于前端实现截屏两种常见方式的文章就介绍到这了,更多相关前端实现截图方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！