javascript - 使用 Electron 从文件系统中选择并显示图像

Question

我正在用 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;
        }
    });
});

Answer 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;
});

<div id="image_container"></div>