关于electron-vue图片压缩

可以设置压缩比例

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  }
      // 构造p@R_406_2899@ise  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)    }
)  }
    )

总结：

以上就是在使用image-size过程中碰到的一点小问题，虽然没有从根源解决问题，但是也能从中学习到一些东西，有时候想要达到自己想要的功能就不能固定使用一种方式，需要学会变通，更重要的是要学会分析问题和解决问题。

更多请关注其它相关文章！

以上就是关于electron-vue图片压缩的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！