electron实现右键菜单保存图片功能

news2024/11/12 7:47:27

1.创建窗口,加载页面,代码如下:

//打开窗口

const {ipcMain, BrowserWindow} = require("electron")
const saveImage = require("../ipcMain/saveImage")
let win = null;
ipcMain.handle('on-open-event', (event, args) => {
    if (!win) {
        win = new BrowserWindow({
            width: 1200,
            height: 800,
        })
        win.setMenu(null)
    }
    win.loadURL("https://www.jingdong.com");
    win.webContents.on("context-menu", (event, args) => {
        event.preventDefault();
        //判断图片资源路径是否为空
        if (args.srcURL !== ""){
            saveImage(event,args.srcURL);
        }
    })
    win.on("closed", () => {
        win = null;
    })
})

2.封装图片保存方法,代码如下:

const {Menu, dialog, BrowserWindow, shell} = require("electron")
const path = require("path");
const got = require("got")
const imageType = require("image-type")
const randomString = require("randomstring");
const fs = require('fs')

let menu = null;
const saveImage = (event, srcURL) => {
    if (!menu) {
        menu = Menu.buildFromTemplate([
            {
                label: "保存图片",
                click: async () => {
                    try {
                        const respones = await got(srcURL) //通过图片地址获取数据流
                        const buffer = Buffer.from(respones.rawBody) //数据流转成Buffer
                        const ImageType = await imageType(buffer); //获取图片格式
                        const fileName = randomString.generate(10);//随机生成10位由数字、字母组合的文件名

                        let {canceled, filePath} = await dialog.showSaveDialog({
                            title: "图片另存为",

                            defaultPath: path.resolve(__dirname, '../public/uploads/' + fileName + '.' + ImageType.ext),
                        })
                        if (!canceled) {//写入图片数据
                            fs.writeFileSync(filePath, buffer)
                            //查看保存的图片资源
                            dialog.showMessageBox({
                                message: "保存成功",
                                type: "info",
                                buttons: ["查看"],
                                noLink: false,
                            }).then(res => {
                                shell.openPath(path.resolve(__dirname, '../public/uploads/'))
                            })
                        }

                    } catch (e) {
                        console.log(e)
                    }

                }
            }
        ])
    }
    //显示菜单
    menu.popup()
}

module.exports = saveImage


3.运行效果:
加载页面
鼠标右键菜单
图片保存弹窗
打开资源管理器查看图片资源
在这里插入图片描述

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

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

相关文章

Oralce笔记-解决Oracle18c中ORA-28001: 口令已经失效

远程已经连不上了,需要登陆到安装Oracle的机器,使用sqlplus直接连。 sqlplus / as sysdba 登陆进去后修改期限为无限制: ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED 对于已经告警提示密码已过期的数据库,需要…

顺序表<数据结构 C 版>

目录 线性表 顺序表 动态顺序表类型 初始化 销毁 打印 检查空间是否充足(扩容) 尾部插入 头部插入 尾部删除 头部删除 指定位置插入 指定位置删除 查找数据 线性表 线性表是n个相同特性的数据元素组成的有限序列,其是一种广泛运…

vue实现动态图片(gif)

目录 1. 背景 2. 分析 3. 代码实现 1. 背景 最近在项目中发现一个有意思的小需求,鼠标移入一个盒子里,然后盒子里的图就开始动起来,就像一个gif一样,然后鼠标移出,再按照原来的变化变回去,就像变形金刚…

掌握Vue.js:六步打造前端开发高手!

Vue.js,这个在前端开发界熠熠生辉的名字,以其轻巧、高效、易学的特性,成为了众多开发者构建动态交互式网页的首选框架。它不仅简化了前端开发的复杂性,还提供了一套丰富的组件库和工具链,使得开发者能够快速上手并构建…

微软Office PLUS办公插件下载安装指南

微软OfficePLUS插件下载安装指南 简介: OfficePLUS微软官方出品的Office插件 ,OfficePLUS拥有30万高质量模板素材,能帮助Word、Excel、Powerpoint、PDF等多种办公软件提升效率,具有智能化、模板质量高、运行快、稳定性强等优点。…

【大语言模型】私有化搭建-企业知识库-知识问答系统

下面是我关于大语言模型学习的一点记录 目录 人工智能学习路线 MaxKB 系统(基于大语言模型的知识问答系统) 部署开源大语言模型LLM 1.CPU模式(没有好的GPU,算力和效果较差) 2.GPU模式(需要有NVIDIA显卡支持) Ollama网络配置 Ollama前…

docker私有仓库harbor安装

Harbor默认安装 下载harbor https://github.com/goharbor/harbor/releases/download/v2.11.0/harbor-offline-installer-v2.11.0.tgz 目前要求docker版本,docker 20.10.10-ce ,和docker-compose 1.18.0 查看 docker-compose版本 docker-compose --ver…

卷积神经网络图像识别车辆类型

卷积神经网络图像识别车辆类型 1、图像 自行车: 汽车: 摩托车: 2、数据集目录 3、流程 1、获取数据,把图像转成矩阵,并随机划分训练集、测试集 2、把标签转为数值,将标签向量转换为二值矩阵 3、图像数据归一化,0-1之间的值 4、构造卷积神经网络 5、设置图像输入…

Mysql数据表的约束(下)

3.默认值约束(default) 与非空约束的命令一致,因为都属于列级约束,因此只需将not null改为default 默认值即可 删除默认值约束: 4.主键约束(primary key) 表示给一张表格设置了一个唯一标识,为了更快的去通过唯一的数据去准确的查找到每一条记录,一半咱们在创建表…

强化学习编程实战-5 基于时间差分的方法

第4章中,当模型未知时,由于状态转移概率P未知,动态规划中值函数的评估方法不再适用,用蒙特卡洛的方法聘雇值函数。 在蒙特卡洛方法评估值函数时,需要采样一整条轨迹,即需要从初始状态s0到终止状态的整个序列…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(七)-通过无人机实现无线接入的独立部署

引言 本文是3GPP TR 22.829 V17.1.0技术报告,专注于无人机(UAV)在3GPP系统中的增强支持。文章提出了多个无人机应用场景,分析了相应的能力要求,并建议了新的服务级别要求和关键性能指标(KPIs)。…

【精品资料】模块化数据中心解决方案(33页PPT)

引言:模块化数据中心解决方案是一种创新的数据中心设计和部署策略,旨在提高数据中心的灵活性、可扩展性和效率。这种方案通过将数据中心的基础设施、计算、存储和网络资源封装到标准化的模块中,实现了快速部署、易于管理和高效运维的目标 方案…

FPGA入门-自用

写代码,并将引脚对应到板子相应的引脚上 下载程序到板子上 遇到错误了,不按想的来的了,进行仿真 查看网表图查看问题所在 简化了一些步骤:未使用引脚的设置,电压设置; 通过画网表结构图来构成电路 时钟 …

Android焦点之SurfaceFlinger的apply

接animate()的openSurfaceTransaction(),prepareSurfaces(),closeSurfaceTransaction() 1. mService.openSurfaceTransaction(),通过SurfaceControl来通知native开始一个Transaction; 2. mService.closeSurfaceTransaction(),通过SurfaceCo…

JVM系列 | 对象的创建与存储

JVM系列 | 对象的生命周期1 对象的创建与存储 文章目录 前言对象的创建过程内存空间的分配方式方式1 | 指针碰撞方式2 | 空闲列表 线程安全问题 | 避免空间冲突的方式方式1 | 同步处理(加锁)方式2 | 本地线程分配缓存 对象的内存布局Part1 | 对象头Mark Word类型指针…

如何在Mac上恢复已删除的存档文件?

在本文中,我们将分享在 macOS 或 OS X 上运行的 MacBook、iMac 或 Mac mini 上恢复已删除存档文件的不同方法。 下载免费试用的 Mac 数据恢复软件以在 Mac 上恢复已删除的存档文件。 macOS 可以选择压缩您的文件。您只需选择文件,按住 Control 键单击&a…

实验场:在几分钟内使用 Bedrock Anthropic Models 和 Elasticsearch 进行 RAG 实验

作者:来自 Elastic Joe McElroy, Aditya Tripathi 我们最近发布了 Elasticsearch Playground,这是一个新的低代码界面,开发人员可以通过 A/B 测试 LLM、调整提示(prompt)和分块数据来迭代和构建生产 RAG 应用程序。今天…

基于Fail2ban及iptables的SSH端口爆破防御方案

君衍. 一、本篇介绍二、Fail2ban1、简介2、工作方式3、优缺点4、工作原理5、目录结构6、功能特点 三、更改默认SSH端口1、更改配置文件2、重启服务 四、SSH日志审计1、连接失败的IP2、失败IP次数排行3、连接成功的IP4、成功IP次数排行 五、Fail2ban1、安装2、配置3、日志查看4、…

前端项目本地的node_modules直接上传到服务器上无法直接使用(node-sasa模块报错)

跑 jekins任务的服务器不能连接外网下载依赖包,就将本地下载的 node_modules直接上传到服务器上,但是运行时node-sass模块报错了ERROR in Missing binding /root/component/node_modules/node-sass/vendor/linux-x64-48/binding.node >> 报错信息类…

matlab PID tuner整定工具箱的用法

从主页的APP中搜索到它: 按照下图IMPORT导入被控对象的传递函数 在下图的Inspect按钮中可以看到导入的被控对象的传函。 在下图的Type中选择控制器类型: 在下图的Form中选择PID的形式:有两种可选:平行式Parallel和标准式Standard …