一个便捷的web截图库~【送源码】

随着时间的发展,前端开发的范围越来越广,能够实现的功能也越来越多,要实现的功能也五花八门,今天就给大家介绍一个web截图库,让前端也能实现截图功能—— js-web-screen-shot

图片

js-web-screen-shot

js-web-screen-shot 是一个基于 JavaScript 的网页截图工具,允许开发者在浏览器中直接对网页进行截图。这个工具可以在纯前端环境中运行,不需要服务器端的支持,非常适合用于前端开发和调试

目前有两个版本,一个是纯js版本,一个是vue3版本

特点

  • 纯前端实现:无需后端服务,完全在浏览器中运行。

  • 多种格式支持:可以将截图保存为 PNG、JPEG 等格式。

  • 自定义截图区域:支持对整个页面、指定元素或特定区域进行截图。

  • 跨浏览器兼容:支持主流浏览器(如 Chrome、Firefox、Edge 等)。

  • 简单易用:通过简单的 API 调用即可完成截图操作。

安装使用

js版本

安装

npm install js-web-screen-shot
使用
import ScreenShot  from "js-web-screen-shot";
const imgSrc = ref("")
const begainScreen = () => {console.log("开始截屏")new ScreenShot ({enableWebRtc: false,  level: 9999,  //层级级别completeCallback: callback});
}
const callback = (base64data:any)=>{console.log(base64data);imgSrc.value = base64data.base64
}
vue3使用

安装

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

在项目的入口文件main.ts/main.js引入插件

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

在组件中使用

<template><!--截图组件--><screen-short v-if="screenshotStatus"@destroy-component="destroyComponent"@get-image-data="getImg"></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);}return {screenshotStatus,destroyComponent,getImg}}
})
</script>

js-web-screen-shot里有很高的自由度,可以通过配置参数来决定是否显示某个功能icon,并且监听回调函数

同时插件还监听了三个快捷键:

  • Esc,按下键盘上的esc键时,等同于点了工具栏的关闭图标。

  • Enter,按下键盘上的enter键时,等同于点了截图工具栏的确认图标。

  • Ctrl/Command + z,按下这两个组合键时,等同于点了截图工具栏的撤销图标。

js-web-screen-shot 提供了两种截图模式:webrtc 和 html2canvas,如果不开启 enableWebRtc那么就会使用html2canvas 截图模式,更多的使用方式大家可以观看文档~

https://gitee.com/likai119/js-screen-shot

  ——EOF——

福利:

扫码回复【酒店】可免费领取酒店管理系统源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/45140.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式板级支持包(BSP)80道面试题及参考答案(3万字长文)

目录 解释什么是通用输入输出(GPIO)接口及其在BSP中的作用。 描述SPI接口的主要特点和用途。 说明IC总线协议的工作原理。 如何在BSP中配置一个UART接口? USB设备控制器在BSP中的初始化步骤是什么? 以太网接口如何在BSP中被支持? 什么是SDIO,它在哪些场景下会被使…

语言模型演进:从NLP到LLM的跨越之旅

在人工智能的浩瀚宇宙中&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是一个充满挑战和机遇的领域。随着技术的发展&#xff0c;我们见证了从传统规则到统计机器学习&#xff0c;再到深度学习和预训练模型的演进。如今&#xff0c;我们站在了大型语言模型&#xff…

【接口设计】如何设计统一 RESTful 风格的数据接口

如何设计统一 RESTful 风格的数据接口 1.版本控制1.1 通过 URL1.2 通过自定义请求头1.3 通过 Accept 标头 2.过滤信息3.确定 HTTP 的方法4.确定 HTTP 的返回状态5.定义统一返回的格式 近年来&#xff0c;随着移动互联网的发展&#xff0c;各种类型的客户端层出不穷。如果不统一…

Mybatis-Plus最优化持久层开发

Mybatis-plus&#xff1a;最优化持久层开发 一&#xff1a;Mybatis-plus快速入门&#xff1a; 1.1&#xff1a;简介&#xff1a; Mybatis-plus&#xff08;简称MP&#xff09;是一个Mybatis的增强工具&#xff0c;在mybatis的基础上只做增强不做改变; 提高效率&#xff1b;自…

国漫推荐11

1.《元龙》 2.《恶魔法则》2023年9月29日 3.《三十六骑》 4.《山河剑心》 5.剑网3侠肝义胆沈剑心 《剑网3侠肝义胆沈剑心》 《剑网3侠肝义胆沈剑心 第二季》 《剑网3侠肝义胆沈剑心之长漂》&#xff08;番外&#xff09; 《剑网3侠肝义胆沈剑心 第三季》 6.《仙逆》东方玄幻…

Uniswap V2和Uniswap V3的区别

Uniswap V2和Uniswap V3是两个不同版本的去中心化交易协议&#xff0c;由Uniswap团队开发和维护。它们之间的主要区别包括以下几点&#xff1a; 资金池模型不同: Uniswap V2: 使用恒定乘积市场模型&#xff0c;也就是 x * y k。这意味着每个资金池中的资产的乘积保持不变&…

Transformer的模型的扩展与应用领域的拓展 - Transformer教程

在如今的人工智能领域&#xff0c;Transformer模型已经成为了众多研究和应用的焦点。从自然语言处理到计算机视觉&#xff0c;Transformer模型的扩展与应用领域的拓展带来了无数的可能性。今天&#xff0c;我们就来聊聊Transformer模型的扩展以及它在不同领域的广泛应用。 首先…

生产管理系统功能全拆解:哪些功能是企业真正需要的?

制造业的伙伴经常听到“生产管理”&#xff0c;但很多人可能只是模糊地知道它与工厂、生产线有关。那么&#xff0c;到底什么是生产管理呢&#xff1f;它的重要性又体现在哪里呢&#xff1f;接下来&#xff0c;我就以轻松的方式&#xff0c;带大家走进生产管理的世界&#xff0…

函数练习·二 基础题

# 【以下功能都使用函数封装】 # 提示: 涉及到要返回的题目,请使用return # 基础题 # 1.封装函数&#xff0c;计算从1到某个数以内所有奇数的和并返回 def fn1(n): return sum([i for i in range(1, n, 2)]) print(fn1(7)) # 2.封装函数&#xff0c;判断某个数是否是偶…

微信闪退怎么回事?实用技巧助你轻松应对

在使用微信的过程中&#xff0c;偶尔会遇到闪退的问题&#xff0c;这不仅影响我们的日常沟通&#xff0c;还可能导致重要信息的丢失。那么&#xff0c;微信闪退怎么回事呢&#xff1f;闪退的原因可能有很多&#xff0c;包括软件问题、手机存储不足、系统不兼容等。本文将详细分…

笔记本电脑数据丢失如何恢复?

在计算机网络日益普及的今天&#xff0c;计算机已波及到人们的生活、工作、学习及消费等广泛领域&#xff0c;其服务和管理也涉及政府、工商、金融及用户等诸多方面。笔记本电脑等电子产品被各行各业的人所喜爱和接受&#xff0c;早已成为人们出差的必备品&#xff0c;可以用来…

keepalived高可用集群

一、keepalived&#xff1a; 1.keepalive是lvs集群中的高可用架构&#xff0c;只是针对调度器的高可用&#xff0c;基于vrrp来实现调度器的主和备&#xff0c;也就是高可用的HA架构&#xff1b;设置一台主调度器和一台备调度器&#xff0c;在主调度器正常工作的时候&#xff0…

OS_同步与互斥

2024-07-04&#xff1a;操作系统同步与互斥学习笔记 第9节 同步与互斥 9.1 同步互斥的基本概念9.1.1 同步关系9.1.2 互斥关系9.1.3 临界资源9.1.4 临界区9.1.5 同步机制应遵循规则 9.2 软件同步机制9.2.1 单标志法9.2.2 双标志先检查法9.2.3 双标志后检查法9.2.4 peterson算法 …

BP神经网络与反向传播算法在深度学习中的应用

BP神经网络与反向传播算法在深度学习中的应用 在神经网络的发展历史中&#xff0c;BP神经网络&#xff08;Backpropagation Neural Network&#xff09;占有重要地位。BP神经网络通过反向传播算法进行训练&#xff0c;这种算法在神经网络中引入了一种高效的学习方式。随着深度…

jstat命令介绍

jstat&#xff1a;查看JVM统计信息 一 基本情况二 基本语法2.1 option参数1. 类装载相关的&#xff1a;2. 垃圾回收相关的-gc&#xff1a;显示与GC相关的堆信息。包括Eden区、两个Survivor区、老年代、永久代等的容量、已用空间、GC时间合计等信息。-gccapacity&#xff1a;显示…

【C++】C++-机房收费管理系统(源码+注释)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

LeetCode之最长回文子串

1.题目链接 5. 最长回文子串 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/longest-palindromic-substring/description/ 2.题目解析 对于这道题目我们可以使用动态规划的思路来求解&#xff0c;具体思路是&#xff0c;对于一个长度大于2的子串&…

生成式信息检索(问答系统与信息检索的进步)

文章目录 什么是问答系统&#xff08;Question Answering Systems&#xff09;检索系统的演变经典检索系统“Term” 文档搜素的最小单位倒排索引词嵌入的出现预训练语言模型 用于问答的语言模型设计方案选择&#xff1a;封闭式与开放式问答系统对比方案A&#xff1a;封闭式生成…

【干货】一文带你看懂什么是渠道分销?如何管理渠道分销

在当今竞争激烈的市场环境中&#xff0c;企业想要扩大市场份额、提高产品或服务的可见度&#xff0c;有效的渠道分销策略是关键。 什么是渠道分销&#xff1f; 渠道分销&#xff0c;简而言之&#xff0c;是指企业利用中间商&#xff08;如经销商、代理商、零售商等&#xff0…

springboot解压文件流zip压缩包

springboot解压文件流zip压缩包 原始文件存储的地方&#xff1a; 需要在当前目录下解压该文件&#xff0c;如下图&#xff1a; 代码示例&#xff1a; private Result<String> getLocationGuideLayerName(YbYstbtqTaskResolveParam params, String fishnetLayerName)…