How to compress images using Node.js? Method introduction

Using Node.jsHow to compress images? The following article will introduce to you how to use Node.js to achieve image compression. Let’s take a look!

1. Content introduction

#. At that time, there was still one missing function: image compression, which was finally solved this time. At the same time, a legacy bug was also solved (the editor would get stuck if there were spaces in the link). Now it can be regarded as a fully functional plug-in. , interested friends can search for the plug-in upload-to-qiniu in Vscode to install it. [Recommended learning: "nodejs tutorial"]

Effect preview:

2. Node compresses imagesAt first, I planned to use the TinyPNG

imagemin instead. There is a pitfall here: because imagemin cannot directly compress images, but needs to rely on imagemin-jpegtran and imagemin-pngquant

imagemin-pngquant

libpng .

Install libpng

zhuanlan.zhihu.com/p/90508170, just say it to him Basically, you can install brew by typing the command. Finally, we execute

. After

is installed successfully, we can install imagemin-pngquant

Code to realize compressed imagesAccording to the requirements, we definitely don’t want him to compress the images and put them in the folder. Instead, we need to get the compressed content directly in the code and upload it directly to Seven cows. Then we need to use imagemin.buffer

buffer

buffer after compression. We only need to use the compressed buffer directly Uploading to Qiniu, the idea is like this, the following is the code implementation:

// 获取buffer
export const getBufferFromFile = (filePath: string): Promise => {
  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 => {
  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('error', err)
    res = null
  }
  return res
}

Copy after login

gzipImage ? 'putStream' : 'putFile', if we get the buffer, use formUploader .putStream, otherwise you only need formUploader.putFile to upload

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

Copy after login

Select a png picture on the computer:

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

The above is the detailed content of How to compress images using Node.js? Method introduction. For more information, please follow other related articles on the PHP Chinese website!