从零开始用electron手撸一个截屏工具的示例代码

2023年6月11日上午5:10 • JavaScript

下面是从零开始用Electron手撸一个截屏工具的示例代码的攻略：

创建一个Electron项目

首先，我们需要使用npm来创建一个空的Electron项目，可以使用以下命令：

npm init -y
npm install electron --save-dev

安装完成后，我们需要在package.json文件中添加一个start script：

"scripts": {
    "start": "electron ."
}

配置Electron

在Electron的主进程中，我们需要使用以下代码来创建一个窗口，并调用BrowserWindow模块来加载一个HTML文件：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

app.on('ready', () => {
  let win = new BrowserWindow({ width: 800, height: 600 })
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '../build/index.html'),
    protocol: 'file:',
    slashes: true
  })

  win.loadURL(startUrl)

  win.on('closed', () => {
    win = null
  })

})

在这个示例中，我们创建了一个宽为800，高为600的窗口，并加载了一个HTML文件。同时，我们设置了一个路由来指向我们的HTML文件。当应用程序准备好时，我们便可以调用win.loadURL来打开指定的页面。

实现截屏功能

接下来，我们需要实现截屏功能，需要使用Electron的remote模块来访问Electron主进程。这里我提供一个简单的示例代码：

<!DOCTYPE html>
<html>
  <body>
    <button onclick="capture()">截屏</button>
    <canvas id="canvas" style="display:none;"></canvas>
    <script>
      const { desktopCapturer } = require('electron').remote
      const fs = require('fs')

      function capture() {
        desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: 1920, height: 1080 } }, (error, sources) => {
          if (error) {
            console.error('error', error)
            return
          }
          sources.forEach(source => {
            if (source.name === 'Entire screen') {
              const screenshot = source.thumbnail.toDataURL()
              const canvas = document.getElementById('canvas')
              const ctx = canvas.getContext('2d')
              const image = new Image()

              image.onload = () => {
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
                const dataURL = canvas.toDataURL()
                fs.writeFile('screenshot.png', dataURL.split(',')[1], 'base64', (err) => {
                  if (err) {
                    console.error(err)
                  } else {
                    console.log('Screenshot saved')
                  }
                })
              }
              image.src = screenshot
            }
          })
        })
      }
    </script>
  </body>
</html>

这段代码首先获取了屏幕源，然后遍历找到了整个屏幕截图，把截图写入一个PNG文件中。请注意，这里需要使用fs模块来保存截图。