Bagaimana untuk memampatkan imej menggunakan Node.js? Pengenalan kaedah

Bagaimana untuk memampatkan imej menggunakan Node.js? Artikel berikut akan memperkenalkan kepada anda cara menggunakan Node.js untuk mencapai pemampatan imej. Mari lihat!

1. Pengenalan kandungan

Beberapa masa lalu, kami telah membangunkan pemalam Vscode untuk memuat naik gambar kepada Qiniu Pada masa itu, masih terdapat satu ciri yang hilang: pemampatan imej, yang akhirnya diselesaikan kali ini Pada masa yang sama, pepijat warisan juga telah diselesaikan (editor akan tersekat jika terdapat ruang pautan), dan kini ia boleh dianggap sebagai pemalam yang berfungsi sepenuhnya, rakan yang berminat boleh mencari pemalam upload-to-qiniu dalam Vscode untuk memasangnya.

[Pembelajaran yang disyorkan: "tutorial nodejs"]

Pratonton kesan:

2. Nod memampatkan imej

Pada mulanya, saya bercadang untuk menggunakan API TinyPNG untuk memampatkan imej, tetapi selepas mencubanya, saya mendapati bahawa kelajuan mampatan adalah sangat lambat, dan nampaknya memerlukan wang, berputus asa dengan tegas. Gunakan imagemin sebaliknya.

Terdapat perangkap di sini: imagemin tidak boleh memampatkan imej secara langsung, tetapi perlu bergantung pada imagemin-jpegtran dan imagemin-pngquant, tetapi ia tidak akan dipasang semasa memasang imagemin-pngquant Saya menemui sebabnya bermakna pustaka ini adalah berdasarkan beberapa pelaksanaan bahasa peringkat rendah, jadi ia tidak boleh dipasang secara langsung Anda perlu memasang pergantungan lain pada komputer libpng.

Pasang libpng

Hanya siarkan alamat untuk memasang brew: zhuanlan.zhihu.com/p/90508170, hanya katakan padanya Secara asasnya , anda boleh memasang brew dengan menaip arahan. Akhir sekali, kami melaksanakan brew install libpng, tunggu sehingga libpng berjaya dipasang, dan pasang imagemin-pngquant dalam projek.

Kod untuk memampatkan imejMengikut keperluan, kami pasti tidak mahu dia memampatkan imej dan memasukkannya ke dalam folder Sebaliknya, kami perlu memasukkan kandungan yang dimampatkan secara terus kod dan muat naik terus ke Tujuh lembu. Kemudian kita perlu menggunakan imagemin.buffer Kaedah ini menerima objek buffer dan mengembalikan buffer selepas pemampatan pelaksanaan:

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

Dengan cara ini, kita boleh melaksanakan pemampatan imej dengan mudah Sekarang mari kita tulis semula dan muat naik ke Qiniu: Kerana tiada pemampatan sebelum ini, kita boleh memuat naik terus laluan fail ke Qiniu , kami hanya mempunyai penimbal, kami perlu memuat naik penimbal ke Qiniu:

gzipImage ? 'putStream' : 'putFile', jika kami mendapat penimbal, gunakan formUploader.putStream, jika tidak, kami hanya memerlukan formUploader .putFile untuk dimuat naik

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

Sekarang kita boleh bereksperimen dengan kesan:

Pilih gambar png pada komputer anda:

Gunakan kami Selepas pemalam dimuat naik, buka pautan dan lihat:

Mampatan imej berjaya~~

3. Selesaikan pepijat yang tinggal

Masalah yang saya dapati semasa menggunakannya ialah kadang-kadang editor akan tersekat Kemudian saya mendapat tahu bahawa sebabnya ia akan sentiasa tersekat apabila ada adalah ruang dalam pautan, dan kemudian kandungan tuding lain tidak akan bertindak balas. Jadi hanya keluarkan ruang dalam rentetan hover dan kemudian laksanakan kaedah berikut untuk mendapatkan pautan:

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

4. Tamatkan

Kerana dalam hover pratonton Untuk mengelakkan beberapa gambar daripada menjadi terlalu besar dan lambat dimuatkan, parameter pemangkasan Qiniu telah ditambah Oleh itu, pautan gambar jenis lain mungkin tidak boleh dipratonton. Ini akan diselesaikan kemudian. Saya telah memuat naik kod sumber pemalam ke github, semua orang dialu-alukan untuk mengklik mula^ ^. Jika anda mempunyai idea yang lebih baik untuk pemalam, anda juga boleh berkomunikasi antara satu sama lain.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk memampatkan imej menggunakan Node.js? Pengenalan kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!