错误:无法访问文件系统.你可以使用 getBase64 方法 [ElectronJS + VueJS]

Question

我正在尝试使用JIMP调整图像大小。但是我经常收到一个错误说：

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

我正在使用：

• 电子JS电子
• VueJS
• vue-cli-plugin-electron-builder

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

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

有人遇到过这种类型的问题吗？

Answer 1

不要在渲染器中使用 jimp 在 main 中使用它。你可以用事件(ipcRenderer，ipcMain(在main内部触发jimp。 请阅读电子文档：https://electronjs.org/docs/tutorial/first-app

• https://electronjs.org/docs/api/ipc-renderer
• https://electronjs.org/docs/api/ipc-main

没有测试过，但它应该可以工作。

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

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

主.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);
}
});