368 字
1 分钟
Electron复制文字与图片到剪贴板
由于公司项目桌面版聊天，对这个功能有需求，研究了一下，主要用到了electron的clipboardapi
*原生js也存在ClipboardAPI，详见Clipboard
文字复制
思路
由于是聊天软件右键复制聊天记录，因此文字复制需要如下几步：
- 提取选中文字
若存在选中文字时，获取选中文字，不存在时，获取整段聊天文字，这里用到了 webApi 中的
window.getSelection()方法 - 将获取到的文字存入剪贴板
代码
引入剪贴板API
import {clipboard} from 'electron'点击复制后的处理函数内：
// 获取需要复制的文字，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来获取，为如下步骤
- 创建canvas画布
- 获取img宽高，设置canvas宽高，将img绘入canvas画布
- 获取dataURL
代码
引入剪贴板API 和 nativeImage
import {clipboard, nativeImage} from 'electron'点击复制后的处理函数内（代码中出现的img为dom中的img元素）：
const canvas = document.createElement('canvas')// 获取图片宽高，这里我用的图片在名称中备注了宽和高，可以直接获取，getImageParams为自定义函数const {w, h} = getImageParams(img.src)// 设置 canvas 宽高canvas.width = wcanvas.height = h
const ctx = canvas.getContext('2d')// 在 canvas 中绘制 imgctx.drawImage(img, 0, 0, w, h)
// 获取图片的 dataURL 数据const dataURL = canvas.toDataURL('image/png')// 创建 nativeImage 对象，并存入剪贴板clipboard.writeImage(nativeImage.createFromDataURL(dataURL))大功告成，试试去qq聊天框粘贴一下吧？
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Electron复制文字与图片到剪贴板
https://marrydream.top/posts/web前端/electron复制文字与图片到剪贴板/ 部分信息可能已经过时
相关文章 智能推荐