electron 屏幕标注_使用 Electron 创建屏幕截图

使用 Electron 创建屏幕截图

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

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

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

创建屏幕截图

支持: 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 支持, 谢谢.