js 屏幕截图

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>screen shot demo</title>
    <!--修改文件引入路径为你项目的路径即可-->
    <script src="./screenShotPlugin.umd.js"></script>
</head>

<body>
    <div id="app">
        <img src="./1.png">
        <div>
            截图插件文字展示
        </div>
        <br />
        <button onclick="changeScreenShot()"> 点击截图 </button>
        <p>图片展示</p>
        <img src="" alt="" id="show" >

    </div>
</body>
<script type="text/javascript">
    const changeScreenShot = async () => {
        // 截图确认按钮回调函数
        const callback = (res) => {
            const img = document.querySelector("#show");
            img.src = res.base64;
        }
        // 截图取消时的回调函数
        const closeFn = () => {
            console.log("截图窗口关闭");
        }
        new screenShotPlugin({ enableWebRtc: true, completeCallback: callback, closeCallback: closeFn });
    }
</script>



</html>

screenShotPlugin.umd.js文件这里

其他方法看这里js-screen-shot · likaia

  • 14
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
新颖网络截屏插件是一款能够非常方便的将屏幕截屏图片发送到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
在 Vue.js 中,您可以使用 `html2canvas` 库来实现前端屏幕截图功能。`html2canvas` 是一个流行的 JavaScript 库,它可以将网页的内容转换为 Canvas 元素,从而方便地进行截图操作。 首先,您需要安装 `html2canvas` 库。可以使用 npm 或 yarn 进行安装: ```bash npm install html2canvas # 或 yarn add html2canvas ``` 然后,在您的 Vue 组件中,您可以使用以下代码来实现屏幕截图功能: ```html <template> <div> <!-- 您的组件内容 --> <button @click="captureScreenshot">截图</button> </div> </template> <script> import html2canvas from 'html2canvas'; export default { methods: { captureScreenshot() { html2canvas(document.body).then(canvas => { // 在此处处理截图结果 const screenshotImage = canvas.toDataURL('image/png'); console.log(screenshotImage); // 可以将截图结果保存到服务器或展示在页面上等等 }); } } } </script> ``` 在上述代码中,我们引入了 `html2canvas` 并在 `captureScreenshot` 方法中调用它。`html2canvas` 接受一个 DOM 元素作为参数(这里我们传入了 `document.body`),然后返回一个 Promise,其中包含了生成的 Canvas 元素。 您可以在 `.then()` 方法中处理截图结果。在示例中,我们将截图转换为 base64 编码的 PNG 图像,并打印到控制台上。您可以根据需要,将截图结果保存到服务器或在页面上展示等等。 请注意,由于浏览器的安全限制,`html2canvas` 无法处理跨域的图片和内容,所以请确保您的网页内容和图片都来自同一个域名。 希望这可以帮助到您!如有任何进一步的问题,请随时提问。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值