Über Electron-Vue-Bildkomprimierung

Ich habe kürzlich Electron-vue (Electron: basierend auf Chromium und Node.js, mit dem Sie Anwendungen mit HTML, CSS und JavaScript erstellen können) verwendet, um eine kleine Bildkomprimierungssoftware zu erstellen. Sie wird immer noch für die tägliche Arbeit benötigt und unterstützt häufig verwendete Bilder Formate. ;

Sie können das Komprimierungsverhältnis festlegen

1. Unterstützt die Einstellung fester Breite oder Höhe (reduziert entsprechend dem ursprünglichen Bildverhältnis)

Die spezifischen Operationen sind wie folgt:

1. Das Front-End übergibt den Bildpfad und den komprimierten Pfad an das Back-End. Das ipcRenderer.send-Ereignis wird aufgerufen , und ein Ereignisname wird übergeben. Das Back-End verwendet ipcRenderer.on. Empfangen Sie es einfach.

Hier ist zu beachten, dass wir ipcRenderer.once verwenden können, um es einmal zu empfangen, um den wiederholten Empfang von Nachrichten zu vermeiden.

Weitere Informationen finden Sie im folgenden Code:

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. Das Backend hat gerade damit begonnen, über die Verwendung der Bildgrößenbibliothek nachzudenken, um die Breite und Höhe des Bildes zu ermitteln Der Pfad des Bildes

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

Ich habe nach dem Testen etwas entdeckt. Das kleine Problem ist, dass die Erfassung gelegentlich fehlschlägt. Wenn es ein Problem gibt, kann es nicht verwendet werden. Nach einer späteren Abfrage ist die Verwendung dieser Probe-Image-Size-Bibliothek kein Problem:

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 Führen Sie abschließend eine Komprimierung durch und geben Sie die Breite und Höhe des Ausgabebilds ein -optimize-images-Bibliothek, der Code lautet wie folgt:

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

Zusammenfassung:

Die oben genannten Probleme sind bei der Verwendung der Bildgröße aufgetreten, obwohl das Problem nicht von der Grundursache her gelöst werden kann Manchmal können wir auch etwas daraus lernen. Die gewünschten Funktionen können nicht auf eine Weise festgelegt werden. Sie müssen lernen, flexibel zu sein, und was noch wichtiger ist, Sie müssen lernen, Probleme zu analysieren und zu lösen. Für weitere Informationen beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonÜber Electron-Vue-Bildkomprimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!