vue electron 截图

以下是使用Vue和Electron实现截图的步骤：

1.首先，需要安装electron和electron-builder：

npm install electron electron-builder --save-dev

2.在Vue项目中创建一个新的Electron窗口，用于截图：

const { BrowserWindow } = require('electron')

let screenshotWindow

function createScreenshotWindow() {
  screenshotWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  screenshotWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/#/screenshot')
  screenshotWindow.on('closed', () => {
    screenshotWindow = null
  })
}

function captureScreenshot() {
  if (!screenshotWindow) {
    createScreenshotWindow()
  } else {
    screenshotWindow.show()
  }
}

3.在Vue项目中创建一个新的路由，用于显示截图窗口：

import Screenshot from '@/views/Screenshot.vue'

export default [
  {
    path: '/screenshot',
    name: 'Screenshot',
    component: Screenshot
  }
]

4.在Vue项目中创建一个新的组件，用于截图：

<template>
  <div>
    <button @click="captureScreenshot">Capture Screenshot</button>
  </div>
</template>

<script>
export default {
  methods: {
    captureScreenshot() {
      const { remote } = require('electron')
      const { screen } = remote
      const { width, height } = screen.getPrimaryDisplay().workAreaSize
      const image = remote.screen.capture({
        x: 0,
        y: 0,
        width,
        height
      })
      const screenshotPath = remote.app.getPath('pictures') + '/screenshot.png'
      require('fs').writeFileSync(screenshotPath, image.toPNG())
    }
  }
}
</script>

5.最后，在Vue项目中添加一个按钮，用于触发截图：

<template>
  <div>
    <button @click="captureScreenshot">Capture Screenshot</button>
  </div>
</template>

<script>
export default {
  methods: {
    captureScreenshot() {
      const { remote } = require('electron')
      const { screen } = remote
      const { width, height } = screen.getPrimaryDisplay().workAreaSize
      const image = remote.screen.capture({
        x: 0,
        y: 0,
        width,
        height
      })
      const screenshotPath = remote.app.getPath('pictures') + '/screenshot.png'
      require('fs').writeFileSync(screenshotPath, image.toPNG())
    }
  }
}
</script>