vscode-圖片壓縮

---

title: vscode-圖片壓縮
categories: VSCode
tags: [vscode, webp, 壓縮]
date: 2020-04-01 19:35:33
comments: false
mathjax: true
toc: true

vscode-圖片壓縮, 上傳 md 筆記中使用到的圖片 到圖牀前, 進行一次 ‘瘦身’

---

前篇

• 官方
  • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization?hl=zh-cn#webp-browser-support
• https://github.com/imagemin/imagemin
• 從圖片優化說起 - https://cjting.me/2019/07/29/image-optimization/
• 圖像優化如何使我的網站頁面重量減少62％ - https://segmentfault.com/a/1190000018392559

因爲我是用 vscode 寫了個插件監聽某個文件夾, 監聽到到有圖片新增, 就自動上傳到 七牛雲 圖傳, 所以就把這個 圖片瘦身 功能集成 vscode 中.

---

壓縮爲 webp 格式

1. 安裝插件

   npm install --save imagemin
   npm install --save imagemin-webp
   

2. 壓縮圖片

   const images = ['F:/a_desktop/20200330_143904.png', 'F:/a_desktop/20200330_143902.png'] // 一定要是 /, 因爲這裏使用的是 glob 匹配模式, 如: 'images/*.{jpg,png}'
   const output = 'F:/a_desktop/output'
   const quality = 80
   const webps = await imagemin(images, {
       destination: output,
       plugins: [
           imageminWebp({
               quality: quality,
           }),
       ],
   });
   // console.log("--- webps: ", typeof(webps));
   // [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.jpg'}, …]
   const resArr = Object.keys(webps).map(key => webps[key].destinationPath);
   

---

vscode 中的完整源碼

• PicTool.ts

  const imagemin = require('imagemin');
  const imageminWebp = require('imagemin-webp');
  
  class PicTool {
  
      // images 是一個 glob 數組, 如: ['images/*.{jpg}']
      public static imageminToWebp(images: string[], output: string, quality: number) {
          return new Promise<string[]>(async (resolve, reject) => {
              const webps = await imagemin(images, {
                  destination: output,
                  plugins: [
                      imageminWebp({
                          quality: quality,
                      }),
                  ],
              });
              // console.log("--- webps: ", typeof(webps));
              // [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.jpg'}, …]
              const resArr = Object.keys(webps).map(key => webps[key].destinationPath);
              resolve(resArr)
          });
      }
  }
  
  export default PicTool;
  

• 使用

  import PicTool from './PicTool';
  
  // 是否自動上傳, vscode 配置參數
  export interface IQiniuAuto {
      isCompress: boolean
      isAutoUpload: boolean // 是否監聽文件
      quality: number // 壓縮質量
      isUpload: boolean // 用於是否上傳
  }
  
  // 壓縮圖片
  let autoCfg = this.cfg.get<IQiniuAuto>(E_CONFIG.autoUploadQiniu);
  if (autoCfg.isCompress) {
      const tempDir = path.join(vscode.workspace.rootPath, 'compressTempSave');
      const picArr = await PicTool.imageminToWebp(filePathArr, tempDir, autoCfg.quality) // 關鍵代碼
      for (const srcFile of filePathArr) { // 刪除 原圖
          Utils.delFileSync(srcFile);
      }
      filePathArr = picArr // 生成壓縮圖路徑數組
  }