我要评论注：该列出的代码，都在文章内示例出
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图片另存为内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论