vue使用插件js-web-screen-shot完成局部截图并保存上传给后端

燃烧的冰山..

已于 2022-05-10 14:04:35 修改

阅读量1w

点赞数 11

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-03-18 11:22:27 首次发布

本文链接：https://blog.csdn.net/weixin_43822237/article/details/123568175

本文介绍了如何在Vue.js项目中使用js-web-screen-shot插件进行屏幕局部截图，并结合截图工具栏功能，将截图图片上传到后端。详细步骤包括插件的下载、引入、实例化以及截图后的图片上传处理。最后展示了运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 js-web-screen-shot 插件完成屏幕局部截图带截图工具栏，然后将截取的图片上传给后端

第一步、先下载js-web-screen-shot插件

yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save

第二步、在vue页面引入import插件

import ScreenShort from "js-web-screen-shot";

第三步、在点击截图监听事件中实例化插件

var timer=setTimeout(()=>{
        const screenShotHandler = new ScreenShort({
        enableWebRtc: false,  //是否显示选项框
        level:99,  //层级级别
        completeCallback: this.callback,
        closeCallback: this.closeFn,
     );
 },0)

这个时间值可以不要，我是new时间没有触发才加的时间值，这个根据自己项目问题添加，如果还想使用其他参数和方法，请参考js-web-screen-shot网页