详解基于electron制作一个node压缩图片的桌面应用

const {ipcRenderer} = require('electron')
const inputBtn = document.getElementById('input-btn')
inputBtn.addEventListener('click', (event) => {
  console.log('点击输入按钮')
  ipcRenderer.send('open-file-dialog-input')
})
ipcRenderer.on('input-path', (event, path) => {
  console.log(`收到完成信息 ${path}`)
  _inputPath = path
  inputPath.value = `${path}`
})

在主进程main.js中，监听渲染进程抛出的事件，并调用api接口后放回结果。

ipcMain.on('open-file-dialog-input', (event) => {
  dialog.showOpenDialog({
    properties: ['openFile', 'openDirectory']  }, (files) => {
    if (files) {
      console.log('发出完成信息')
      event.sender.send('input-path', files)
    }
  })
})

这样我们完成了使用系统api接口选择路径的功能。但其实我们实际的使用场景中路径选择器的方式并不是特别的方便，所以我们实现另一个功能。

拖动将文件或者文件夹拖入网页中，获取到对应的路径。这里使用了js+div实现了这个功能。

index.html

<!--可拖入区域-->
<div id="holder" class="jumbotron holder">
</div>
<style>
    /* 拖拽的区域样式 */
    .holder {
      min-height: 200px;
      background: #eee;
      margin: 2em;
      padding: 1em;
      border: 0px dotted #eee;
      border-radius: 10px;
      transition: .3s all ease-in-out;
    }
    /* 拖拽时用jQuery为其添加边框样式的class */
    .holder-ondrag {
      border: 20px dotted #d45700;
    }
</style>

renderer.js

const holder = document.getElementById("holder")
holder.ondragenter = holder.ondragover = (event) => {
  event.preventDefault()
  holder.className = "jumbotron holder-ondrag"
}
holder.ondragleave = (event) => {
  event.preventDefault()
  holder.className = "jumbotron holder"
}
holder.ondrop = (event) => {
  // 调用 preventDefault() 来避免浏览器对数据的默认处理
  //（drop 事件的默认行为是以链接形式打开
  event.preventDefault()
  holder.className = "jumbotron holder"
  var file = event.dataTransfer.files[0]  _inputPath = inputPath.value = file.path
}

将我们获取到的文件路径传入前面编写的压缩文件模块，这样我们就可以完成了图片的压缩。

桌面应用生成

最后，我们利用electron-packager完成对electron桌面应用的打包。

//mac
electron-packager . --out=out --platform=mas --arch=x64
//win								 
 2/3   首页 上一页 1 2 3 下一页 尾页