基于 Vue 3 和 html2canvas 实现页面截图录制与回放功能

欢迎关注 『开发必备』 专栏，专注于解决你在开发过程中遇到的各种问题，帮你快速找到解决方案，节省大量调试时间。内容持续更新中，保证每篇都值得收藏！

本文将介绍如何实现一个简单的页面截图和播放录制功能。通过使用 html2canvas 库，结合 Vue 3 中的响应式 API，用户可以录制页面的快照并进行回放。我们通过以下步骤实现了一个能够启动录制、停止录制和播放录制的功能。

1. 项目结构

我们使用了 Vue 3 的 <script setup> 语法，并通过 el-button 实现了控制录制的按钮。下面是我们页面的基本结构：

<template