使用 electron 和 electron-forge 載入 本地磁碟資源 img 的問題

阿政想暴富發表於2022-01-27

最近在學習使用 electron 進行桌面開發一款圖片壓縮的軟體。遇到了載入本地磁碟檔案的問題。記錄一下其解決方案。

使用 electron 載入本地磁碟檔案

  • 第一種方法 設定webPreferences.webSecurity值為false

使用這個方法就是設定Chromium的啟動安全引數，允許訪問本地資原始檔。由於Chromium是不允許在遠端地址訪問本地資源。只有本地資源訪問本地資源，那麼問題來了，使用 electron 啟動的專案怎麼設定訪問本地路徑資源呢？ 程式碼配置如下

// main.js

const { app, BrowserWindow } = require("electron");
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1024,
    height: 600,
    webPreferences: {
      // 設定安全引數
      webSecurity: false, // false 之後就可以訪問 本地資原始檔了
    },
  });
  mainWindow.loadURL("http://localhost:3000"); // 本地服務連結
  mainWindow.webContents.openDevTools();
};

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

<!-- localhost:3000 -->
<div>
  <img src="D:/xxxx/xxx.png" />
  訪問本地圖片地址
</div>

這樣就可以在electron里正常訪問本地資源了。

  • 第二種方法，註冊自定義協議，來繞過Chromium安全檢查。
// main.js

const { app, BrowserWindow, protocol } = require("electron");
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1024,
    height: 600,
  });
  mainWindow.loadURL("http://localhost:3000"); // 本地服務連結
  mainWindow.webContents.openDevTools();
};

app.on("ready", createWindow);

app.whenReady().then(() => {
  // 註冊協議 aaaa 協議名字無所謂 自定義即可
  protocol.registerFileProtocol("aaaa", (request, callback) => {
    const url = request.url.substr(7);
    // 防止url 解析不正常 使用 decodeURI
    callback(decodeURI(path.normalize(url)));
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

<!-- localhost:3000 -->
<div>
  <img src="aaaa:///D:/xxxx/xxx.png" />
  根據自定義協議名字首 訪問本地圖片地址
</div>

使用 electron-forge 載入本地磁碟檔案

electron-forge是 electron 的腳手架，類似於，react 的create-react-app或者 vue 的vue-cli,所有配置檔案都是已經配置好的，根據需求在往上新增就可以用了。如果載入本地磁碟資源用以上辦法還是不太行的。需要再加上一個配置才行。

在forge.config.js或者package.json 設定plugins項，如下

{
  "plugins": [
    [
      "@electron-forge/plugin-webpack",
      {
        "devContentSecurityPolicy": "`default-src 'self' 'unsafe-inline' data:;`", //設定 devContentSecurityPolicy 就可以訪問本地資源了
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.tsx",
              "name": "main_window"
            }
          ]
        }
      }
    ]
  ]
}

配置之後，再使用 上面的兩種方法 其中一種就可以解決 手腳架載入本地磁碟檔案的問題了。

下面貼上我當時開發的版本資訊。

PS D:> node -v
# v14.18.2
PS D:> npm -v
# 6.14.15

{
  "@electron-forge/cli": "^6.0.0-beta.61",
  "electron": "16.0.5"
}

相關文章