茉莉兰亭


偏安一隅

Electron复制文字与图片到剪贴板

  • 1425 字
  • 次阅读

由于公司项目桌面版聊天，对这个功能有需求，研究了一下，主要用到了electron的clipboardapi

*原生js也存在ClipboardAPI，详见Clipboard

文字复制

思路

由于是聊天软件右键复制聊天记录，因此文字复制需要如下几步：

  1. 提取选中文字
    若存在选中文字时，获取选中文字，不存在时，获取整段聊天文字，这里用到了 webApi 中的 window.getSelection() 方法
  2. 将获取到的文字存入剪贴板
代码

引入剪贴板API

1
import {clipboard} from 'electron'

点击复制后的处理函数内：

1
2
3
4
// 获取需要复制的文字，currentTextNode为当前触发的聊天气泡
const selectText = window.getSelection().toString() || currentTextNode.innerText
// 将获取到的文字存入剪贴板
clipboard.writeText(selectText)

图片复制

思路

图片复制相对较麻烦，clipboard api的存入图片的方法为writeImage(nativeImage)，其需要传递的参数为一个nativeImage对象。

electron 提供了几种创建nativeImage的方法，这里选择nativeImage.createFromDataURL(dataURL)方式，需要入图片的dataURL
数据。因此最大的难点在于如何获取到图片的dataURL数据

经过一段时间考虑，目前能够获取的为dom中的图片元素，因此决定采用canvas.toDataURL来获取，为如下步骤

  1. 创建canvas画布
  2. 获取img宽高，设置canvas宽高，将img绘入canvas画布
  3. 获取dataURL
代码

引入剪贴板API 和 nativeImage

1
import {clipboard, nativeImage} from 'electron'

点击复制后的处理函数内（代码中出现的img为dom中的img元素）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const canvas = document.createElement('canvas')
// 获取图片宽高，这里我用的图片在名称中备注了宽和高，可以直接获取，getImageParams为自定义函数
const {w, h} = getImageParams(img.src)
// 设置 canvas 宽高
canvas.width = w
canvas.height = h

const ctx = canvas.getContext('2d')
// 在 canvas 中绘制 img
ctx.drawImage(img, 0, 0, w, h)

// 获取图片的 dataURL 数据
const dataURL = canvas.toDataURL('image/png')
// 创建 nativeImage 对象，并存入剪贴板
clipboard.writeImage(nativeImage.createFromDataURL(dataURL))

大功告成，试试去qq聊天框粘贴一下吧？

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,