electron-vue图片压缩的示例分析

这篇文章给大家分享的是有关electron-vue图片压缩的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

为德惠等地区用户提供了全套网页设计制作服务，及德惠网站建设行业解决方案。主营业务为网站设计制作、做网站、德惠网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

最近用electron-vue（Electron ：基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用）撸了一个图片压缩的小软件,平时工作还是需要用得到的，支持常用的图片格式；

可以设置压缩比例

1、支持设置固定宽高

2、支持固定宽或高（按原图比例缩小）

3、支持等比例缩小

具体操作如下：

1、前端把图片的路径和保存压缩后的路径传给后端，这个通过electron事件通讯就可以了

调用的是ipcRenderer.send事件，传入一个事件名，后端用ipcRenderer.on接收即可，

这里需要注意一下，我们使用ipcRenderer.once接收一次就可以，避免重复接收消息。

具体参考如下代码：

await request('resize', this.form.imgPath , this.form.imgSavePath)
  request方法是对ipcRenderer.send做的一个封装
  async function request( event = '', ...params) {
  if (!event) {
    return
  }
  // 构造promise
  const reply = new Promise((resolve, reject) => {
    // 数据返回事件，事先约定
    const eventReply = `${event}-reply`
    ipcRenderer.once(eventReply, (event, data) => {
      resolve(data)
    })
  })
  // 触发事件
  ipcRenderer.send(event, ...params)
  // 返回promise
  return reply
}

2、后端刚开始考虑用image-size这个库获取图片的宽高；用法如下：只需要传入图片的路径即可

const sizeOf = require('image-size')
 let dimensions = sizeOf(path)
  if(!dimensions){
    return
  }
  let width = dimensions.width
  let height = dimensions.height

经测试后发现了一点小问题，就是偶尔出现获取失败的情况，既然有问题那就不能使用了。后面经查询用这个probe-image-size库是没有问题的，使用方式如下：

const probe = require('probe-image-size');
 let dimensions = probe.sync(require('fs').readFileSync(path))
  if(!dimensions){
    return
  }
  let width = dimensions.width
  let height = dimensions.height

3、最后执行压缩即可，传入输出图片路径和保存的宽高，调用resize-optimize-images这个库，代码如下：

fs.readFile(path, function (err, originBuffer) {
    if (err) {
      return
    }
    output = output + `/${basename(path)}`
    fs.writeFile(output, originBuffer, async function (err) {
      if (err) {
        return
      }
      const options = {
        images: [output],
        width,
        height,
        quality: 95,
      }
      //执行压缩.
      await resizeOptimizeImages(options)
    })
  })

感谢各位的阅读！关于“electron-vue图片压缩的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！