electron-vue 調(diào)用截圖兩種方法

調(diào)用QQ的截圖方法進(jìn)行截圖
1、采用第三方現(xiàn)有截圖工具,添加dll和exe文件,
下載地址:
將下載的這兩個(gè)文件放在_dirname 指向的文件夾下
2、background.js 主進(jìn)程文件中需引入

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){
    // 生產(chǎn)環(huán)境
    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)
  })
}

打包時(shí)需要將依賴(lài)exe文件單獨(dú)設(shè)置打包。我將依賴(lài)單獨(dú)放在了一個(gè)build文件中。

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

利用 html2canvas 截取當(dāng)前屏幕指定內(nèi)容存為圖片
// ref 內(nèi)的內(nèi)容為所截取圖片的內(nèi)容

<template>
  <div ref="creditQrCodeShare">
      內(nèi)容
    <button @click="saveImage">點(diǎn)擊保存圖片</button>
  <div>
</template>

import html2canvas from 'html2canvas';

methods: {
  saveImage(){
    // 第一個(gè)參數(shù)是需要生成截圖的元素,第二個(gè)是自己需要配置的參數(shù),高度等
    html2canvas(this.$refs.creditQrCodeShare, {
      backgroundColor: null,  // 畫(huà)出來(lái)的圖片有白色的邊框,不要可設(shè)置背景為透明色
      useCORS: true,  // 支持圖片跨域
      scale: 1  // 設(shè)置放大的倍數(shù)
    }).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);
    })
  }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容