• 技术文章 >web前端 >js教程

    关于electron-vue图片压缩

    铁手铁手2021-07-21 09:01:59原创85
    最近用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)
        })
      })

    总结:

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

    更多请关注php中文网其它相关文章!

    以上就是关于electron-vue图片压缩的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:electron-vue
    上一篇:JavaScript中什么是Set?什么时候使用?如何使用? 下一篇:javascript怎么实现按钮隐藏div
    VIP会员

    相关文章推荐

    • 利用v-viewer结合vue 预览相册• 深入了解vue.js的3种安装方法• 宝塔部署vue项目时,访问首页正常,但其他页面无法访问404的解决办法• 分享一些Vuejs中常用的自定义指令(总结)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网