electron-vue 调用截图两种方法

调用QQ的截图方法进行截图
1、采用第三方现有截图工具，添加dll和exe文件，
下载地址：
将下载的这两个文件放在_dirname 指向的文件夹下
2、background.js 主进程文件中需引入

import {globalShortcut， BrowserWindow} from 'electron'
const { execFile } = require('child_process')

核心代码， 在渲染的mainWindow = new BrowserWindow({})中

globalShortcut.register('CommandOrControl+Alt+Z', function(){
  if(process.platform === 'darwin'){
    handleScreenShots()
  } else {
    screenWindow()
  }
})
function screenWindow(){
  let url = path.resolve(_static, '../build/PrintScr.exe')
  if(isDevelopment && !process.env.IS_TEST){
    // 生产环境
    url = path.join(path.dirname(app.getPath('exe')), '/PrintScr.exe') // 获取打包后exe文件的位置，并允许指定文件。
  }
  let screenWindow = execFile(url)
  mainWindow.minimize()
  screenWindow.on('exit', (code) => {
    mainWindow.restore()
    if(code) console.log(code)
  })
}
function handleScreenShots(){
  exec('screencapture -i -U -c', (error, stdout, stderr) =>{
    console.log('error', error)
  })
}

打包时需要将依赖exe文件单独设置打包。我将依赖单独放在了一个build文件中。

// vue.config.js
module.exports = {
  pluginOptions: {
    electrinBuilder: {
      builderOptions: {
        extraResources: {
          form: 'build',
          to: '../'
        }
      }
    }
  }
}

利用 html2canvas 截取当前屏幕指定内容存为图片
// ref 内的内容为所截取图片的内容

<template>
  <div ref="creditQrCodeShare">
      内容
    <button @click="saveImage">点击保存图片</button>
  <div>
</template>

import html2canvas from 'html2canvas';

methods: {
  saveImage(){
    // 第一个参数是需要生成截图的元素，第二个是自己需要配置的参数，高度等
    html2canvas(this.$refs.creditQrCodeShare, {
      backgroundColor: null,  // 画出来的图片有白色的边框，不要可设置背景为透明色
      useCORS: true,  // 支持图片跨域
      scale: 1  // 设置放大的倍数
    }).then(canvas => {
      // 把生成的base64位图片
      let url =canvas.toDataURL('image/png');
      this.imgUrl = url;
      let a = document.createElement('a');
      let event = new MouseEvent('click');
      a.download = name || this.newDates();
      a.href = this.imgUrl;
      a.dispatchEvent(event);
    })
  }
}