electron实现图片的另存为功能
作者：#做一个清醒的人
本文主要介绍了在electron中如何实现图片的另存为操作,包括另存为按钮事件的编写,getImageType和saveAsPicture的主要代码,以及Electron进程与渲染进程的交互效果,希望能为使用electron的开发者提供帮助
注：该列出的代码，都在文章内示例出
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)
})
})
})效果图：
到此这篇关于electron实现图片的另存为的文章就介绍到这了,更多相关electron图片另存为内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！