launcher/app/main/windows/lib/preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const {ipcRenderer, desktopCapturer} = require('electron');
const remote = require('@electron/remote');
window.currentFrame = 'platform';
window.api = [
  'showSuspensionWindow',
  'resizeWindow',
  'setUnReadMessage',
  'getUnReadMessage',
  'windowMoveHandle',
  'exitSystem',
  'openDevTools',
  'hideMainWindow',
  'showMainWindow',
  'minimize',
  'hideSuspensionWindow',
  'closeWindowById',
  'PrtSc',
  'downloadImg',
  'removeCanvas',
].reduce(
  (acc, apiName) => {
    acc[apiName] = (...params) => {
      return ipcRenderer.send(apiName, ...params);
    };
    return acc;
  },
  {
    on: ipcRenderer.on.bind(ipcRenderer),
    send: ipcRenderer.send.bind(ipcRenderer),
    removeListener: ipcRenderer.removeListener.bind(ipcRenderer),
  }
);

ipcRenderer.on('getUnReadMessage', (e, args) => {
  window.getUnReadMessage(args[0]);
});

let ImgSrc = null;
// 监听用户截屏
ipcRenderer.on('PrtSc', (e, args) => {
  // 显示截屏区域
  let screenContent = document.querySelector('.screen-canvas');
  screenContent.style.display = 'block';
  // 获取当前屏幕的宽高
  const {width, height} = remote.getCurrentWindow().getBounds();
  console.log(width, height);
  // 获取canvas元素
  const canvas = document.getElementById('thumbnailCanvas');
  const ctx = canvas.getContext('2d');
  // 这里的300可根据需要自定义，显示的是截屏后图片显示的大小
  canvas.width = (height - 300) * 16 / 9;
  canvas.height = height - 300;
  desktopCapturer.getSources({types: ['screen'], thumbnailSize: {width: canvas.width, height: canvas.height}}).then(async sources => {
    try {
      sources.forEach(source => {
        const img = new Image();
        img.src = source.thumbnail.toDataURL();
        ImgSrc = img.src
        img.onload = () => {
          ctx.drawImage(img, 0, 0);
        };
      });
    } catch (error) {
      console.log(error);
    }
  });
});

// 监听用户下载截屏图片
ipcRenderer.on('downloadImg', (e, args) => {
  downLoadImage(ImgSrc);
});

// 下载图片
function downLoadImage(src) {
  const link = document.createElement('a');
  link.href = src;
  link.download = new Date().getTime() + '.png';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 监听用户取消截屏图片显示
ipcRenderer.on('removeCanvas', (e, args) => {
  removeCanvas()
});
function removeCanvas() {
  // 获取canvas元素
  const canvas = document.getElementById('thumbnailCanvas');
  const ctx = canvas.getContext('2d');
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 隐藏截屏区域
  let screenContent = document.querySelector('.screen-canvas');
  screenContent.style.display = 'none';
}