Wie komprimiere ich Bilder mit Node.js? Methodeneinführung

Wie komprimiere ich Bilder mit Node.js? Im folgenden Artikel erfahren Sie, wie Sie mit Node.js eine Bildkomprimierung erreichen.

1. Inhaltliche Einführung

Vor einiger Zeit habe ich ein Vscode-Plugin zum Hochladen von Bildern auf Qiniu entwickelt Damals fehlte noch eine Funktion: Diesmal war es so endlich behoben; gleichzeitig kann ein Legacy-Fehler (der Editor bleibt hängen, wenn der Link Leerzeichen enthält) als voll funktionsfähiges Plug-in angesehen werden. Interessierte Freunde können nach dem Plug-in suchen upload-to-qiniu in Vscode zur Installation. upload-to-qiniu进行安装。

【推荐学习：《nodejs 教程》】

效果预览：

二、node压缩图片

一开始是打算用TinyPNG的API实现图片压缩，但是尝试过后发现压缩速度特别慢，而且好像还要花钱，果断就放弃了。改为使用imagemin。

这里是有一个坑的： 由于imagemin不可以直接压缩图片，而是需要依赖imagemin-jpegtran和imagemin-pngquant，但是在安装imagemin-pngquant时会安装不了，找到了一个原因是说这个库是基于一些底层语言实现，所以不能直接安装，需要在电脑上安装另一个依赖libpng。

安装libpng

直接贴一个安装brew的地址：zhuanlan.zhihu.com/p/90508170,只要对着他说的敲命令基本上就可以安装brew啦。最后我们再执行brew install libpng，等到libpng安装成功后，到项目中安装imagemin-pngquant就可以安装上了。

代码实现压缩图片根据需求我们肯定不希望他将图片压缩后放在文件夹里，而是需要在代码中直接获取到压缩后的内容，直接上传到七牛。那么就要用imagemin.buffer,这个方法通过接收一个buffer对象，经过压缩后再返回一个buffer【Empfohlenes Lernen: „nodejs Tutorial

"]

Effektvorschau:

2. Node komprimiert Bilder

Zuerst hatte ich geplant, die API von TinyPNG zu verwenden, um eine Bildkomprimierung zu erreichen, aber nachdem ich es versucht hatte Ich habe festgestellt, dass die Komprimierungsgeschwindigkeit sehr hoch ist. Es war langsam und schien Geld zu kosten, also habe ich entschieden aufgegeben. Verwenden Sie stattdessen imagemin

.

Hier gibt es eine Gefahr: Da imagemin Bilder nicht direkt komprimieren kann, sondern auf imagemin-jpegtran und imagemin-pngquant angewiesen ist Bei der Installation von imagemin-pngquant kann es nicht installiert werden. Ein Grund dafür ist, dass diese Bibliothek auf einigen zugrunde liegenden Sprachen basiert und daher nicht direkt installiert werden kann. Sie müssen eine andere Abhängigkeit libpng installieren auf dem Computer. <p><img src="https://img.php.cn/upload/image/497/177/673/1627004063688068.png" title="1627004063688068.png" alt="Wie komprimiere ich Bilder mit Node.js? Methodeneinführung"></p>Libpng installieren<p></p> <h2 data-id="heading-2">Veröffentlichen Sie direkt die Adresse für die Installation von brew: <a href="https://zhuanlan.zhihu.com/p/90508170" target="_blank" ref="nofollow noopener noreferrer">zhuanlan. zhihu.com/p/90508170<strong>, Sie können brew grundsätzlich installieren, indem Sie den Befehl eingeben, wie er sagt. Abschließend führen wir <code>brew install libpng aus. Nachdem libpng erfolgreich installiert wurde, installieren wir imagemin-pngquant im Projekt und es kann installiert werden.

Code zum Komprimieren von Bildern

Entsprechend den Anforderungen möchten wir auf keinen Fall, dass er die Bilder komprimiert und in den Ordner legt. Stattdessen müssen wir den komprimierten Inhalt direkt im Code abrufen und ihn direkt auf Qiniu hochladen . Dann müssen wir imagemin.buffer verwenden. Diese Methode empfängt ein buffer-Objekt und gibt nach der Komprimierung einen buffer zurück Der Puffer wird direkt auf Qiniu hochgeladen. Das Folgende ist die Code-Implementierung:

// 获取buffer
export const getBufferFromFile = (filePath: string): Promise<Buffer> => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, function (err: any, res: any) {
      if (!err) {
        resolve(res)
      }
    })
  })
}


// 压缩图片，传入图片文件路径，通过getBufferFromFile方法转为buffer 后进行压缩
const imageGzip = async (loaclFile: string): Promise<any> => {
  const bufferFile = await getBufferFromFile(loaclFile)
  let res
  try {
    res = await imagemin.buffer(bufferFile, {
      plugins: [
        imageminJpegtran(),
        imageminPngquant({
          quality: [0.6, 0.8],
        }),
      ],
    })
  } catch (err) {
    console.log(&#39;error&#39;, err)
    res = null
  }
  return res
}

Auf diese Weise können wir ihn jetzt einfach umschreiben und auf Qiniu hochladen: Da es vorher keine Komprimierung gab können den Dateipfad direkt an Qiniu übergeben. Nach der Komprimierung müssen wir nur den Puffer hochladen:

gzipImage? putStream, ansonsten müssen wir nur formUploader .putFile hochladen

export const upImageToQiniu = async (
  loaclFile: string,
  cb: { (res: any): void; (arg0: any): void },
  upConfig: QiNiuUpConfig
) => {
  const config = new qiniu.conf.Config()
  const formUploader = new qiniu.form_up.FormUploader(config)
  const putExtra = new qiniu.form_up.PutExtra()
  const token = getToken(upConfig.accessKey, upConfig.secretKey, upConfig.scope)
  let gzipImage
  if (upConfig.gzip) {
    gzipImage = await imageGzip(loaclFile)
  }
  // 获取当前时间戳
  var key = new Date().getTime()
  // 上传调用方法
  const uploadFnName = gzipImage ? 'putStream' : 'putFile'
  // 上传内容
  const uploadItem = gzipImage ? bufferToStream(gzipImage) : loaclFile
  // 七牛上传
  formUploader[uploadFnName](
    token,
    key,
    uploadItem,
    putExtra,
    function (respErr: any, respBody: any, respInfo: any) {
      if (respErr) {
        throw respErr
      }

      if (respInfo.statusCode === 200) {
        const url = upConfig.domain + '/' + respBody.key
        cb(url)
      }
    }
  )
}

Jetzt können wir mit dem Effekt experimentieren:

Wählen Sie ein PNG-Bild auf dem Computer aus:

🎜Nachdem Sie es mit unserem Plug-in hochgeladen haben, öffnen Sie den Link zu siehe: 🎜🎜🎜🎜🎜Das Bild wurde erfolgreich komprimiert La~~🎜🎜🎜3. Beheben Sie die verbleibenden Fehler🎜🎜🎜Ich habe ein Problem festgestellt, das heißt, manchmal bleibt der Editor plötzlich hängen Es stellte sich heraus, dass der Grund darin lag, dass es immer hängenblieb, wenn Leerzeichen im Link vorhanden waren, und dann andere Inhalte angezeigt wurden. Es kam auch keine Reaktion. Entfernen Sie also einfach die Leerzeichen in der Hover-Zeichenfolge und führen Sie dann die folgende Methode aus, um den Link zu erhalten: 🎜

// 当前行的文本内容
const currentLineText = document.lineAt(position).text.replace(/\s+/g, "")

🎜🎜 IV. Ende 🎜🎜🎜🎜 Denn bei der Vorschau von Bildern beim Hover, um zu verhindern, dass einige Bilder zu groß und langsam werden Zum Laden wurden von Qinius Zuschneideparameter hinzugefügt, sodass andere Arten von Bildlinks möglicherweise nicht in der Vorschau angezeigt werden können, was später behoben wird ^ ^. Ich habe den Plug-in-Quellcode auf 🎜github🎜 hochgeladen, jeder ist herzlich eingeladen, auf Start zu klicken ^ ^. Wenn Sie bessere Ideen für Plug-Ins haben, können Sie auch miteinander kommunizieren. 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie komprimiere ich Bilder mit Node.js? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!