Electron-Vue 이미지 압축 정보

저는 최근에 Electron-vue(Electron: Chromium 및 Node.js 기반, HTML, CSS 및 JavaScript를 사용하여 애플리케이션을 구축할 수 있음)를 사용하여 일상적인 작업에 여전히 필요하며 일반적으로 사용되는 이미지를 지원합니다. ;

압축 비율을 설정할 수 있습니다

1. 고정 너비 및 높이 설정 지원

2. 고정 너비 또는 높이 지원(원본 이미지 비율에 따라 감소)

3.

구체적인 작업은 다음과 같습니다.

1. 프론트엔드는 이미지 경로와 압축된 경로를 백엔드에 전달합니다. 이는 전자 이벤트를 통해 전달될 수 있습니다.

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. 백엔드는 이미지의 너비와 높이를 얻기 위해 이미지 크기 라이브러리 사용을 고려하기 시작했습니다. 사용법은 다음과 같습니다. 이미지 경로

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

테스트하다가 뭔가 발견했습니다. 작은 문제는 가끔 문제가 있으면 획득이 실패한다는 것입니다. 나중에 쿼리한 후 이 프로브 이미지 크기 라이브러리를 사용하는 데 문제가 없습니다. 사용 방법은 다음과 같습니다:

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. 마지막으로 출력 이미지 경로와 저장된 너비 및 높이를 전달하고 크기 조정을 호출합니다. -optimize-images library. , 코드는 다음과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!