插件安装
yarn add vue3-screen-shot
# or
npm install vue3-screen-shot --save插件使用
注意
⚠️ ： 需要你的网站运行在https环境或者localhost环境。
- 在项目的入口文件
main.ts/main.js中加入下述代码
// 导入截屏插件
import screenShort from "vue3-screen-shot"
const app = createApp(App);
app.use(screenShort, {
enableWebRtc: false // 开启WebRtc截图
})- 在你的需要使用的业务代码中，添加下述代码
<template>
<!--截图组件-->
<screen-short v-if="screenshotStatus"
@destroy-component="destroyComponent"
@get-image-data="getImg"
></screen-short>
</template>
<script setup lang="ts">
const screenshotStatus = ref<boolean>(false);
const destroyComponent = function(status: boolean) {
screenshotStatus.value = status
}
// 获取裁剪区域图片信息
const getImg = function(base64: string) {
console.log("获取裁剪区域图片信息", base64)
}
</script>参数说明
如示例代码所示，在template中直接使用screen-short插件，绑定组件需要的事件处理函数即可。
接下来就跟大家讲下组件中每个属性的意义：
- screenshotStatus 用于控制组件是否出现在dom中
- @destroy-component 用于接收截图组件传递的销毁消息，我们需要在对应的函数中销毁截图组件
- @get-image-data 用于接收截图组件传递的框选区域的base64图片信息，我们需要为他提供一个函数来接收截图组件传递的消息
可选参数
截图插件有一个可选参数，它接受一个对象，对象每个key的作用如下:
-
enableWebRtc是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图 -
level截图容器层级，值为number类型。 -
clickCutFullScreen单击截全屏启用状态,值为boolean类型， 默认为false -
hiddenToolIco需要隐藏的截图工具栏图标，值为{ save?: boolean; undo?: boolean; confirm?: boolean }类型，默认为{}。传你需要隐藏的图标名称，将值设为true即可。