快捷導(dǎo)航

Electron實現(xiàn)右鍵保存圖片到本地功能

更新時間：2024年07月28日 09:04:15 作者：mortimer

Electron是開發(fā)跨平臺pc客戶端的利器,最近在使用它時遇到一個需要右鍵保存頁面中圖片的功能,Electron雖使用了Chromium內(nèi)核但卻無法直接使用系統(tǒng)右鍵,需要自定義右鍵菜單,然后添加圖片保存功能,以下是我的使用方法,需要的朋友可以參考下

Electron是開發(fā)跨平臺pc客戶端的利器，最近在使用它時遇到一個需要右鍵保存頁面中圖片的功能，我們知道Chrome瀏覽器本身在圖片上右鍵保存圖片即可，但Electron雖使用了Chromium內(nèi)核但卻無法直接使用系統(tǒng)右鍵，需要自定義右鍵菜單，然后添加圖片保存功能。以下是我的使用方法。

Electron是雙進程模式，即用于頁面渲染的渲染器進程，和作為程序入口及窗口管理的主進程，想必大家都曉得。

保存圖片的核心原理即： 在渲染進程中監(jiān)聽右鍵context事件，獲取到圖片的src，然后將src發(fā)送到主進程，主進程監(jiān)聽到發(fā)送事件后，獲取src地址，然后調(diào)用axios等http請求圖片下載圖片數(shù)據(jù)，復(fù)制到粘貼板并保存到計算機中。

聽起來很簡單對吧，事實上也確實簡單。就是一個渲染進程和主進程進行一次通信，就ok。

渲染進程監(jiān)聽context事件獲取圖片地址

和普通網(wǎng)頁中監(jiān)聽一樣，使用window.addEventListen('context',唯一需要注意的是獲取electron的方式，可以通過preload腳本將electron注入到網(wǎng)頁，也可以直接在創(chuàng)建主窗口時 nodeIntegration設(shè)為true,contextIsolation設(shè)為false從而在網(wǎng)頁中直接使用,當然后者并不安全，不建議使用。

window.addEventListener('contextmenu',function(e){
    let Renderer = (window.require && window.require('electron')) || window.electron || {};
    const ipc = Renderer.ipcRenderer || undefined;
    if(ipc){
        ipc.invoke('saveimg', {src:e.srcElement && e.srcElement.currentSrc?e.srcElement.currentSrc:''}).then(r => {
            // r為返回的數(shù)據(jù)
            console.log(r);
        })
        e.preventDefault();
    }
});

如上代碼，當在圖片上右鍵時，可通過e.srtElement.currentSrc取得圖片地址，然后使用 Render.ipcRenderer.invoke發(fā)送給主進程，當然如果不需要接收返回數(shù)據(jù)，使用 send也是可以

主進程接收數(shù)據(jù)并保存圖片

主進程通過 ipcMain.handle 監(jiān)聽渲染進程發(fā)來的數(shù)據(jù),第二個參數(shù)args 即是渲染進程發(fā)送的數(shù)據(jù)，通過args.src可獲取到圖片地址，然后調(diào)用 saveImage 函數(shù)保存圖片到本地。

為方便使用，可在接到該事件時，添加一個右鍵菜單，只有當點擊右鍵菜單中的“保存圖片到本地”才真正執(zhí)行保存動作。

const { app, BrowserWindow, ipcMain,nativeImage,  dialog,Menu,  MenuItem } = require('electron')


ipcMain.handle(event,args){
  const template = [
      {
      label: '保存圖片到本地',
      accelerator: 'CmdOrCtrl+I',
      enabled: args.src?true:false,
      click: () => {
            if(args.src){  
              saveImage(mainWindow,args.src)			
            }
      }
    }
  ]
  const menu=Menu.buildFromTemplate(template);
  menu.popup()   
}

獲取圖片數(shù)據(jù)并保存

這一步就比較簡單了，使用axios請求圖片數(shù)據(jù)，然后調(diào)用fs.writeFile寫入本地文件即可

const axios =require('axios');
const fs =require('fs');
const path = require('path');



async function saveImage(mainWindow,imageUrl) {
    try {
        const { filePath } = await dialog.showSaveDialog(mainWindow, {
            title: '保存圖片',
            defaultPath: path.join(app.getPath('downloads'), (new Date()).getTime()+'image.jpg'), // 默認保存路徑
        });

        if (!filePath) {
            throw new Error('用戶取消了保存操作');
        }

        // 使用 axios 獲取圖片數(shù)據(jù)
        const response = await axios({
            url: imageUrl,
            method: 'GET',
            responseType: 'arraybuffer',
        });

        if (!response || response.status !== 200) {
            throw new Error(`圖片下載失敗，狀態(tài)碼：${response.status}`);
        }

        // 將響應(yīng)數(shù)據(jù)寫入文件
        const buffer = Buffer.from(response.data);
        fs.writeFile(filePath, buffer, (err) => {
            if (err) {
                throw err;
            }
            console.log('圖片保存成功');
        });
    } catch (error) {
        console.error('保存圖片時發(fā)生錯誤:', error.message);
    }
}

最終效果如右圖，額外加了復(fù)制和粘貼等功能