图片滤镜网站开发,app商城软件,厦门图书馆网站建设,佛山网站seo优化注#xff1a;该列出的代码#xff0c;都在文章内示例出
1. 另存为按钮事件#xff1a;
const saveAsHandler async () {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的#xff0c;所以我需要根据接口返回的路…注该列出的代码都在文章内示例出
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)})})})
效果图
