Vue3使用vue-web-screen-shot实现截图功能

Hello-Mr.Wang2025-06-03 15:13

vue-web-screen-shot仅支持vue3版本

官方使用地址 https://www.npmjs.com/package/vue-web-screen-shot

1.安装

复制代码

npm install vue-web-screen-shot --save

2.使用

2-1 在项目入口文件main.js中导入

复制代码

// 导入截屏插件
import screenShort from "vue-web-screen-shot";
const app = createApp(App);
// 使用截屏插件
app.use(screenShort, { enableWebRtc: false })

2-2 添加业务代码(完整示例代码)

复制代码

<template>
  <div>
    <button @click="screenshotStatus = true">截图</button>
  </div>
  <!--截图组件-->
  <screen-short
    v-if="screenshotStatus"
    @destroy-component="destroyComponent"
    @get-image-data="getImg"
  ></screen-short>
  <img :src="imgUrl" alt="">
</template>
<script setup>
import { ref } from "vue";
const screenshotStatus = ref(false);
const imgUrl = ref("");
// 销毁组件函数
const destroyComponent = (status) => {
  screenshotStatus.value = status;
};

// 获取裁剪区域图片信息
const getImg = function (base64) {
  console.log("截图组件传递的图片信息", base64);
  imgUrl.value = base64;
};
</script>
<style lang="less" scoped>
</style>