Comment compresser des images avec Node.js ? Présentation de la méthode

Comment compresser des images à l'aide de Node.js ? L'article suivant vous expliquera comment utiliser Node.js pour réaliser une compression d'image.

1. Introduction au contenu

Il y a quelque temps, j'ai développé un plug-in Vscode pour télécharger des images sur Qiniu À cette époque, il manquait encore une fonction : cette fois, c'était la compression d'image. enfin résolu ; en même temps, un bug hérité (l'éditeur restera bloqué s'il y a des espaces dans le lien), il peut désormais être considéré comme un plug-in entièrement fonctionnel. Les amis intéressés peuvent rechercher le plug-in dans Vscode. pour l'installer. upload-to-qiniu

[Apprentissage recommandé : "

Tutoriel Nodejs"]

Aperçu de l'effet :

2. Au début, j'avais prévu d'utiliser l'API de pour réaliser la compression d'image. , mais après l'avoir essayé, j'ai découvert que la vitesse de compression était extrêmement lente et semblait coûter de l'argent, alors j'ai abandonné de manière décisive. Utilisez plutôt imagemin

.

TinyPNGIl y a un piège ici : puisque ne peut pas compresser directement les images, mais doit s'appuyer sur et

, mais elle ne sera pas installée lors de l'installation

, j'ai trouvé une raison pour laquelle cette bibliothèque est basée sur certains langages sous-jacents, donc elle. ne peut pas être installé directement et une autre dépendance doit être installée sur l'ordinateurimagemin. imagemin-jpegtranimagemin-pngquantimagemin-pngquantInstallez libpnglibpng

Publiez directement l'adresse pour installer Brew : zhuanlan.zhihu.com/p/90508170 Tapez simplement la commande qu'il dit et vous pouvez essentiellement installer Brew. Enfin, nous exécutons à nouveau

, attendons que

soit installé avec succès, puis installons dans le projet et il peut être installé. brew install libpnglibpngCode pour compresser les imagesimagemin-pngquantSelon les exigences, nous ne voulons certainement pas qu'il compresse les images et les mette dans le dossier, nous devons plutôt obtenir directement le contenu compressé dans le code et le télécharger directement sur Qiniu. . Ensuite, nous devons utiliser

. Cette méthode reçoit un objet

et renvoie un après compression. Il suffit d'utiliser le tampon compressé pour le télécharger directement sur Qiniu. Voici l'implémentation du code :

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

imagemin.buffer In. de cette façon, nous pouvons facilement réaliser la compression d'image, maintenant nous la réécrivons et la téléchargeons sur Qiniu : Comme il n'y avait pas de compression auparavant, nous pouvons directement télécharger le chemin du fichier vers Qiniu. Après la compression, nous n'avons que le tampon, et nous. besoin de télécharger le tampon sur Qiniu : bufferbuffer

gzipImage ? 'putStream' : 'putFile', si nous obtenons le tampon, utilisez formUploader.putStream, sinon nous n'avons besoin que de formUploader.putFile pour télécharger

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

Maintenant, nous pouvons expérimenter avec l'effet : Sélectionnez un png sur l'ordinateur Image :

Après l'avoir téléchargé avec notre plug-in, ouvrez le lien et jetez un œil :

L'image est compressée avec succès~~

3. Résoudre les bugs restants

J'ai trouvé un problème lors de son utilisation. Parfois, l'éditeur restait soudainement bloqué. Plus tard, j'ai découvert que la raison était qu'il restait bloqué lorsqu'il y avait des espaces dans le lien. les autres contenus en survol ne répondraient pas. Il suffit donc de supprimer les espaces dans la chaîne de survol, puis d'exécuter la méthode suivante pour obtenir le lien :

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

IV Fin

Parce que lors de la prévisualisation des images au survol, afin d'éviter que certaines images ne soient trop grandes et trop lentes. pour charger, les paramètres de recadrage de Qiniu ont été ajoutés, de sorte que d'autres types de liens d'image peuvent ne pas être prévisualisables, ce qui sera résolu plus tard ^ ^. J'ai téléchargé le code source du plug-in sur github

, tout le monde est invité à cliquer sur Démarrer ^ ^. Si vous avez de meilleures idées de plug-ins, vous pouvez également communiquer entre vous.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!