小白手把手教你如何用Electron从零撸一个截屏工具

2023-12-06 04:45:49

大家好，我是前端开发人员，最近在尝试利用 electron 将一个 web 版的聊天工具包装成一个桌面 APP。作为一个聊天工具，截屏可以说是一个必备功能了。不过遗憾的是没有找到很成熟的库来用，也可能是打开方式不对，总之呢没看到现成的，于是就想从头撸一个简单的截图工具。下面就进入正题吧！

electron 可以看做是 js 时代的 nw.js，它提供了更友好的 api 来开发跨平台的桌面应用，当然，它也承袭了 nw.js 很多的缺点，其中一个就是依赖 node.js，这导致开发出来的应用体积非常大，好在我们可以通过一些手段来优化。

首先，你需要安装 Electron 和 Node.js。Electron 可以从其官网下载，Node.js 可以从其官网下载。

接下来，你需要创建一个新的 Electron 项目。你可以使用以下命令：

$ electron-quick-start

这将在你的当前目录中创建一个名为 my-app 的新目录。

现在，你需要打开 my-app 目录并安装必要的依赖项。你可以使用以下命令：

$ cd my-app
$ npm install

这将安装 Electron 和其他必要的依赖项。

接下来，你需要在 main.js 文件中编写你的应用程序的代码。main.js 文件是你的应用程序的主文件。它负责创建应用程序窗口并处理用户输入。

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

function createWindow () {
  // 创建浏览器窗口。
  const win = new BrowserWindow({ width: 800, height: 600 })

  // 加载应用的 index.html。
  win.loadFile('index.html')

  // 打开开发者工具。
  win.webContents.openDevTools()
}

// 当 Electron 初始化完成时调用此函数。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 当所有窗口都被关闭时退出应用程序。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

index.html 文件是你的应用程序的用户界面。它负责显示你的应用程序的内容。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>截图工具</h1>
  <button id="screenshot-button">截屏</button>
  <div id="screenshot"></div>

  <script>
    const screenshotButton = document.getElementById('screenshot-button')
    const screenshot = document.getElementById('screenshot')

    screenshotButton.addEventListener('click', () => {
      // 使用 electron 的 api 来捕获屏幕截图。
      electron.ipcRenderer.send('screenshot')
    })

    // 监听来自主进程的消息。
    electron.ipcMain.on('screenshot', (event, data) => {
      // 将屏幕截图显示在页面上。
      screenshot.innerHTML = `<img src="${data.image}">`
    })
  </script>
</body>
</html>