// 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'; }