如何將合成的圖片存入 Server 端

發表於 | 更新於 | 分類於

遇到一個需求是要使用 Canvas 合成兩張圖片，並保存在Server 端…

步驟

  • 將合成好的 Canvas 圖片利用 toDataURL() 轉成編碼

  • POST 到後端
    在這裡會遇到一個問題是資料長度格式太大，因為 body-parser 模組默認的大小為 100kb
    合成完的圖片已目前的經驗就算是隨便亂撇一張圖都超過了…，這時候只需要把大小放寬為 50mb 就可以正常 POST 到後端

    1
    2
    3
    4
    5
    6
    7
    8
    app.use(bodyParser.json({ limit: "50mb" }));
    app.use(
      bodyParser.urlencoded({
        limit: "50mb",
        extended: true,
        parameterLimit: 50000
      })
    );

  • 接著把傳到後端的格式資料處理
    toDataURL() 會產生 data:image/png;base64,Xfgtjgm123fddsfsdf..... 的格式，必須把前段的data:image/png;base64,過濾掉
    然後在寫入檔案就完成了，下面是 source code

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 過濾 toDataURL 傳到後端的資料
    function decodeBase64Image(dataString) {
      var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
        response = {};

      if (matches.length !== 3) {
        return new Error("Invalid input string");
      }

      response.type = matches[1];
      response.data = new Buffer(matches[2], "base64");

      return response;
    }

    // 寫入檔案
    function Write() {
        let imageBuffer = decodeBase64Image(req.body.data);
        fs.writeFile("test.jpg", imageBuffer.data, function(err) {
            console.log("success");
        });
    }

延伸

  • 檔案名稱
  • 存檔案的路徑
    這些都可能有各自的考量就不多做紀錄

最後

後期提出需求是要合成 .gif 的圖片，讓我們有點頭大
想法是 .gif 的檔案是存在於後端 Server 上，前端只需要給”上傳的圖片”以及”位置”
在後端再組合圖片，應該就可以解決在傳遞過程資料量又更大的問題

參考

NodeJS write base64 image-file

0%