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

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

news 2025/9/14 19:45:31

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

1. 另存为按钮事件：

const saveAsHandler = async () => {const { path, sessionId } = recordInfoif(typeof message !== 'string') return;// 因为我的图片是加密的，所以我需要根据接口返回的路径，然后根据不同图片的密钥（sessionId）去进行解密（decodeAvatarUrl）处理，最后返回blob，所以这块儿不必纠结const res = await decodeAvatarUrl(path, sessionId, false)// blob转ArrayBufferblobToArrayBuffer(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: // JPEGresolve('image/jpeg');break;case 0x8950: // PNGresolve('image/png');break;case 0x4749: // GIFresolve('image/gif');break;case 0x4949: // TIFFcase 0x4d4d: // TIFFresolve('image/tiff');break;default:reject(new Error('Unsupported image type'));}};reader.onerror = reject;// 读取Blob为ArrayBufferreader.readAsArrayBuffer(blob);})
}

3. saveAsPicture的主要代码：

/** 校验：另存为 */
type saveAsPicturePrams = {buffer: ArrayBuffer;name: string;type: string;
} 
/** 另存为 */
export const saveAsPicture = (params: saveAsPicturePrams) => {// 关于与Electron的UI.SAVEASPATH的通信，请看标题4return 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)})})})

效果图：

在这里插入图片描述