Выберите и отобразите изображение из файловой системы с электронным

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>