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

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-shortv-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>