在普通的网页开发中，JavaScript由于安全性的考虑，通常是无法直接获取到客户端的磁盘路径的。浏览器出于隐私和安全原因对此类信息进行了限制。
在浏览器环境下，JavaScript主要通过Web
APIs来与浏览器进行交互，而这些API通常受到浏览器的安全策略的限制。文件系统信息是被认为是敏感的信息，因此浏览器不提供直接访问客户端磁盘路径的API。所以要使用electron属性来获取。
第一步：
electron分为主进程和渲染进程，主进程就是使用electron的特性属性api，渲染进程就是我们的代码，比如vue页面代码这种。
首先我们要把项目用electron启动起来，具体怎么启动看我上一篇博客
启动完成后，找到项目文件中的backgroun.js文件，这是electron主进程的文件
把以下代码加进去
import { app, protocol, BrowserWindow ,ipcMain,ipcRenderer,dialog} from
'electron'
const fs = require('fs');
app.on('ready', async () => {
// if
(isDevelopment && !process.env.IS_TEST) {
// // Install Vue Devtools
// try
{
// await installExtension(VUEJS_DEVTOOLS)
// } catch (e) {
//
console.error('Vue Devtools failed to install:', e.toString())
// }
// }
createWindow()
// 新增：在主进程中处理打开保存图片对话框的请求
ipcMain.handle('dialog:saveImage',
async (event, dataURL) => {
return saveImage(dataURL);
});
})
// 将保存图片的逻辑封装成一个函数
async function saveImage(dataURL) {
let base64 =
dataURL.replace(/^data:image/\w+;base64,/, '');
let dataBuffer = Buffer.from(base64,
'base64');
const options = {
title: 'Save Image',
buttonLabel: '保存', // 自定义保存按钮的文字
defaultPath: 'image.jpg', // 默认文件名
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }
]
};
const { canceled, filePath } = await dialog.showSaveDialog(options);
if
(canceled) {
return null; // 用户取消保存文件时返回 null
} else {
// 将 dataURL 保存到 filePath 的逻辑代码
fs.writeFile(filePath, dataBuffer, function (err) {
if (err) {
console.error(err, '保存失败');
} else {
console.log(filePath, '保存成功');
}
});
return filePath; // 返回用户选择的文件路径
}
}
在 Electron 应用程序启动后，创建了窗口（createWindow函数应该是在代码中其他位置定义的）。
通过 ipcMain.handle 方法，为名为
'dialog:saveImage' 的事件注册了一个处理函数，用于处理保存图片对话框的请求。当渲染进程发送 'dialog:saveImage' 事件时，主进程将会执行
saveImage 函数。
saveImage 函数封装了保存图片的逻辑。首先将 Data URL 转换为 Buffer 格式，然后通过
dialog.showSaveDialog 方法展示保存对话框，用户选择保存路径后，将图片文件保存到指定路径。
在 saveImage 函数中：
首先通过 dataURL.replace 和 Buffer.from 将 Data URL 转换成了 Buffer 格式。
然后使用
dialog.showSaveDialog 方法展示保存对话框，用户选择保存路径后，通过 fs.writeFile 方法将 Buffer
写入文件。
最后根据保存成功或失败，返回相应的结果给渲染进程。
fs 是 Node.js 核心模块中的一个模块，全称为 File
System（文件系统）。这个模块提供了一系列用于处理文件和文件系统的方法，可以用于读取文件、写入文件、创建目录、删除文件等操作。通过 fs 模块，你可以在 Node.js
程序中对文件和文件系统进行各种操作，包括读写文件、文件夹的操作等。
在 Electron 应用程序中，由于可以利用 Node.js 的能力，因此可以在主进程中使用 fs 模块来处理文件和文件系统相关的操作，比如在上面的代码中就使用了
fs.writeFile 方法来将图片保存到指定路径。