使用 Electron 創建屏幕截圖

AlphaGooo 發布于2019-08-22 13:31 / 3447人閱讀

摘要：使用創建屏幕截圖此系列文章的應用示例已發布于可以或下載后運行查看歡迎中的模塊可用于訪問的中提供的任何媒體例如音頻視頻屏幕和窗口這個模塊有一個版本可用于這兩個進程和在瀏覽器中查看完整文檔創建屏幕截圖支持進程渲染器此示例使用模塊采集正在使

使用 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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