[Electron筆記] 保存圖片到應用目錄

內容目錄 隱藏

main-ipc-event.ts

將圖片存儲在 app.getPath('userData')/images/

mac：~/Library/Application\ Support/<app_name>/images
windows：C:\Users\<使用者名稱>\AppData\Roaming\<app_name>\images

const fs = require('fs')
const path = require('path')

// 保存圖片到 app 數據目錄
ipcMain.handle('SAVE-IMAGE', async (_event, { buffer, ext }) => {
  const dir = path.join(app.getPath('userData'), 'images')
  if (!fs.existsSync(dir)) fs.mkdirSync(dir)
  const filename = `${Date.now()}_${Math.floor(Math.random()*10000)}.${ext}`
  const filepath = path.join(dir, filename)
  fs.writeFileSync(filepath, Buffer.from(buffer))
  return filepath
})

// 刪除本地圖片
ipcMain.handle('DELETE-IMAGE', async (_event, filepath) => {
  if (fs.existsSync(filepath)) fs.unlinkSync(filepath)
  return true
})

const fs = require('fs')
const path = require('path')

// 保存圖片到 app 數據目錄
ipcMain.handle('SAVE-IMAGE', async (_event, { buffer, ext }) => {
  const dir = path.join(app.getPath('userData'), 'images')
  if (!fs.existsSync(dir)) fs.mkdirSync(dir)
  const filename = `${Date.now()}_${Math.floor(Math.random()*10000)}.${ext}`
  const filepath = path.join(dir, filename)
  fs.writeFileSync(filepath, Buffer.from(buffer))
  return filepath
})

// 刪除本地圖片
ipcMain.handle('DELETE-IMAGE', async (_event, filepath) => {
  if (fs.existsSync(filepath)) fs.unlinkSync(filepath)
  return true
})

preload.ts

import { contextBridge, ipcRenderer } from 'electron'
const fs = require('fs')

// ...

contextBridge.exposeInMainWorld('electron', {
  saveImage: async (buffer: ArrayBuffer, ext: string) => {
    return await ipcRenderer.invoke('SAVE-IMAGE', { buffer, ext })
  },
  deleteImage: async (filepath: string) => {
    return await ipcRenderer.invoke('DELETE-IMAGE', filepath)
  },
  readImageAsDataURL: (filepath: string) => {
    try {
      const ext = filepath.split('.').pop()?.toLowerCase() || 'png'
      const mime = ext === 'jpg' || ext === 'jpeg'
        ? 'image/jpeg'
        : ext === 'gif'
        ? 'image/gif'
        : 'image/png'
      const data = fs.readFileSync(filepath)
      return `data:${mime};base64,${data.toString('base64')}`
    } catch (e) {
      return ''
    }
  },
})

import { contextBridge, ipcRenderer } from 'electron'
const fs = require('fs')

// ...

contextBridge.exposeInMainWorld('electron', {
  saveImage: async (buffer: ArrayBuffer, ext: string) => {
    return await ipcRenderer.invoke('SAVE-IMAGE', { buffer, ext })
  },
  deleteImage: async (filepath: string) => {
    return await ipcRenderer.invoke('DELETE-IMAGE', filepath)
  },
  readImageAsDataURL: (filepath: string) => {
    try {
      const ext = filepath.split('.').pop()?.toLowerCase() || 'png'
      const mime = ext === 'jpg' || ext === 'jpeg'
        ? 'image/jpeg'
        : ext === 'gif'
        ? 'image/gif'
        : 'image/png'
      const data = fs.readFileSync(filepath)
      return `data:${mime};base64,${data.toString('base64')}`
    } catch (e) {
      return ''
    }
  },
})

顯示圖片

const realSrc = previewImage
    ? previewImage.startsWith('data:')
      ? previewImage
      : window.electron.readImageAsDataURL(previewImage)
    : ''

<Image
  src={realSrc}
  alt="preview"
  objectFit="cover"
  w="100%"
  h="100%"
/>

const realSrc = previewImage
    ? previewImage.startsWith('data:')
      ? previewImage
      : window.electron.readImageAsDataURL(previewImage)
    : ''

<Image
  src={realSrc}
  alt="preview"
  objectFit="cover"
  w="100%"
  h="100%"
/>

上傳圖片

const uploadImage = async (image: Blob) => {
  // 取得副檔名
  const ext = (image.type.split('/')[1] || 'png').toLowerCase()
  const buffer = await image.arrayBuffer()
  // 儲存圖片到本地
  const filepath = await window.electron.saveImage(buffer, ext)
  // ...
},

const uploadImage = async (image: Blob) => {
  // 取得副檔名
  const ext = (image.type.split('/')[1] || 'png').toLowerCase()
  const buffer = await image.arrayBuffer()
  // 儲存圖片到本地
  const filepath = await window.electron.saveImage(buffer, ext)
  // ...
},

瀏覽量: 8