Skip to main content

Electron读取并显示剪切板内的图片

Electron读取并显示剪切板内的图片​

liulun

liulun

《深入浅出Electron》与《Electron实战》作者

关注他

5 人赞同了该文章

读取剪切板的文本或HTML，也非常简单，相关的API演示代码如下：

let { clipboard } = require("electron");
clipboard.readText();  //读取剪切板的文本
clipboard.readHTML();  //读取剪切板的HTML

读取并显示剪切板的图片，也要借助Electron的nativeImage模块的帮助来实现，代码如下所示：

let { clipboard } = require("electron");
let img = clipboard.readImage();
let dataUrl = img.toDataURL();
let imgDom = document.createElement('img')
imgDom.src = dataUrl;
document.body.appendChild(imgDom);

clipboard.readImage返回一个nativeImage的实例，此实例有toDataURL方法，该方法返回图像的base64编码的数据字符串，型如图：

img

开发者可以直接把此字符串设置到图片标签的src属性上，即可在网页中显示图片。

如果你通过截图工具已经截取了图像数据到剪切板，那么执行上面代码，你就会在窗口中看到你截取的图片。

但如果你是在系统文件夹里复制了一个图片文件，执行上面代码，你会看到一个加载失败的图片，因为此时剪切板里是一个文件而不是真正的图像数据（你可以通过nativeImage实例的isEmpty方法来判断nativeImage实例是否包含图像数据）。如果你希望得到这个文件的路径，可以使用如下方法（这是一个Electron未公开的技术）：

// Win操作系统下
let filePath = clipboard.readBuffer('FileNameW').toString('ucs2')
filePath = filePath.replace(RegExp(String.fromCharCode(0), 'g'), '');
//Mac操作系统下
var filePath = clipboard.read('public.file-url').replace('file://', '');

除了这个方法外，还可以使用clipboard-files这个Node.js模块：

clipboard-filesgithub.com/alex8088/clipboard-files

它支持Windows和Mac两个平台。这是一个原生组件，需要通过如下命令安装到Electron项目中：

> yarn add clipboard-files --build-from-source --runtime=electron --target=7.1.2 --target-arch=ia32 --dist-url=https://atom.io/download/electron

安装完成后，可以通过如下代码获取剪切板内的文件路径：

const clipboard = require('clipboard-files');
let fileNames = clipboard.readFiles();