前端js如何实现截屏功能，插件推荐js-web-screen-shot

爬不动的猫

已于 2023-07-25 16:18:44 修改

阅读量2.8k

点赞数 2

分类专栏：业务功能文章标签：前端 javascript github npm

于 2023-07-21 16:53:12 首次发布

本文链接：https://blog.csdn.net/weixin_49219273/article/details/131855298

版权

业务功能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html2canvas

读取dom结构转换成canvas，最后转成图片形式展示
缺点：没有编辑功能

链接：html2canvas

在这里插入图片描述

js-web-screen-shot

大佬模仿qq截图实现的，也可以搭配webrtc实现web端远程桌面共享
链接：

github
gitee

简单使用

npm install js-web-screen-shot --save

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

new ScreenShort({
	enableWebRtc: false, // 是否启用webrtc，值为false则使用html2canvas来截图
	loadCrossImg: true, // 跨域
	level: 9999, // 层级
});

注意点：
在这里插入图片描述

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爬不动的猫

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
前端js如何实现截屏功能，插件推荐js-web-screen-shot

读取dom结构转换成canvas，最后转成图片形式展示：没有编辑功能。大佬模仿qq截图实现的，也可以搭配webrtc实现web端远程桌面共享
复制链接

扫一扫

专栏目录

phantomjs-master 网页截图js插件

11-04

phantomjs一款可以自己设置分辨率的网页截图js插件，如果截取网页内网过于太大的话，phantomjs是一款不错的软件，而且经本人测试，效果比canvas功能强大

gitblog_00039的博客

05-19

419

1 条评论您还未登录，请先登录后发表或查看评论

纯前端实现截图功能

最新发布

MISS_zhang_0110的博客

05-21

384

【代码】纯前端实现截图功能。

JavaScript实现浏览器特定区域截屏和下载功能，前端面试心得必备技能储备详解

m0_55030688的博客

03-30

1139

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。

JavaScript实现浏览器特定区域截屏和下载功能

m0_74535175的博客

04-05

309

var c=this.eagleEye.getImage(a,b), // 通过Jtopo.js自带的方法获取canvas的截图base64资源。考虑到canvas的污染问题，于是思考不对原来的canvas进行操作，而是直接对整个浏览器进行区域截屏的方式，发现果然可用。虽然改写后的方法确实能够做到将canvas的部分进行截图，但是因为跨域问题，原来绘制的canvas会被破坏。”),this // 将截取的base64资源作为图片资源放置到新的浏览器标签页img标签中。// 打开新的浏览器标签页。

screen-shot:web端自定义截屏插件

03-05

Vue网络屏幕截图· web端自定义截屏插件（Vue3版），运行视频：插件，本插件仅支持Vue3，如需在其他平台使用请移步：效果图如下：插件安装 yarn add vue-web-screen-shot # or npm install vue-web-screen-shot --save 插件使用由于插件使用Vue3编写，因此它只能在Vue3项目中运行，如果你需要在vue2项目或者其他js项目中运行请移步：，它采用原生js编写，功能与本插件功能一致。在项目的入口文件main.ts/main.js中加入附加代码 // 导入截屏插件 import screenShort from "vue-web-screen-shot" ; const app = createApp ( App ) ; // 使用截屏插件 app . use ( screenShort ) 在你的需要使用的

js-screen-shot:web端自定义截屏插件(原生JS版)

05-14

js-web-screen-shot · web端自定义截屏插件(原生JS版)，运行视频： ,效果图如下：插件安装 yarn add js-web-screen-shot # or npm install js-web-screen-shot --save 插件使用由于插件采用原生js编写且不依赖任何第三方库，因此它可以在任意一台支持js的设备上运行。 import形式使用插件在需要使用截屏插件的业务代码中导入插件 import ScreenShort from "js-web-screen-shot"; 在业务代码中使用时实例化插件即可 new ScreenShort(); :warning:注意：实例化插件时一定要等dom加载完成，否则插件无法正常工作。 cdn形式使用插件将插件的dist文件夹复制到你的项目中使用script标签引入dist目录下的screenShotPlugi

在vue项目里使用js-web-screen-shot 实现截图的功能

fenfen5162的博客

03-01

1929

怎么在前端项目里添加一个截图功能呢，今天我们使用js-web-screen-shot 来实现一下，超详细的代码，教你轻轻松松做截图。

前端 “图片截取” 插件

qq_52373373的博客

07-18

452

这是一个纯 js 写的图片截取插件，试试看你就知道了

auto js实现自动截屏

热门推荐

luckydog

04-23

2万+

// 请求允许自动录屏 //请求截图 if(!requestScreenCapture()){ toast("请求截图失败"); exit(); } 连续截图 //连续截图10张图片(间隔1秒)并保存到存储卡目录 for(var i = 0; i < 10; i++){ captureScreen("/sdcard/img" + i + ".png"); ...

Screenshot-JS屏幕截图插件脚本

12-23

"Screenshot-JS"是一个强大的JavaScript插件，专为Web前端开发者设计，用于实现便捷、高效的屏幕截图功能。本文将详细介绍这个插件的原理、使用方法以及一些关键知识点。一、基本原理 Screenshot-JS基于HTML5的...

JS实现截图功能

06-05

var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }

JS截屏控件

03-21

新颖网络截屏插件是一款能够非常方便的将屏幕截屏图片发送到WEB服务器中的轻量级ActiveX控件，它可以非常方便的集成到您的博客，BBS，论坛，OA，或电子商务网站中，带给用户前所未有的用户体验。同时新颖网络提供了ASP.NET(C#)和PHP的开发文档，和完善的ActiveX接口，您可以非常容易的使用和进行二次开发。最新版本的截屏控件极大的优化了图片数据传输的效率，可以帮助用户节省约40%的上传时间。相信新颖网络WEB截屏控件能够帮助您赢得市场。产品特点如下： 1. 基于标准HTTP协议。 2. 支持Jpg图片格式。 3. 一流的用户体验，操作方便。 4. 增加截屏图片编辑器。可任意输入文字，绘制矩形箭头等。 5. 免费提供JavaScript SDK包，方便您将插件快速集成到已有网站中。支持语言：PHP,JSP,ASP,ASP.NET(C#),ASP.NET(VB),C++,VC,VC.NET,VB,VB.NET,C#,C#.NET,Delphi,C++Builder 支持平台：Visual Studio 6.0/2002/2003/2005/2008/2010,C++ Builder 6.0/2009/2010,Delphi 7/2009,Visual Basic 6.0/2008 支持脚本：JavaScript,VBScript 支持系统：Windows NT,Windows 2003,Windows XP,Windows Vista,Windows 7,Linux 支持图片格式：PNG 产品介绍：http://www.cnblogs.com/xproer/archive/2010/08/09/1796077.html 在线演示-标准版：http://www.ncmem.com/products/screencapture/demo/index.html 在线演示-专业版：http://www.ncmem.com/products/screencapture/demo2/index.html 在线演示-CKEditor3.6.1：http://www.ncmem.com/products/screencapture/demo-ckeditor361/index_ckeditor361.html 布署文档：http://www.cnblogs.com/xproer/archive/2011/09/14/2176188.html 升级日志：http://www.cnblogs.com/xproer/archive/2010/12/04/1896399.html 开发文档-ASP.NET(C#)：http://www.cnblogs.com/xproer/archive/2010/12/04/1896552.html 开发文档-PHP：http://www.cnblogs.com/xproer/archive/2011/05/16/2047915.html 开发文档-JSP：http://www.cnblogs.com/xproer/archive/2011/05/20/2051862.html 示例下载-标准版：http://www.ncmem.com/download/ScreenCapture-demo.rar 示例下载-专业版：http://www.ncmem.com/download/ScreenCapturePro-demo.rar 文档下载：http://www.ncmem.com/download/ScreenCapture-doc.rar VC运行库：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf 联系邮箱：1085617561@qq.com 联系QQ：1085617561

shearphoto2.0版 -HTML5本地截图插件，拍照截图插件

09-05

shearphoto2.0 是HTML5头像截图插件，拍照截图，JS截图，美工切图插件，能直接压缩数码相机图片进行截图！是互联网上写得最好的一个同类型插件 ShearPhoto 完美支持Linux Windows 服务器，国外空间等完美通过。兼容IE6及所有浏览器,兼容PHP5.2X至PHP7.0！ ShearPhoto拖动拉伸超准，超流畅，在互联网同类型软件绝对排行第一，除了shearphoto，你别无选择！ JAVA用户请到http://git.oschina.net/alexyang/JFinal-shearphoto 下载 ------------------------------------------------------------------------ 从shearphoto 1.5直接跳跃到shearphoto 2.0，这是shearphoto重大革新。本来我是想shearphoto 1.6 、1.7、 1.8 慢慢升的，但是这样升级只会让shearphoto慢慢走向灭亡！结果我又辛苦了一个多星期，把shearphoto 2.0升级完成！ shearphoto2.0之前，我认为没必要加入HTML5，兼容IE6 7 8就够。但是直到后来！我知道这是我一个错误的决定因为用户并没有为shearphoto 1.5埋单，原因shearphoto 1.5没有HTML5截取，用户觉得会增加服务器负载！而且又不是本地加载图片！我一个错误的决定！导致用户份额一直没有明显大增。 shearphoto 2.0是收集所有用户的意见开发而成的！重大的特性就是全面支持HTML5 1：支持translate3d 硬件加速移动 2：加入图片预览功能 3：加入了压缩数码相机图片，以及HTML5 canvas本地切图,截图但依然继续支持IE6 7 8 哦！有人问IE6 7 8不兼容HTML5啊，你骗人吗？先不要急！shearphoto 2.0的机制是这样的：有HTML5则使用HTML5 canvas切图，截图，JS先会截取一张最合理化的截图，然后交给后端，根据用户设置，进行压缩截图没有HTML5的浏览器则采用先上传再截取的策略，就是原先1.5的策略。当然有些用户如果不喜欢HTML5，也可以根据接口自行关闭 4：加HTML5图片特效，就一如美图秀秀这样的特效！shearphoto一共提供14种漂亮特效，感谢腾讯AI对图片特效提供支持 shearphoto 2.0增添很多接口，大部份是HTML5的设置！请下载源码体验 shearphoto外忧内患，已经没退路了。在WEB截图界，shearphoto必须要干个第一！.shearphoto不再局限于头像截取，shearphoto更可用于商城的商品图片编辑。 shearphoto含HTML5图片压缩功能！一张十M 二十M的图，照样能帮你压成你要的容量和尺寸，一般情况下！商城的商品图片都是通过数码相机拍摄后，要用PHOTOshop把数码相机内几十M的图片，压缩，截取，然后才能上传到商城服务器！这样的操作是不是太麻烦了！如果你使用shearphoto你就快捷很多了，shearphoto你只需要直接选择图片，就会帮你进行压缩截取，上传，添加到数据库。这样的一条龙服务！ shearphoto 2.0的机制是无可挑剔的！但是不排除有BUG存在，如果用户遇到BUG情况，请到论坛或官方QQ群进行反馈，我会第一时间发布补丁！ shearphoto支持PHP和JAVA，JAVA由网友所写，但是JAVA版并不是太完善，使用的是以前的shearphoto1.3！我一直很想把NET python nodejs JAVA的很完善地做出来！可惜个人能力有限，如果你喜欢shearphoto，你又会玩 NET python nodejs JAVA，又想为互联网做贡献，那么你可以加入shearphoto团队，把这些后端版本做出来。但shearphoto没有薪水给你！ shearphoto免费开源的，没有利润可图，纯粹是抱着为互联网做贡献的心态！如果你跟我一样，请加入到shearphoto后端开发浏览器支持：兼容IE 6 及以上的所有浏览器后端支持：支持PHP5.X 至 PHP7.0或以上支持JAVA后端（shearphoto1.3开发）系统支持：支持linux WINDOW服务器 shearphoto采用原生JS + 原生PHP所写，绝对不含JQ插件，对JQ情有独忠的，这个插件不合适你 2015 年 9月 5 日 shearphoto作者：明哥先生版本

web-screenshot:A screenshot tool for web page. web页面截图工具

05-10

网络截屏网页的屏幕截图工具。 web页面截图工具。用法首先安装NodeJS和NPM 。 git clone git@github.com:yutingzhao1991/web-screenshot.git cd web-screenshot npm install npm start 然后使用可以访问以获得iqiyi主页的屏幕截图。原料药 /截屏接受参数： url：网站页面，必填。 width：网页宽度，默认为800px。 delay：数字（秒），延迟制作屏幕快照之前，有用的是需要使用js初始化的网页。选择器：类似于“ #container”，“。test”，以在网页中分配要截屏的元素。

分享js粘帖屏幕截图到web页面插件screenshot-paste

10-22

`screenshot-paste` 是一个JavaScript插件，它允许用户直接通过浏览器的粘贴功能将屏幕截图贴到Web页面上，并进行预览和上传。这种技术极大地简化了传统的截图上传流程，提升了用户体验，减少了用户需要保存文件到...

js-webcam-screenshot:通过 JavaScript 从网络摄像头捕获屏幕截图

05-30

通过 JavaScript 从网络摄像头捕获屏幕截图特征 js-webcam-screenshot 可以直接从浏览器中捕获屏幕截图。然后可以将图像呈现在和/或可以作为普通文件上传发布。 js-webcam-screenshot 可以使用来自各种框架...

使用html2canvas插件进行页面截屏

weixin_68658847的博客

11-15

433

使用html2canvas插件进行页面截屏

js截屏工具(html2anvas)

qq_43205326的博客

02-22

1302

快速了解前端js截图工具，文档链接，以及采坑和解决方法，亲测可以用。

js实现自定义截图功能

06-10

要实现自定义截图功能，可以使用 HTML5 中的 Canvas 和 JavaScript 来实现。下面是一个简单的实现方法： 1. 创建一个包含要截图的元素的 div。 2. 使用 HTML5 中的 Canvas 元素创建一个画布。 3. 使用 JavaScript 获取要截图的 div 元素的位置和大小。 4. 将 div 元素的内容绘制到 Canvas 上。 5. 使用 Canvas 的 toDataURL() 方法将 Canvas 转换为图像数据。 6. 将图像数据发送到服务器或者直接在页面上显示。以下是一个简单的实现示例： HTML 代码： ``` <div id="screenshot"> <h1>自定义截图功能</h1> <p>这是要截图的内容</p> </div> <button onclick="takeScreenshot()">截图</button> ``` JavaScript 代码： ``` function takeScreenshot() { // 获取要截图的元素 var element = document.getElementById("screenshot"); // 创建 Canvas 元素 var canvas = document.createElement("canvas"); canvas.width = element.offsetWidth; canvas.height = element.offsetHeight; // 获取元素位置和大小 var rect = element.getBoundingClientRect(); var x = rect.left; var y = rect.top; var width = rect.width; var height = rect.height; // 绘制元素内容到 Canvas 上 var ctx = canvas.getContext("2d"); ctx.drawImage(document.body, x, y, width, height, 0, 0, width, height); // 将 Canvas 转换为图像数据 var dataURL = canvas.toDataURL(); // 显示或发送图像数据 console.log(dataURL); } ``` 这个示例中，我们使用了 document.body 来绘制整个页面，如果只想截图特定的元素，可以将其替换为要截图的元素。然后通过 toDataURL() 方法将 Canvas 转换为图像数据，可以将数据显示在页面上或者通过 AJAX 发送到服务器。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交