使用电子从文件系统中选择并显示图像答案

【问题标题】：Select and display an image from the filesystem with electron使用电子从文件系统中选择并显示图像
【发布时间】：2018-11-19 18:14:47
【问题描述】：

我正在使用 Electron 开发一个小应用程序，我可以从中将图像上传到 Instagram，但我被困在第一步：/

我想从文件系统中选择一个图像并将其显示在我的应用程序中。

这是我目前得到的代码：

代码：

remote.dialog.showOpenDialog((filenames) => {
    fs.readFile(filepath, 'utf-8', (err, data) => {

        if(err){
            alert("An error ocurred reading the file :" + err.message);
            return;
        }
    });
});

【问题讨论】：

标签： javascript image file electron

【解决方案1】：

选择、读取和显示 png 图像的最小示例。

渲染进程:::

var remote = require('electron').remote;
var fs = remote.require('fs');

  
remote.dialog.showOpenDialog(remote.getCurrentWindow(),
   {
    filters: [
      {name: 'Images', extensions: ['png']}
    ]
   }, 
   function(filepaths, bookmarks) {
     //read image (note: use async in production)
     var _img = fs.readFileSync(filepaths[0]).toString('base64');
     //example for .png
     var _out = '<img src="data:image/png;base64,' + _img + '" />';
     //render/display
     var _target = document.getElementById('image_container');
     _target.insertAdjacentHTML('beforeend', _out);

     return;
});

&lt;div id="image_container"&gt;&lt;/div&gt;

【讨论】：

谢谢，我最终使用了这条线 fs.readFileSync(filepaths[0]).toString('base64') 我可以从那里进一步构建。
有办法将文件缓冲区直接附加到图像上吗？无需将其转换为 base64
文档未定义

【解决方案2】：

这是一个解决方案，其中包含有关main 进程和renderer 的分离以及es6 的用法的更多信息

主进程

import { ipcMain, dialog } from "electron";
import fs from 'fs';

ipcMain.on("chooseFile", (event, arg) => {
  const result = dialog.showOpenDialog({
    properties: ["openFile"],
    filters: [{ name: "Images", extensions: ["png","jpg","jpeg"] }]
  });

  result.then(({canceled, filePaths, bookmarks}) => {
    const base64 = fs.readFileSync(filePaths[0]).toString('base64');
    event.reply("chosenFile", base64);
  });
});

渲染进程

import electron from 'electron';

// trigger file prompt
electron.ipcRenderer.send('chooseFile');

// handle response
electron.ipcRenderer.on('chosenFile', (event, base64) => {
  const src = `data:image/jpg;base64,${base64}`
})

【讨论】：

谢谢。这对我来说更相关和更容易理解

【解决方案3】：

对于电子 11，来自https://www.electronjs.org/docs/api/protocol 的以下 sn-p 有效

app.whenReady().then(() => {
  protocol.registerFileProtocol('atom', (request, callback) => {
    console.log(request.url)
    const url = request.url.substr(7)
    callback({ path: url })
  })
})

小心不要使用通常的file:// 协议，而是使用自定义的“atom”或“my_whatever”协议

您现在可以通过这种方式获取图像：

<img src="atom://C:\\Users\\my_path\\myfile.png" />

但是，如果您不想在渲染端保留 file 协议的语法，您可以执行以下操作：

protocol.registerFileProtocol('file', ()=>...)

现在您可以通过这种方式获取图像

<img src="file://C:\\Users\\my_path\\myfile.png" />

但是你必须禁用webSecurity

const mainWindow = new BrowserWindow({
webPreferences: {
  nodeIntegration : true,
  webSecurity: false
}

【讨论】：