Electron 将 Blob 图像保存到磁盘 - Javascript

使用 Electron 可以很方便地将 Blob 图像保存到磁盘。下面是一些详细的步骤和代码示例。

步骤

1. 获取要保存的图片作为 Blob 数据
2. 通过 Electron 的 dialog 模块打开保存文件对话框，让用户选择保存路径和文件名
3. 使用 Node.js 的 fs 模块将 Blob 数据写入文件中

代码示例

// 获取要保存的图片作为 Blob 数据
const image = document.querySelector('img')
const imageUrl = image.src
const response = await fetch(imageUrl)
const blob = await response.blob()

// 打开保存文件对话框
const {dialog} = require('electron')
const path = dialog.showSaveDialogSync({
  title: '保存图片',
  buttonLabel: '保存',
  defaultPath: 'image.png',
  filters: [
    { name: '图片文件', extensions: ['png', 'jpg', 'bmp'] },
    { name: '所有文件', extensions: ['*'] }
  ]
})
if (!path) return

// 将 Blob 数据写入文件
const fs = require('fs')
const reader = fs.createReadStream(blob)
const writer = fs.createWriteStream(path)
reader.pipe(writer)

解释

• 首先，我们通过 fetch 获取要保存的图片的地址，并将其转换为 Blob 数据。这里假设我们要保存一个 img 元素中的图片。
• 然后，我们使用 dialog.showSaveDialogSync() 方法打开保存对话框。这个方法会阻塞进程，直到用户选择了保存路径和文件名。
• 最后，我们使用 fs.createReadStream() 和 fs.createWriteStream() 方法将 Blob 数据写入文件中。

需要注意的是，这里的代码示例只适用于保存图片文件。如果你想保存其他类型的文件，你需要自行修改 filters 参数。

参考资料：

• Electron dialog 模块文档
• Node.js fs 模块文档