Electron-vue 画像圧縮について

最近、私は Electron-vue (Electron: Chromium と Node.js をベースにしており、HTML、CSS、JavaScript を使用してアプリケーションを構築できます) を使用して小さな画像圧縮ソフトウェアを作成しました。これは今でも日常の作業に必要であり、共通のサポートが提供されています使用する画像形式;

圧縮率を設定できます

1. 固定幅と固定高さの設定をサポートします

2. 固定幅または固定高さをサポートします( (元の画像の比率に応じて) 縮小)

3. 等比率縮小をサポート

具体的な操作は次のとおりです:

1. 前面end は、画像のパスと、画像を保存して圧縮した後のパスを送信します。バックエンドの場合、これは、electron イベントを通じて通信できます。

ipcRenderer.send イベントが呼び出され、イベント名が渡されます。

ここで必須 ipcRenderer.once を使用してメッセージを 1 回受信すると、メッセージを繰り返し受信することを避けることができることに注意してください。

詳細については、次のコードを参照してください:

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. 最後に、圧縮を実行します。出力画像のパスと保存された幅と高さを渡します。

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

概要:

上記は、画像を使用するプロセスで発生するいくつかの小さな問題です。根本的な原因からは解決できていませんが、そこから何かを学ぶこともできます。必要な機能を実現したい場合、1 つの方法に固執できない場合があります。柔軟になることを学ぶ必要があります。さらに重要なのは、問題を分析して解決する方法を学ばなければなりません。

詳細については、php 中国語 Web サイトの他の関連記事にご注目ください。

以上がElectron-vue 画像圧縮についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。