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

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

相关推荐

  1. Sublime text 添加到鼠标菜单,脚本实现

    2024-07-14 01:10:02       56 阅读
  2. 菜单注册表位置

    2024-07-14 01:10:02       22 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-14 01:10:02       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-14 01:10:02       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-14 01:10:02       57 阅读
  4. Python语言-面向对象

    2024-07-14 01:10:02       68 阅读

热门阅读

  1. Docker 部署 Nginx 并在容器内配置申请免费 SSL 证书

    2024-07-14 01:10:02       21 阅读
  2. 牛客小白月赛98---切割 01 串 2.0

    2024-07-14 01:10:02       19 阅读
  3. 什么是计算机数据结构的字典

    2024-07-14 01:10:02       22 阅读
  4. 7.13扣...

    2024-07-14 01:10:02       21 阅读
  5. COMX-P2020、COMX-P1022板卡

    2024-07-14 01:10:02       18 阅读
  6. C# Winform中ToolStripButton控件实战应用

    2024-07-14 01:10:02       22 阅读
  7. 【DDD】领域驱动设计概念深入探索

    2024-07-14 01:10:02       22 阅读