Node.js를 사용하여 이미지를 압축하는 방법은 무엇입니까? 방법 소개

Node.js를 사용하여 이미지를 압축하는 방법은 무엇입니까? 다음 기사에서는 Node.js를 사용하여 이미지 압축을 수행하는 방법을 소개합니다.

1. 콘텐츠 소개

얼마 전, Qiniu에 사진을 업로드하기 위한 Vscode 플러그인을 개발했는데, 그 당시 아직 한 가지 빠진 기능이 있었는데, 바로 이미지 압축이었습니다. 마침내 해결되었습니다. 레거시 버그(링크에 공백이 있으면 편집자가 멈춤)는 이제 완전한 기능을 갖춘 플러그인으로 간주할 수 있습니다. 관심 있는 친구는 플러그인 를 검색할 수 있습니다. Vscode에서 upload-to-qiniu를 설치합니다. 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【추천 학습: "nodejs tutorial

"]

효과 미리보기:

2. 노드는 이미지를 압축합니다

처음에는 TinyPNG의 API를 사용하여 이미지 압축을 하려고 했으나 시도해보았습니다. 압축속도가 엄청 빠르다는 걸 알았고 속도도 느리고 돈도 많이 드는 것 같아서 과감하게 포기했습니다. 대신 imagemin

을 사용하세요.

여기에는 함정이 있습니다. imagemin은 이미지를 직접 압축할 수 없고 imagemin-jpegtran 및 imagemin-pngQuant에 의존해야 하기 때문입니다. imagemin-pngQuant를 설치할 때 설치할 수 없습니다. 제가 찾은 이유 중 하나는 이 라이브러리가 일부 기본 언어를 기반으로 하기 때문에 직접 설치할 수 없다는 것입니다. libpng. 컴퓨터에서 .

Install libpng

brew 설치 주소를 직접 게시하세요: zhuanlan. zhihu.com/p/90508170, 그가 말하는 대로 명령을 입력하면 기본적으로 Brew를 설치할 수 있습니다. 마지막으로 brew install libpng를 실행합니다. libpng가 성공적으로 설치되면 프로젝트에 imagemin-pngQuant를 설치하면 설치가 가능합니다.

이미지 압축 코드

요구 사항에 따라 우리는 그가 이미지를 압축하여 폴더에 넣는 것을 절대 원하지 않습니다. 대신 코드에서 압축된 콘텐츠를 직접 가져와서 Qiniu에 직접 업로드해야 합니다. . 그런 다음 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'을 사용하세요. 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 그림을 선택합니다.

🎜플러그인으로 업로드한 후 링크를 ​​엽니다. 참조: 🎜🎜🎜🎜🎜사진이 성공적으로 압축되었습니다 라~~🎜🎜🎜3. 남은 버그를 해결하세요🎜🎜🎜사용 중 문제가 발견되었습니다. 즉, 가끔 편집기가 갑자기 멈추는 경우가 있었습니다. 그 이유는 링크에 공백이 있으면 항상 멈추고 다른 콘텐츠에 마우스를 올리면 응답이 없기 때문입니다. 따라서 호버 문자열에서 공백을 제거한 후 다음 방법을 실행하여 링크를 얻으세요: 🎜

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

🎜🎜 IV.End 🎜🎜🎜🎜 왜냐하면 호버에서 사진을 미리 볼 때 일부 사진이 너무 크고 느려지는 것을 방지하기 때문입니다. 로드하려면 Qiniu에 자르기 매개변수가 추가되었으므로 다른 유형의 이미지 링크는 미리 볼 수 없으며 이는 나중에 해결될 예정입니다 ^ ^. 플러그인 소스코드를 🎜github🎜에 올렸으니 누구나 시작을 눌러주세요^ ^. 플러그인에 대한 더 좋은 아이디어가 있으면 서로 소통할 수도 있습니다. 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 Node.js를 사용하여 이미지를 압축하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!