About electron-vue image compression

Recently I used electron-vue (Electron: based on Chromium and Node.js, allowing you to build applications using HTML, CSS and JavaScript) to create a small image compression software. It is still needed for daily work and supports commonly used Image format;

You can set the compression ratio

1. Support setting fixed width and height

2. Support fixed width or height (according to the original image ratio) Reduction)

3. Supports equal proportion reduction

The specific operations are as follows:

1. The front end transmits the path of the image and the path after saving and compressing it. For the backend, this can be communicated through the electron event.

The ipcRenderer.send event is called, and an event name is passed in. The backend can receive it with ipcRenderer.on.

Required here Note that we can use ipcRenderer.once to receive messages once to avoid receiving messages repeatedly.

Please refer to the following code for details:

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. The backend has just started to consider using the image-size library to obtain the width and height of the image; the usage is as follows: just pass in the path of the image

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

After testing, I found a small problem, that is, the acquisition fails occasionally. If there is a problem, it cannot be used. There is no problem in using this probe-image-size library after querying later. The usage method is as follows:

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. Finally, perform compression. Pass in the output image path and saved width and height, and call resize-optimize. -images library, the code is as follows:

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)
    })
  })

Summary:

The above are some minor problems encountered in the process of using image-size, although they have not been solved from the root cause Problems, but you can also learn something from them. Sometimes if you want to achieve the functions you want, you cannot stick to one method. You need to learn to be flexible. More importantly, you must learn to analyze and solve problems.

For more information, please pay attention to other related articles on the php Chinese website!

The above is the detailed content of About electron-vue image compression. For more information, please follow other related articles on the PHP Chinese website!