Question

我正在尝试使用JIMP调整图像大小。但是我不断收到错误消息：

错误：无法访问文件系统。您可以使用getBase64方法。

我正在使用：

我还公开了我的Gitlab存储库，以防万一有人重现错误：Gitlab link

我还发现有人已经提出了一个问题作为错误：https://github.com/oliver-moran/jimp/issues/639

有人遇到过这种问题吗？

Answer 1

请勿在渲染器中使用jimp，而在主渲染器中使用它。您可以使用事件（ipcRenderer，ipcMain）在主体内部触发jimp。请阅读电子文档：https://electronjs.org/docs/tutorial/first-app

还没有测试，但是应该可以。

您必须在 vue.config.js 中设置 main.js https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#webpack-configuration

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/main.js'
    }
  }
}

main.js

const { app, BrowserWindow } = require('electron');
const jimp = require('jimp');
const { ipcMain } = require('electron');

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  win.loadFile('index.html');

  win.webContents.openDevTools();

  // get triggered by renderer
  ipcMain.on('trigger-jimp', (event, arg) => {
    jimp.read(filepaths[0]).then(image => {
      // sends back the image to renderer
      event.sender.send('triggered-jimp', image);
    });
  });

  win.on('closed', () => {
    win = null;
  });
}

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

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

OpenDialog.vue

<template>
<div>
  <button v-on:click="openDialog('openDirectory')">Upload Folder</button>
  <button v-on:click="openDialog('openFile')">Upload File</button>
</div>
</template>

<script>
const { dialog } = require('electron').remote;
const { ipcRenderer } = require('electron');

export default {
  methods: {
      dialog.showOpenDialog({
        properties: [property],
        filters: [{name: 'Images', extensions: ['png', 'jpg',  'gif']}]
      })
      }, function(filepaths) {
        console.log(filepaths);
        // send path to yout main
        ipcRenderer.send('trigger-jimp', filepaths);
      });
    },
    handleImage(image) {
      console.log(image);
    }
  },
  mounted() {
    // get image from main
    ipcRenderer.on('jimp-triggered', this.handleImage);
  },
  beforeDestroy() {
    // remove the listener
    ipcMain.removeListener('jimp-triggered', this.handleImage);
  }
}
</script>

Answer 2

不知道如何解决写入错误，但是我可以向您展示如何使用base64数据解决该错误。我实际上下载了您的代码并进行了测试。

更改为html

  <button v-on:click="openDialog('openFile')">Upload File</button>
  <img id="image" src=""/>

更改为脚本

jimp.read(filepaths[0], function (err, image) {
  image.resize(200,200);
  image.getBase64(Jimp.AUTO, function(err, data) {
    console.log(data);
    document.getElementById("image").setAttribute("src", data);
  });
});

编辑：这是直接编写而不是调用jimp.write的方法。您可以在调用image.getBase64之前进行图像处理（如调整大小）。

    var base64Data = data.replace(/^data:image\/png;base64,/, "");
    fs.writeFile("test.png", base64Data, 'base64', function(err) {
      if(err) {
        return console.log(err);
      }
    });

错误：无法访问文件系统。您可以使用getBase64方法[ElectronJS + VueJS]

2 个答案:

更改为html

更改为脚本