調(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);
})
}
}