Electron+vue3+vite 仿微信截图功能

为了实现Electron+Vue3+Vite仿微信截图功能，你可以按照以下步骤进行：

1.首先，需要在项目中安装electron-screenshots依赖，可以在终端中使用以下命令进行安装：

npm install electron-screenshots --save

2.在vite.config.js中配置externals，将electron-screenshots作为外部依赖项引入：

// vite.config.js
module.exports = {
  // ...
  externals: {
    "electron-screenshots": 'require("electron-screenshots")'
  }
}

3.在主进程中引入initScreenshoots函数并在应用程序准备就绪后调用该函数：

// main.js
const { app } = require('electron')
const { initScreenshoots } = require('./screenshoots')

app.whenReady().then(() => {
  // 初始化截图工具
  initScreenshoots()
})

4.在渲染进程中创建一个截图组件，并在需要截图时调用该组件的截图方法：

<template>
  <div>
    <button @click="takeScreenshot">截图</button>
    <img :src="screenshot" v-if="screenshot" />
  </div>
</template>

<script>
import { ref } from 'vue'
import { remote } from 'electron'

export default {
  setup() {
    const screenshot = ref(null)

    const takeScreenshot = async () => {
      const { screen } = remote
      const { width, height } = screen.getPrimaryDisplay().workAreaSize
      const image = await window.electronScreenshots.captureScreen({
        x: 0,
        y: 0,
        width,
        height
      })
      screenshot.value = `data:image/png;base64,${image.toPNG().toString('base64')}`
    }

    return {
      screenshot,
      takeScreenshot
    }
  }
}
</script>

在上述代码中，我们使用了electron-screenshots提供的captureScreen方法来进行截图，并将截图结果以base64编码的形式显示在页面上。