electron+vue3项目实现 截图功能

要在 Electron Vue3 项目中实现截图功能，可以使用 Electron 的 desktopCapturer API 获取屏幕截图，然后使用 Canvas API 将截图渲染到画布上，最后将画布转换成图像文件保存。

以下是一个简单的实现示例：

1. 引入必要的模块和库：

const { desktopCapturer } = require('electron')
const { createCanvas, loadImage } = require('canvas')
const fs = require('fs')

2. 创建一个函数来获取屏幕截图：

async function captureScreen() {
  const sources = await desktopCapturer.getSources({ types: ['screen'] })

  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: sources[0].id,
        minWidth: 1280,
        maxWidth: 1280,
        minHeight: 720,
        maxHeight: 720
      }
    }
  })

  const video = document.createElement('video')
  video.srcObject = stream
  video.play()

  const canvas = createCanvas(video.videoWidth, video.videoHeight)
  const ctx = canvas.getContext('2d')

  video.addEventListener('loadedmetadata', () => {
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
  })

  video.addEventListener('play', () => {
    const draw = () => {
      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
      requestAnimationFrame(draw)
    }
    requestAnimationFrame(draw)
  })

  return canvas.toDataURL('image/png')
}

3. 创建一个按钮来触发截图操作：

<template>
  <div>
    <button @click="capture()">Capture</button>
  </div>
</template>

<script>
const { desktopCapturer } = require('electron')
const { createCanvas, loadImage } = require('canvas')
const fs = require('fs')

export default {
  methods: {
    async capture() {
      const dataURL = await captureScreen()
      const buffer = Buffer.from(dataURL.split(',')[1], 'base64')
      fs.writeFileSync('./screenshot.png', buffer)
    }
  }
}
</script>

这样，当用户点击按钮时，将会在项目根目录下生成一个名为 `screenshot.png` 的截图文件。

注意，由于 Electron 中使用了 Node.js 的文件系统 API，因此需要在 `main.js` 文件中设置 `nodeIntegration: true` 才能正常运行此功能。