https://www.electronjs.org/zh/docs/latest/api/clipboard

1. clipboard

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

在主进程（main process）和渲染进程（renderer process）上均可用。

readText()：返回字符串 - 剪贴板中的内容为纯文本。

writeText(text)：将文本作为纯文本写进剪贴板。

const { clipboard } = require('electron')

clipboard.writeText('hello world!')

const text = clipboard.readText()
console.log(text) // hello world!'

2. contextBridge

注入api

创建一个安全的、双向的、跨越隔离情境的同步桥梁。

只在渲染进程（renderer pocess）中可用。

preload.js在main.js中预加载js

3. desktopCapturer

使用 navigator.mediaDevices.getUserMedia API 访问可用于从桌面捕获音频和视频的媒体源信息。

只在主进程（main process）可用。

下面的例子显示了如何从屏幕 1桌面窗口捕捉图像：

• 在主进程里

// main.js
ipcMain.handle('desktop-capturer', async (event) => {
  return desktopCapturer.getSources({ 
    types: ['window', 'screen'],
    thumbnailSize: {
      width: 1728,
      height: 1117
    }
  }).then(async sources => {
    // 屏幕窗口
    for (const source of sources) {
      if (source.name === '屏幕 1') {
        let str = source.thumbnail.crop({ x: 0, y: 30, width: 1200, height: 1170 })
        // 返回base64图片给渲染进程
        return str.toDataURL()
      }
    }
  })
})

• 在预处理JS里

// preload.js
const { ipcRenderer,contextBridge } = require('electron')

const invokeCaptureEvent = async () => {
  const result = await ipcRenderer.invoke('desktop-capturer')
  return result
}

contextBridge.exposeInMainWorld('exposeVar', {
  invokeCaptureEvent
})

• 在渲染进程页面里

document.querySelector('#btn').onclick = async (e)=>{
   let result = await exposeVar.invokeCaptureEvent()

   let img = new Image()
   img.src = result;
   document.body.appendChild(img)
}

4. ipcRenderer

从一个渲染器进程到主进程的异步通信。

只在渲染进程（renderer pocess）中可用。

5. nativeImage

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

在主进程（main process）和渲染进程（renderer process）上均可用。

在Electron中，对于接受图像的API，你可以传递文件路径或NativeImage实例。当传递null时，将使用一个空的图像。

例如，在创建一个托盘或设置一个窗口的图标时，你可以把图像文件路径作为一个字符串传递。

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)

5.1 支持的格式

目前支持PNG和JPEG图像格式。建议使用PNG，因为它支持透明度和无损压缩。

在Windows上，你也可以从文件路径加载ICO图标。为了获得最佳的视觉质量，建议至少包括以下尺寸的文件。

• Small icon

  • 16x16 (100% DPI scale)
  • 20x20 (125% DPI scale)
  • 24x24 (150% DPI scale)
  • 32x32 (200% DPI scale)

• Large icon

  • 32x32 (100% DPI scale)
  • 40x40 (125% DPI scale)
  • 48x48 (150% DPI scale)
  • 64x64 (200% DPI scale)
  • 256x256

5.2 高分辨率图像

在支持高DPI的平台上，如苹果Retina显示器，你可以在图像的基本文件名后附加@2x来标记它为高分辨率的图像。

例如，如果icon.png是一个具有标准分辨率的普通图像，那么icon@2x.png，将被视为具有双倍DPI密度的高分辨率图像。

如果你想同时支持不同DPI密度的显示器，你可以把不同尺寸的图像放在同一个文件夹里，使用不带DPI后缀的文件名。例如：

images/
├── icon.png
├── icon@2x.png
└── icon@3x.png

const { Tray } = require('electron')
const appIcon = new Tray('/Users/somebody/images/icon.png')
console.log(appIcon)

还支持以下DPI的后缀：

@1x
@1.25x
@1.33x
@1.4x
@1.5x
@1.8x
@2x
@2.5x
@3x
@4x
@5x

5.3 方法

• nativeImage.createEmpty()
• nativeImage.createFromPath(path)

返回 NativeImage

从位于路径的文件中创建一个新的NativeImage实例。如果路径不存在，不能被读取，或者不是一个有效的图像，该方法将返回一个空图像。

const nativeImage = require('electron').nativeImage

const image = nativeImage.createFromPath('/Users/somebody/images/icon.png')
console.log(image)

• nativeImage.createFromDataURL(dataURL)

5.4 Class: NativeImage

自然地包裹图像，如托盘、停靠区和应用程序图标。

在主进程（main process）和渲染进程（renderer process）上均可用。

实例方法：

• image.toPNG([options])
• image.toJPEG(quality)
• image.toDataURL([options])
• image.getSize([scaleFactor])
• image.crop(rect)