#基于web端自定义截屏插件(Vue3版)的项目，增加了截图完成时截图区域位置信息的回调，删除了其他工具栏，原始项目详见：https://github.com/likaia/screen-shot

screen-shot-fix ·

web端自定义截屏插件(Vue3版)，运行视频：实现web端自定义截屏功能 , 本插件仅支持Vue3,如需在其他平台使用请移步 ：js-web-screen-shot 效果图如下：

写在前面

关于此插件的更多介绍以及实现原理请移步：

• 实现Web端自定义截屏
• 实现Web端自定义截屏(JS版)

插件安装

yarn add screen-shot-fix

# or

npm install screen-shot-fix --save

插件使用

由于插件使用Vue3编写，因此它只能在Vue3项目中运行，如果你需要在vue2项目或者其他js项目中运行请移步：js-web-screen-shot，它采用原生js编写，功能与本插件功能一致。

注意⚠️： 如果需要使用插件的webrtc模式或者截图写入剪切板功能，需要你的网站运行在https环境或者localhost环境。

• 在项目的入口文件main.ts/main.js中加入下述代码

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

• 在你的需要使用的业务代码中，添加下述代码

<template>
  <!--截图组件-->
  <screen-short v-if="screenshotStatus"
  @destroy-component="destroyComponent"
  @get-image-data="getImg"
  @get-cut-position="getCutPosition"
  ></screen-short>
</template>

<script lang="ts">

export default defineComponent({
  setup(props, context) {
    const screenshotStatus = ref<boolean>(false);
    // 销毁组件函数
    const destroyComponent = function(status: boolean) {
      screenshotStatus.value = status;
    }
    // 获取裁剪区域图片信息
    const getImg = function(base64: string) {
      console.log("截图组件传递的图片信息", base64);
    }
    const getCutPosition = function(position: { x: number; y: number; width: number; height: number }) {
      console.log("截图组件传递的截图区域位置信息", position);
    }
    
    return {
      screenshotStatus,
      destroyComponent,
      getImg,
      getCutPosition
    }
  }
})
</script>

参数说明

如示例代码所示，在template中直接使用screen-short插件，绑定组件需要的事件处理函数即可。

接下来就跟大家讲下组件中每个属性的意义：

• screenshotStatus 用于控制组件是否出现在dom中
• @destroy-component 用于接收截图组件传递的销毁消息，我们需要在对应的函数中销毁截图组件
• @get-image-data 用于接收截图组件传递的框选区域的base64图片信息，我们需要为他提供一个函数来接收截图组件传递的消息
• @get-cut-position 用于截图完成时的截图区域位置信息的回调 -----》基于原始项目增加的回调
• @webrtc-error 使用webrtc模式截图时，当用户的浏览器不支持或者未授权时会触发此回调

可选参数

截图插件有一个可选参数，它接受一个对象，对象每个key的作用如下:

• enableWebRtc 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
• level 截图容器层级，值为number类型。
• clickCutFullScreen 单击截全屏启用状态,值为boolean类型， 默认为false
• hiddenToolIco 需要隐藏的截图工具栏图标，值为{ save?: boolean; undo?: boolean; confirm?: boolean }类型，默认为{}。传你需要隐藏的图标名称，将值设为true即可。
• enableCORS html2canvas截图模式下跨域的启用状态,值为boolean类型，默认为false
• proxyAddress html2canvas截图模式下的图片服务器代理地址,值为string类型，默认为undefined
• writeBase64 是否将截图内容写入剪切板，值为boolean类型，默认为true
• wrcWindowMode 是否启用窗口截图模式，值为boolean类型，默认为false，即当前标签页截图。如果标签页截图的内容有滚动条或者底部有空缺，可以考虑启用此模式。
• hiddenScrollBar 是否隐藏滚动条，用webrtc模式截图时chrome 112版本的浏览器在部分系统下会挤压出现滚动条，如果出现你可以尝试通过此参数来进行修复。值为Object类型，有4个属性：
  • state: boolean; 启用状态, 默认为false
  • fillState?: boolean; 填充状态，默认为false
  • color?: string; 填充层颜色，滚动条隐藏后可能会出现空缺，需要进行填充，默认填充色为黑色。
  • fillWidth?: number; 填充层宽度，默认为截图容器的宽度
  • fillHeight?: number; 填充层高度，默认为空缺区域的高度