Electron-d-3.0

2022-11-26

Electron / Electron-d-3.0

Word count: 1.3k | Reading time≈ 6 min

Electron-d-3.0

渲染进程

上一篇我们讲解了主进程的一些常用API，这一篇我们接着来讲解渲染进程的API

1.剪切板（clipboard）

在系统剪贴板上执行复制和粘贴操作。

主进程和渲染进程都可以用。

（1）clipboard.readText([type])

type string (optional) -可以是 selection 或 clipboard; 默认为 ‘clipboard’. selection 仅在 Linux 中可用。

返回 string - 剪贴板中的内容为纯文本。

const { clipboard } = require('electron')

clipboard.writeText('hello i am a bit of text!')

const text = clipboard.readText()
console.log(text)
// hello i am a bit of text!'

（2）clipboard.writeText(text[, type])

text string
type string (optional) -可以是 selection 或 clipboard; 默认为 ‘clipboard’. selection 仅在 Linux 中可用。

将 text 作为纯文本写入剪贴板。

const { clipboard } = require('electron')

const text = 'hello i am a bit of text!'
clipboard.writeText(text)

我们剪切板的API就说这两个读与写。但是我在渲染进程里读不到clipboard。

[clipboard文档]: “https://www.electronjs.org/zh/docs/latest/api/clipboard “

2.contextBridge

在隔离的上下文中创建一个安全的、双向的、同步的桥梁。

如下，是一个从隔离的预加载脚本将 API 暴露给渲染器的示例：（通过预加载脚本暴露API，渲染进程可以读取）

// Preload (Isolated World)
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)

// Renderer (Main World)

window.electron.doThing()

[contextBridge文档]: “https://www.electronjs.org/zh/docs/latest/api/context-bridge “

3.desktopCapturer

官方文档给的案例不是特别容易理解，代码有点长。

虽然官方文档的主进程和渲染进程都有desktopCapturer，但是渲染进程是访问不到的

我们举一个抓取页面内容的荔枝吧！

//main.js+
 ipcMain.handle('capture-event',async (event,args)=>{
      return  desktopCapturer.getSources({ types: ['window', 'screen'] }).then( sources => {
        return sources
      })
 })
//解释一下，desktopCapturer.getSources返回的是一个Promise的对象

//preload.js+

  const capture = async ()=>{
    let res = await ipcRenderer.invoke('capture-event')
    console.log(res)
  }
  
  contextBridge.exposeInMainWorld('electronAPI', {
    capture
})

//app.js+
const btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
    window.electronAPI.capture()
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>capture</title>
  </head>
  <body>
    <button id="btn">capture</button>
    <script src='./renderer/app.js'></script>
  </body>
</html>

当我们点击页面上的按钮的时候，我们就会打印出窗口信息，由下图可以看出sources是一个数组

我们现在就可以根据我们获取到的信息去干一些事情了。

//preload.js+
  const capture = async ()=>{
    let sources = await ipcRenderer.invoke('capture-event')
    for (const source of sources) {
      if (source.name === 'electron') {
        let str = source.thumbnail.crop({x:0,y:0,width:300,height:300})
        let imgUrl = str.toDataURL()
        return imgUrl //返回的是一个Promise
      }
    }
  }

  contextBridge.exposeInMainWorld('electronAPI', {
    handleCounter: (callback) => ipcRenderer.on('update-counter', callback),
    capture,
})

//app.js+
const btn = document.getElementById('btn')
btn.addEventListener('click',async ()=>{
   let imgUrl = await window.electronAPI.capture()
   console.log(imgUrl)
})

我们在渲染进程这就已经拿到了我们的数据

接下来我们就将我们的数据填充到我们的页面之中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';img-src * data:">
    <title>Menu Counter</title>
  </head>
  <body>
    <!-- Current value: <strong id="counter">0</strong> -->
    <button id="btn">capture</button>
    <img src="" alt="捕获数据" id="img">
    <script src='./renderer/app.js'></script>
  </body>
</html>

//app.js+
const btn = document.getElementById('btn')

btn.addEventListener('click',async ()=>{
   let imgUrl = await window.electronAPI.capture()
   document.getElementById('img').src = imgUrl
})

恭喜你！！！成功了🥳🥳🥳

[desktopCapturer文档]: “https://www.electronjs.org/zh/docs/latest/api/desktop-capturer"

4.nativeImage

使用 PNG 或 JPG 文件创建托盘、dock和应用程序图标。

主进程和渲染进程都可以用。

在 Electron 内, 那些需要图片的 API 可以传递两种参数, 一种是文件路径, 一种是 NativeImage 实例对象。空的图片对象将被 null 参数替代

例如, 创建托盘或设置窗口图标时, 你可以传递 string 格式的图片路径

const { BrowserWindow, Tray } = require('electron')

const appIcon = new Tray('/Users/somebody/images/icon.png')
const win = new BrowserWindow({ icon: '/Users/somebody/images/window.png' })
console.log(appIcon, win)

或者从粘贴板读取图片，将返回 NativeImage 对象：

const { clipboard, Tray } = require('electron')
const image = clipboard.readImage()
const appIcon = new Tray(image)
console.log(appIcon)

我们文档里还有其他的一些关于NativeImage对象的属性和方法，我们就哪里需要哪里搬。

[nativeImage文档]: “https://www.electronjs.org/zh/docs/latest/api/native-image “

到目前为止，我们对于electron的学习先到这，如果我的这几篇文章都认认真真的看完了，那么我们也对electron有了进一步认识。

参考链接：

[Electron官网]: “https://www.electronjs.org/ “

Donate

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.