第十章:Electron 全局快捷键和剪切板

  • 效果
    第十章:Electron 全局快捷键和剪切板_第1张图片

  • 全局快捷键(主进程)

/* eslint-disable no-console */
/* eslint-disable no-unused-vars */

import { app, globalShortcut } from 'electron';


/* **************************全局快捷键**************************** */
app.on('ready', () => {
  // 注册全局快捷键
  globalShortcut.register('ctrl+e', () => {
    console.log('ctrl+e');
  });

  // 检查快捷键是否注册功能
  console.log(globalShortcut.isRegistered('ctrl+e'));
});


app.on('will-quit', () => {
    // 注销全局快捷键的监听
  globalShortcut.unregister('ctrl+e');
});

  • 剪切板(渲染进程)
/* eslint-disable no-console */
/* eslint-disable no-alert */
/* eslint-disable func-names */
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */

import { clipboard, nativeImage } from 'electron';
import path from 'path';

// 执行复制操作
// clipboard.writeText('3162387126381236128361238712638127362187316287');

const code = document.querySelector('#code');

const input = document.querySelector('#input');
const cbtn = document.querySelector('#cbtn');

code.onclick = function () {
  clipboard.writeText(code.innerHTML);
};

// 粘贴
cbtn.onclick = function () {
  input.value = clipboard.readText();
};


/* ****************复制图片******************* */

const btncopyimg = document.querySelector('#btncopyimg');
const imageView = document.querySelector('#image');

btncopyimg.onclick = function () {
    // 复制图片黏贴到我们页面上

    /*
    1.引入nativeImage

    2、创建一个nativeImage的对象

    */
  const image = nativeImage.createFromPath(path.join(path.join(__dirname, './static'), 'icon_shop_card.png'));
    // 复制图片
  clipboard.writeImage(image);

    // 粘贴图片

  const imgsrc = clipboard.readImage().toDataURL();

  console.log(imgsrc);   // base64的地址


    // 创建一个img标签 指定他的src
  const imgDom = new Image();

  imgDom.src = imgsrc;

//   document.body.appendChild(imgDom);

  imageView.appendChild(imgDom);
};

第十章:Electron 全局快捷键和剪切板_第2张图片

  • html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
    <button id="btn"> 点击弹出通知</button>
    <br>

    <br>

    <div>
      内容:<span id="code">dasgdayjsgdaskudhas</span>
    </div>
    <br>

    <br>
    <div>
      <input type="text" id="input">
      <button id="cbtn">粘贴</button>
    </div>

    <br>

    <br>
    <button id="btncopyimg">复制图片显示到页面</button>
    <br>
    <div id="image">
    </div>
    <script src="./rederer/ipcrenderer.js"></script>
    <script src="./rederer/cliboard.js"></script>
  </body>
</html>

你可能感兴趣的:(Electron)