Node.jsを使用して画像を圧縮するにはどうすればよいですか?手法の紹介

Node.js の使用画像を圧縮するにはどうすればよいですか?次の記事では、Node.js を使用して画像圧縮を実現する方法を紹介します。

#1. 内容紹介

. 当時はまだ画像圧縮という機能が欠けていましたが、今回ようやく解決されました。同時に、従来のバグ (リンクにスペースがあるとエディターが停止する) も解決され、完全に機能するプラグインとみなせるようになりました。興味のある友人はプラグインを検索してください # Vscode で ##upload-to-qiniu をインストールします。 #[推奨学習: 「nodejs チュートリアル 」] #効果のプレビュー:

##2. ノードは画像を圧縮します

最初は、TinyPNG API を使用して画像圧縮を実現する予定でしたが、試してみたところ、圧縮速度は非常に遅く、やはりお金がかかりそうなので思い切って諦めました。代わりに imagemin を使用してください。 ここには落とし穴があります。

imagemin

は画像を直接圧縮できませんが、 imagemin-jpegtran と imagemin-pngquant に依存する必要があるためです。しかし、imagemin-pngquant をインストールするときにインストールできません。私が見つけた理由の 1 つは、このライブラリがいくつかの基礎となる言語に基づいているため、直接インストールできないことです。コンピューター ## に別の依存関係をインストールする必要があります。 #libpng 。

libpng をインストールします

brew をインストールするためのアドレスを直接投稿します: zhuanlan.zhihu.com/p/90508170

、それを彼に伝えるだけです、コマンドを入力して brew をインストールできます。最後に、

brew install libpng

を実行します。

libpng

が正常にインストールされたら、プロジェクトに

imagemin-pngquant をインストールできます。

圧縮画像を実現するコード

要件によると、画像を圧縮してフォルダーに入れることは絶対に望ましくありません。代わりに、圧縮されたコンテンツを直接取得する必要があります。コードに追加して、Seven Cows に直接アップロードします。次に、imagemin.buffer

を使用する必要があります。このメソッドは

buffer

オブジェクトを受け取り、圧縮後に

buffer を返します。圧縮されたバッファを直接使用するだけで済みます。 Qiniu へのアイデアは次のとおりです。コードの実装は次のとおりです。

// 获取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
}

この方法で、画像圧縮を簡単に実装できます。今度はそれを書き直して、Qiniu にアップロードします。以前は圧縮がなかったので、ファイル パスを Qiniu に直接アップロードできます。圧縮後はバッファのみです。バッファを Qiniu にアップロードする必要があります:

gzipImage ? 'putStream' : 'putFile', if we get theバッファを使用するには、formUploader .putStream を使用します。それ以外の場合、アップロードには formUploader.putFile のみが必要です。

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

これで効果を実験できます:

コンピュータ上の PNG 画像を選択します:

プラグインを使用してアップロードした後、リンクを開いて確認してください:

######画像は正常に圧縮されました~ ~#########三、レガシーバグの解決######### 使用中に問題が発生しました。それは、エディターが突然フリーズすることがありました。理由は、リンク内にスペースがあり、他のコンテンツにカーソルを合わせると常にスタックするためでした。したがって、ホバー文字列内のスペースを削除し、次のメソッドを実行してリンクを取得します: ###

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

######4. End############ なぜなら、画像をプレビューするときだからです。ホバー中 一部の画像が大きすぎて読み込みが遅くなるのを防ぐために、Qiniu のトリミング パラメーターが追加されているため、他の種類の画像リンクはプレビューできない場合があります。これは後で解決します ^ ^。プラグインのソース コードを ###github### にアップロードしました。どなたでも [開始] をクリックしてください ^ ^。プラグインについてより良いアイデアがある場合は、相互にコミュニケーションすることもできます。 #########プログラミング関連の知識について詳しくは、###プログラミング入門###をご覧ください。 ！ ###

以上がNode.jsを使用して画像を圧縮するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。