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

最新推荐文章于 2024-07-18 10:22:33 发布

华玖

最新推荐文章于 2024-07-18 10:22:33 发布

阅读量435

点赞数 2

分类专栏： electron node Vue 文章标签： electron javascript 前端 node

本文链接：https://blog.csdn.net/qq_30675311/article/details/140346478

版权

electron 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

node

3 篇文章 0 订阅

订阅专栏

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