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

注:该列出的代码,都在文章内示例出

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)})})})

效果图:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用vue+kkFileview组件实现各种类型文件预览

关于kkFileView 【参考】:https://kkfileview.keking.cn/zh-cn/docs/home.html 文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署。万能的文件预览开源项目,基本支持主流文档格式预览 本项目介绍 项目使用…

低空经济产业链、政策、延伸品调研笔记

文章目录 1 低空经济市场1.1 政策摘要1.2 市场规模预测 3 涉及产业链与核心产品3.1 产业链3.2 原材料3.2.1 上游3.2.2 中游3.2.3下游 3.3 无人机3.4 eVTOL3.5 空管系统 4 应用场景4.1 城市空中出行(UAM)4.2 低空物流4.3 低空旅游与体验4.4 农林植保与监测4.5 基础设施巡检与维护…

JVM基础(内存结构)

文章目录 内存结构JAVA堆方法区 (Method Area)运行时常量池(Runtime Constant Pool) 虚拟机栈 (Java Virtual Machine Stack)本地方法摘栈(Native Method Stacks)程序计数器&#xf…

Matlab 车牌识别技术

1.1设计内容及要求: 课题研究的主要内容是对数码相机拍摄的车牌,进行基于数字图像处理技术的车牌定位技术和车牌字符分割技术的研究与开发,涉及到图像预处理、车牌定位、倾斜校正、字符分割等方面的知识,总流程图如图1-1所示。 图1-1系统总…

智慧共享空间解决方案是什么

一、智慧共享空间解决方案的定义 智慧共享空间解决方案是一种综合性的策略和技术手段,旨在通过整合智慧技术与共享空间的概念,为公众共同使用的空间提供高效、智能、可持续的运营和管理模式,以满足人们在不同环境下的各种需求,并…

C++基于opencv的视频质量检测--画面冻结检测

文章目录 0.引言1. 原始代码分析2. 优化方案3. 优化后的代码4. 代码详细解读 0.引言 视频质量画面冻结检测已在C基于opencv4的视频质量检测中有所介绍,本文将详细介绍其优化版本。 1. 原始代码分析 图像抖动检测的原始代码: bool ScreenFreezeDetect…

AI驱动的低代码未来:加速应用开发的智能解决方案

引言 随着数字化转型的浪潮席卷全球,企业对快速构建应用程序的需求愈发强烈。然而,传统的软件开发周期冗长、成本高昂,往往无法满足快速变化的市场需求。在此背景下,低代码平台逐渐成为开发者和企业的优选方案,以其“低…

【蓝桥杯选拔赛真题77】python计算小球 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析

目录 python计算小球 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python计算小球 第十五届蓝桥杯青少年组python比赛选拔赛真题 一、题目要…

架构师备考-非关系型数据库

基础理论 CAP 理论 C(Consistency)一致性。一致性是指更新操作成功并返回客户端完成后,所有的节点在同一时间的数据完全一致,与ACID 的 C 完全不同。A (Availability)可用性。可用性是指服务一直可用&…

内网渗透-初探域渗透

文章目录 环境域信息收集系统基本信息网络信息域控主机信息根据ip查主机名用户信息权限提升网络探针系统命令nbtscanfscannishang 凭据收集 域渗透实战凭据收集(重点)mimikatzProcdumpPwdumpSAMInsidekrbtgt用户hash hash破解解决无法获取明文的问题明文口令传递IPC连接atschta…

windows录屏软件工具推荐!!

如今,科技的进步,互联网的普及,使我们的生活越来越便利,录屏工具的出现,大大提高我们的工作效率。如果你经常需要录制屏幕上的内容,比如制作教学视频、游戏实况记录、演示文稿等等,那这几款软件…

【病毒分析】从无解到破解:Mallox家族linux版本的分析以及解密器的制作

1.背景 Mallox勒索软件首次出现于2021年5月,并在2021年10月扩展到中国市场。截至2024年,它仍然活跃。Mallox通过加密受害者文件并要求支付赎金来恢复数据,使用唯一的加密密钥加密文件,受害者的文件通常会添加“.mallox”或“.mal…

【LeetCode每日一题】——862.和至少为 K 的最短子数组

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 前缀和 二【题目难度】 困难 三【题目编号】 862.和至少为 K 的最短子数组 四【题目描述】 …

容器化核心快速入门

概述 物理机:好比是独立的大船,独立发动机,独立船舱。所有资源共用。运水果的同时就不能运鱼( 1964年)虚拟机:相当于把大船进行改造,把大船的资源进行独立的拆分,独立的部分都有单独…

适合自己的才行-这五款项目管理软件工具帮你提高管理效能

凭借多年项目管理经验,我试用过数十款国内外项目管理软件。我认为,操作简便性至关重要,因为软件仅是辅助管理工具,复杂性若影响管理本质,则得不偿失。 在生产管理方面,我专注于新产品从立项到研发的全过程…

【网络原理】HTTPS

目录 前言 为什么要使用HTTPS? HTTPS是如果进行加密的 1.对称加密 2.非对称加密 中间人攻击 3.证书 中间人有没有可能篡改证书? 中间人有没有可能整个调包证书? 前言 在上一篇中,我们讲解了什么是HTTP,但是在…

现代数字信号处理I--最佳线性无偏估计 BLUE 学习笔记

目录 1. 最佳线性无偏估计的由来 2. 简单线性模型下一维参数的BLUE 3. 一般线性模型下一维参数的BLUE 4. 一般线性模型下多维参数的BLUE 4.1 以一维情况说明Rao论文中的结论 4.2 矢量参数是MVUE的本质是矢量参数中的每个一维参数都是MVUE 4.3 一般线性模型多维参数BLUE的…

[简易版] 自动化脚本

前言 uniapp cli项目中没办法自动化打开微信开发者工具,需要手动打开比较繁琐,故此自动化脚本就诞生啦~ 实现 const spawn require("cross-spawn"); const chalk require("picocolors"); const dayjs require("dayjs&quo…

牛客网刷题(1)(java之数据类型、数组的创建(静态/动态初始化)、static关键字与静态属性和方法、常用的servlet包、面向对象程序设计方法优点)

目录 一、Java变量的数据类型。 <1>Java中变量的数据类型。 <2>基本数据类型。 <3>引用数据类型。 二、Java中一维数组的初始化。&#xff08;静态、动态初始化&#xff09; <1>数组。 <2>动态初始化。 <3>静态初始化。 三、看清代码后&am…

Cesium基础-(Entity)-(Billboard)

里边包含Vue、React框架代码 2、Billboard 广告牌 Cesium中的Billboard是一种用于在3D场景中添加图像标签的简单方式。Billboard提供了一种方法来显示定向的2D图像,这些图像通常用于表示简单的标记、符号或图标。以下是对Billboard的详细解读: 1. Billboard的定义和特性 B…