使用 Electron 创建屏幕截图

AlphaGooo 发布于2019-08-22 13:31 / 3449人阅读

摘要：使用创建屏幕截图此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块可用于访问的中提供的任何媒体例如音频视频屏幕和窗口这个模块有一个版本可用于这两个进程和在浏览器中查看完整文档创建屏幕截图支持进程渲染器此示例使用模块采集正在使

使用 Electron 创建屏幕截图

此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .

Electron 中的 desktopCapturer 模块可用于访问 Chromium 的 getUserMedia web API 中提供的任何媒体, 例如音频, 视频, 屏幕和窗口.

这个模块有一个版本可用于这两个进程: ipcMain 和 ipcRenderer.

在浏览器中查看完整 API 文档.

创建屏幕截图

支持: Win, macOS, Linux | 进程: 渲染器

此示例使用 desktopCapturer 模块采集正在使用的屏幕, 并创建全屏幕截图.

点击示例按钮将截取当前屏幕的截图, 并在默认查看器中打开它.

渲染器进程

const electron = require("electron")
const desktopCapturer = electron.desktopCapturer
const electronScreen = electron.screen
const shell = electron.shell

const fs = require("fs")
const os = require("os")
const path = require("path")

const screenshot = document.getElementById("screen-shot")
const screenshotMsg = document.getElementById("screenshot-path")

screenshot.addEventListener("click", function (event) {
  screenshotMsg.textContent = "正在采集屏幕..."
  const thumbSize = determineScreenShotSize()
  let options = { types: ["screen"], thumbnailSize: thumbSize }

  desktopCapturer.getSources(options, function (error, sources) {
    if (error) return console.log(error)

    sources.forEach(function (source) {
      if (source.name === "Entire screen" || source.name === "Screen 1") {
        const screenshotPath = path.join(os.tmpdir(), "screenshot.png")

        fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
          if (error) return console.log(error)
          shell.openExternal("file://" + screenshotPath)
          const message = `截图保存到: ${screenshotPath}`
          screenshotMsg.textContent = message
        })
      }
    })
  })
})

function determineScreenShotSize () {
  const screenSize = electronScreen.getPrimaryDisplay().workAreaSize
  const maxDimension = Math.max(screenSize.width, screenSize.height)
  return {
    width: maxDimension * window.devicePixelRatio,
    height: maxDimension * window.devicePixelRatio
  }
}

如果这边文章对您有帮助, 感谢下方点赞或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.

GPU云服务器云服务器屏幕截图 linux 屏幕截图 js屏幕截图插件 electron使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92374.html

Node.js 实现远程桌面监控

摘要：描述最近使用实现了一个远程桌面监控的应用，分为服务端和客户端，客户端可以实时监控服务端的桌面，并且可以通过鼠标和键盘来控制服务端的桌面。接下来我们要实现远程控制，也就是监听事件，传递事件，执行事件这几部分。描述最近使用node实现了一个远程桌面监控的应用，分为服务端和客户端，客户端可以实时监控服务端的桌面，并且可以通过鼠标和键盘来控制服务端的桌面。 showImg(https://...

caozhijian 2019-08-23 18:28 评论0 收藏0
使用 Electron 获取应用和用户系统信息

摘要：使用获取应用和用户系统信息此系列文章的应用示例已发布于可以或下载后运行查看欢迎使用几个和模块您可以收集有关用户系统应用程序或屏幕的信息相关文档的链接位于下面的示例中获取应用信息支持进程主进程的模块可用于获取应用程序在用户计算机上的位置使用 Electron 获取应用和用户系统信息此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 ...

xuxueli 2019-08-21 16:58 评论0 收藏0
前端阅读 - 收藏集 - 掘金

摘要：实现不定期更新技巧前端掘金技巧，偶尔更新。统一播放效果实现打字效果动画前端掘金前端开源项目周报前端掘金由出品的前端开源项目周报第四期来啦。 Web 推送技术 - 掘金腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章，欢迎大家关注！作者：villainthr 摘自前端小吉米伴随着今年 Google I/O 大会的召开，一个很火的概念--Progressive Web Apps ...

lingdududu 2019-08-20 17:05 评论0 收藏0
Electron入门介绍

摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适...

wing324 2019-08-21 18:41 评论0 收藏0