Vue项目使用 html2canvas 实现截图功能

在前端开发中，有时我们需要提供截图功能，比如保存某个特定区域或整个屏幕作为图像文件。本篇博客将介绍如何使用 Vue 3 的 <script setup> 语法和 html2canvas 库来实现自定义区域截图和整个屏幕截图，并自动保存到本地。

前置条件

在开始之前，请确保你已经安装了 html2canvas。如果尚未安装，可以使用以下命令来安装：

npm install html2canvas

代码实现

下面是一个简单的 Vue 3 + TypeScript 的截图示例代码。

1. 截取自定义区域截图

首先我们来实现一个截取自定义区域的功能。假设我们有一个特定的 div 区域，希望用户可以点击按钮后进行截图并保存。

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div ref="screenshotArea" style="border: 1px solid #ccc; width: 300px; height: 200px;">
      <!-- 可自定义截图区域 -->
      <p>这是一个可截图的区域。</p>
    </div>
    <button @click="captureScreenshot">截取并保存截图</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import html2canvas from 'html2canvas';

const msg = 'Vue 3 Screenshot Example';
const screenshotArea = ref<HTMLElement | null>(null);

const captureScreenshot = async () => {
  if (screenshotArea.value) {
    const canvas = await html2canvas(screenshotArea.value); // 截图指定区域
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png'); // 将截图转换为 png 格式的图片 URL
    link.download = 'screenshot.png';  // 下载图片，文件名为 'screenshot.png'
    link.click(); // 自动触发下载
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

2. 截取整个屏幕

除了自定义区域，我们还可以截取整个屏幕。下面的代码展示了如何捕获整个浏览器窗口的截图并保存。

<template>
  <div>
    <button @click="captureScreen">截取整个屏幕并保存</button>
  </div>
</template>

<script setup lang="ts">
import html2canvas from 'html2canvas';

const captureScreen = async () => {
  const canvas = await html2canvas(document.body); // 针对整个页面进行截图
  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png'); // 将截图转换为 png 格式的图片 URL
  link.download = 'full_screenshot.png';  // 下载图片，文件名为 'full_screenshot.png'
  link.click(); // 自动触发下载
};
</script>

完整代码

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div ref="screenshotArea" style="border: 1px solid #ccc; width: 300px; height: 200px;">
      <!-- 可自定义截图区域 -->
      <p>这是一个可截图的区域。</p>
    </div>
    <button @click="captureScreenshot">截取并保存截图</button>
    <button @click="captureScreen">截取整个屏幕并保存</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import html2canvas from 'html2canvas';

const msg = 'Vue 3 Screenshot Example';
const screenshotArea = ref<HTMLElement | null>(null);

// 截取自定义区域截图
const captureScreenshot = async () => {
  if (screenshotArea.value) {
    const canvas = await html2canvas(screenshotArea.value);
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png'); // 设置链接目标为一张图片
    link.download = 'screenshot.png';  // 设置下载文件名为 'screenshot.png'
    link.click();
  }
};

// 截取整个浏览器窗口截图
const captureScreen = async () => {
  const canvas = await html2canvas(document.body); // 针对整个页面进行截图
  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png'); // 设置链接目标为一张图片
  link.download = 'full_screenshot.png';  // 设置下载文件名为 'full_screenshot.png'
  link.click();
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

运行结果

部分截图

完整截图

实现步骤解析

• html2canvas: 该库用于将 HTML 内容渲染成一个 <canvas> 元素，它可以轻松地将网页或网页中的特定部分转换为图像。

• ref: Vue 3 中的 ref 用于引用 DOM 元素或数据。

• canvas.toDataURL: toDataURL() 方法用于将 Canvas 内容转换为 Base64 编码的图片数据，这样就可以将其作为图片保存到本地。

• link.click(): 通过动态创建 <a> 标签，并设置 href 为图片的 Base64 URL，使用 click() 事件触发下载。

总结

通过本文的代码示例，我们可以轻松地在 Vue 3 项目中使用 html2canvas 实现截图功能，并自动将图片保存到本地。这个功能不仅适用于用户截图需求，还可以在生成报告、反馈表单等场景中发挥作用。

---

希望这篇博客能帮助你在 Vue 项目中实现截图功能。如果你有任何问题，欢迎留言交流！

---