關於在 nodejs 中使用 jimp 處理圖片

今天項目新增了一個功能，我把項目更新到我的服務器后進行了測試，發現在圖片未加載完全時，使用新功能會另第一次點擊返回按鈕失敗，第二次點擊返回按鈕會返回到初始的新標簽。於是我便萌生了圖片上傳后保存一個該圖片的 min 版，並在非全屏展示圖片情況下使用 min 版圖片。

一開始我想使用 canvas 來進行這項工作，但是消耗了幾個小時后，看着一堆前置配置，再看了看自己的學生雲主機，便放棄了使用這個模塊的想法。一番搜索后，我找到了一個替代品-----sharp，在嘗試下載后，卡死在了依賴下載中，於是放棄了這個模塊。

之后，我使用了 sharp + canvas 進行搜索，發現了一個無任何依賴的模塊-----jimp，簡單的查看了一下這個模塊在 npm 的介紹，覺得完全符合我的需求，便下載了這個模塊。這個模塊的下載過程一帆風順，比前面兩個大哥痛快太多了。下載完之后，馬上使用。

相比 canvas 而言，這個模塊用來修改圖片大小特別簡單，只需要 jimp.read(圖片名).then(圖片=>{return 圖片.resize(寬度, 高度).write(保存位置+圖片名)})，可比 canvas 先 new 一個 Image 然后設置 src 再監聽 onload 事件快捷多了。

知道了使用方式后，我便按照我的需求寫起了代碼。我現在需要使用 base64 或者 buffer 創建一個最大寬或高為 400 的圖片，因此我需要獲取圖片的寬和高，可是使用說明中並未說明如何獲取圖片的寬高啊。於是便去搜索了一下，在該模塊GitHub的issue中找到了答案。只需要在 then 中，調用 圖片.bitmap 的 width 和 height 屬性即可。最后，我便得到了以下代碼：

      Jimp.read(dataBuffer).then(img => {
        const imgWidth = img.bitmap.width;
        const imgHeight = img.bitmap.height;
        const length = 400;
        const isWidthLonger = imgWidth > imgHeight ? true : false;
        const time = (isWidthLonger ? imgWidth : imgHeight) / length;

        const rWidth = imgWidth / time;
        const rHeight = imgHeight / time;
        return img.resize(rWidth, rHeight ).write(`./public/img/${hash}.min.${file.match(/\w*(?=;)/)}`);
      });

注：file變量為 base64 格式字符串，使用正則是為了獲取其圖片格式。