当前位置：首页 > article >正文

【electron8】electron实现“图片”的另存为

article 2025/1/31 2:45:58

注：该列出的代码，都在文章内示例出

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数据传给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 数据
 * @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)
    })
  })
  
})

效果图：

在这里插入图片描述