大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。大家好，我是「前端实验室」爱分享的了不起~

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

js-web-screen-shot

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

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

特点

• 纯前端实现：无需后端服务，完全在浏览器中运行。
• 多种格式支持：可以将截图保存为 PNG、JPEG 等格式。
• 自定义截图区域：支持对整个页面、指定元素或特定区域进行截图。
• 跨浏览器兼容：支持主流浏览器（如 Chrome、Firefox、Edge 等）。
• 简单易用：通过简单的 API 调用即可完成截图操作。

安装使用

js版本

安装

<template><!--截图组件--><screen-shortv-if="screenshotStatus"@destroy-component="destroyComponent"@get-image-data="getImg"></screen-short></template><scriptlang="ts">exportdefaultdefineComponent({setup(props,context){constscreenshotStatus=ref<boolean>(false);//销毁组件函数constdestroyComponent=function(status:boolean){screenshotStatus.value=status;}//获取裁剪区域图片信息constgetImg=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

最后

欢迎加入前端实验室读者交流群，分享交流优秀的技术和资料。

如果这篇文章对你有用的话，请大家多多 [点赞]，给一个小小的鼓励吧~