electron+vite+vue3实现像微信一样的自由截屏的代码实现案例

以下是一个简单的代码实现案例，使用 Electron、Vite 和 Vue3 实现自由截屏的功能：

1. 安装依赖

npm install electron --save-dev
npm install electron-is-dev --save
npm install vite --save-dev
npm install vue@next --save
npm install vue-canvas@next --save

2. 创建 Vite 配置文件 vite.config.js

const { defineConfig } = require('vite')
const vue = require('@vitejs/plugin-vue')

module.exports = defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  },
  build: {
    outDir: 'dist/renderer'
  }
})

3. 创建 Electron 入口文件 main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const isDev = require('electron-is-dev')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  if (isDev) {
    mainWindow.loadURL('http://localhost:3000')
  } else {
    mainWindow.loadFile(path.join(__dirname, 'dist/renderer/index.html'))
  }

  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

ipcMain.on('capture-screen', (event) => {
  const { screen, desktopCapturer } = require('electron')
  const canvas = new OffscreenCanvas(screen.width, screen.height)
  const ctx = canvas.getContext('2d')

  desktopCapturer.getSources({ types: ['screen'] }).then(async (sources) => {
    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 videoTrack = stream.getVideoTracks()[0]
    const imageCapture = new ImageCapture(videoTrack)

    imageCapture.grabFrame().then((imageBitmap) => {
      ctx.drawImage(imageBitmap, 0, 0)
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      event.reply('capture-screen-reply', imageData)
    }).catch((err) => {
      console.error(err)
    })
  })
})

4. 创建 Vue3 组件 CaptureScreen.vue

<template>
  <div>
    <canvas ref="canvas" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" />
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useCanvas } from 'vue-canvas'

export default {
  setup() {
    const canvasRef = ref(null)
    const { ctx, width, height, dpi } = useCanvas(canvasRef)

    let isDragging = false
    let startX = 0
    let startY = 0
    let endX = 0
    let endY = 0

    const mousedown = (event) => {
      isDragging = true
      startX = event.clientX * dpi
      startY = event.clientY * dpi
      endX = startX
      endY = startY
    }

    const mousemove = (event) => {
      if (isDragging) {
        endX = event.clientX * dpi
        endY = event.clientY * dpi
        draw()
      }
    }

    const mouseup = () => {
      isDragging = false
      capture()
    }

    const draw = () => {
      ctx.clearRect(0, 0, width, height)
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
      ctx.fillRect(0, 0, width, height)
      ctx.clearRect(startX, startY, endX - startX, endY - startY)
      ctx.strokeStyle = '#ffffff'
      ctx.strokeRect(startX, startY, endX - startX, endY - startY)
    }

    const capture = () => {
      const { ipcRenderer } = require('electron')
      const imageData = ctx.getImageData(startX, startY, endX - startX, endY - startY)
      ipcRenderer.send('capture-screen', imageData)
      ipcRenderer.once('capture-screen-reply', (event, imageData) => {
        console.log(imageData)
      })
    }

    onMounted(() => {
      draw()
    })

    onUnmounted(() => {
      console.log('CaptureScreen unmounted')
    })

    return {
      canvasRef,
      mousedown,
      mousemove,
      mouseup
    }
  }
}
</script>

5. 创建 Vue3 应用入口文件 main.js

import { createApp } from 'vue'
import App from './App.vue'
import CaptureScreen from './components/CaptureScreen.vue'

const app = createApp(App)

app.component('CaptureScreen', CaptureScreen)

app.mount('#app')

6. 创建 Vue3 应用主组件 App.vue

<template>
  <div>
    <h1>Hello Electron + Vite + Vue3!</h1>
    <CaptureScreen />
  </div>
</template>

<script>
export default {}
</script>

7. 运行应用

npm run dev

以上是一个简单的代码实现案例，使用 Electron、Vite 和 Vue3 实现自由截屏的功能。当用户选择截图区域后，截图数据将被传回到 Electron 主进程，你可以在 `ipcMain.on('capture-screen', ...)` 中处理这些数据，例如将其保存到本地文件或上传到服务器。