electron實現(xiàn)圖片的另存為功能

更新時間：2024年10月29日 10:15:22 作者：#做一個清醒的人

本文主要介紹了在electron中如何實現(xiàn)圖片的另存為操作,包括另存為按鈕事件的編寫,getImageType和saveAsPicture的主要代碼,以及Electron進程與渲染進程的交互效果,希望能為使用electron的開發(fā)者提供幫助

1. 另存為按鈕事件：

const saveAsHandler = async () => {
    const { path, sessionId } = recordInfo
    if(typeof message !== 'string') return;
    // 因為我的圖片是加密的，所以我需要根據接口返回的路徑，然后根據不同圖片的密鑰（sessionId）去進行解密（decodeAvatarUrl）處理，最后返回blob，所以這塊兒不必糾結
    const res = await decodeAvatarUrl(path, sessionId, false)
    // blob轉ArrayBuffer
    blobToArrayBuffer(res, async (buffer: ArrayBuffer) => {
      const type = await getImageType(res) // 將Blob數(shù)據傳給getImageType，經處理后獲取圖片類型, 請看標題2的代碼示例
      // saveAsPicture 這個就是渲染進程與Electron的通信 ，請看標題3的代碼示例
      saveAsPicture({ buffer, name: getNowTime(), type })
        .then(() => setOpen(false))
    })
  }

2. getImageType代碼：

/**
 * get image type In image buffer
 */
export function getImageType (blob: Blob) {
  return new Promise((resolve: (type: string) => void, reject) => {
    const reader = new FileReader();
    reader.onload = (event: any) => {
      // 使用Uint8Array和DataView來讀取文件頭部
      const arr = new Uint8Array(event.target.result);
      const view = new DataView(arr.buffer);
      // 根據文件頭部的magic number判斷文件類型
      switch (view.getUint16(0, false)) {
        case 0xffd8: // JPEG
          resolve('image/jpeg');
          break;
        case 0x8950: // PNG
          resolve('image/png');
          break;
        case 0x4749: // GIF
          resolve('image/gif');
          break;
        case 0x4949: // TIFF
        case 0x4d4d: // TIFF
          resolve('image/tiff');
          break;
        default:
          reject(new Error('Unsupported image type'));
      }
    };
    reader.onerror = reject;
    // 讀取Blob為ArrayBuffer
    reader.readAsArrayBuffer(blob);
  })
}

3. saveAsPicture的主要代碼：

/** 校驗：另存為 */
type saveAsPicturePrams = {
  buffer: ArrayBuffer;
  name: string;
  type: string;
} 
/** 另存為 */
export const saveAsPicture = (params: saveAsPicturePrams) => {
  // 關于與Electron的UI.SAVEASPATH的通信，請看標題4
  return ipcRenderer.invoke(UI.SAVEASPATH, params)
}

4. Electron進程與渲染進程的交互

/**
 * 對話窗口：另存為圖片時，需要獲取選擇要存儲的路徑
 * @param buffer 數(shù)據
 * @name 文件名
 * @type 文件類型
 */
ipcMain.handle(UI.SAVEASPATH, (e, arg: { buffer: ArrayBuffer, name: string, type: string; }) => {
  return new Promise(async (resolve, reject) => {
    const { buffer, name, type } = arg;
    const imageType = type?.split('/').pop() //獲取圖片格式
    const imageName = `xxxxxxx_${name}`
    const defaultPath = path.join(app.getPath('downloads'),`${imageName}.${imageType}`)
    await dialog.showSaveDialog(mainWindow, {
      title: '另存為...',
      buttonLabel: '保存',
      defaultPath,
      properties: ['createDirectory'],
      filters: [{
        name: `圖片文件(*.${imageType})`,
        extensions: [imageType]
      }]
    }).then((res: any) => {
      if(res.canceled) {
        resolve(res)
        return;
      };
      fs.writeFileSync(res.filePath, new DataView(buffer))
      resolve(res)
    })
  })
})

效果圖：