使用electron属性实现保存图片并获取图片的磁盘路径

原创

已于 2023-12-28 15:13:59 修改 · 2.6k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2023-12-28 10:29:39 首次发布

在普通的网页开发中，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; // 返回用户选择的文件路径
  }
}