Node保存Canvas圖片并刪除過期圖片的操作步驟

更新時間：2025年05月07日 09:43:07 作者：Jimmy

本文,我們將探討,如何使用 Canvas 生成圖片,并通過 Node 將其保存在我們電腦的指定的位置,并在圖片文件過期之后,刪除該文件內(nèi)容,以免占用我們的電腦存儲空間,下面小編給大家詳細演示一下操作步驟,需要的朋友可以參考下

引言

本文，我們將探討，如何使用 Canvas 生成圖片，并通過 Node 將其保存在我們電腦的指定的位置。并在圖片文件過期之后，刪除該文件內(nèi)容，以免占用我們的電腦存儲空間。

我們將使用的演示環(huán)境如下：

NodeJs
Ejs 模版
macOS Sequoia 15.0

canvas 合成

我們通過 toDataURL 生成一張圖。

<canvas id="canvas" width="400" height="400"></canvas>

// 獲取花布
const canvas = document.getElementById("canvas");
// 獲取畫筆
const context = canvas.getContext("2d");

// 簡單繪制點什么
context.fillStyle = "#FFFF00";
context.fillRect(0, 0, 400, 400);

// other content ...
const dataUrl = canvas.toDataURL("image/png");

這里我們生成了 base64 的圖片數(shù)據(jù)。

按照網(wǎng)頁的下載方法，我們接下來的下載文件可以通過下面的方法來操作：

// 創(chuàng)建下載鏈接
const link = document.createElement("a");
link.href = dataUrl;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

網(wǎng)頁下載的位置因為安全策略，我們只能默認下載在瀏覽器指定的位置。我們可以通過手動更改 - 參考 How to specify shere files are downloaded。

使用 node 下載圖片

這里我們使用 node 來將圖片文件下載在指定的位置。

下面是個簡單的開啟 node 服務(wù)的代碼：

// 使用 express Web 應(yīng)用程序框架
const express = require("express");
const fs = require("fs");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();
const port = 3000;

// 設(shè)置視圖引擎
app.set("view engine", "ejs");

// 設(shè)置視圖的文件位置
app.set("views", __dirname + "/views");

// 中間件解析 JSON 請求體
app.use(bodyParser.json({ limit: "50mb" }));

app.get("/", (req, res) => {
  // 渲染 index.ejs 模版
  res.render("index", {});
});

// 監(jiān)聽應(yīng)用程序的開啟
app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

我們在 index.ejs 模版中發(fā)起請求：

// 發(fā)送 dataUrl 數(shù)據(jù)到服務(wù)器
fetch("/saveImage", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ imageData: dataUrl })
})
.then((response => response.json()))
.then(data => {
  console.log(`Image saved in ${data.message}`);
})
.catch(error => {
  console.error("Error: ", error);
});

我們用 node 監(jiān)聽接口發(fā)送過來的數(shù)據(jù)：

app.post("/saveImage", (req, res) => {
  // 圖片數(shù)據(jù)
  const { imageData } = req.body;
  
  // 移除數(shù)據(jù)的 URL 的前綴，根據(jù)生成的圖片的格式去操作，如果是 jpg 等更改相應(yīng)內(nèi)容
  const base64Data = imageData.replace(/^data:image\/png;base64,/, '');
  
  // 生成時間戳
  const timestamp = Date.now();
  const fileName = `${timestamp}.png`;
  
  // 指定保存的位置路勁
  const savePath = path.join(__dirname, "output", "${timestamp}", fileName);
});

  // 確保保存的路勁的目錄存在
  fs.mkdirSync(path.dirname(savePath), { recursive: true });
  
  // 寫入文件
  fs.writeFileSync(savePath, base64Data, "base64");
  
  // 返回數(shù)據(jù)給到請求接口
  res.json({ message: `Image saved to ${savePath}` });

然后我們在路由 / 頁面觸發(fā)下載之后，可以看到下載的文件內(nèi)容

使用 node 刪除圖片

在圖片保存一定的時間之后，我們就需要刪除，以節(jié)省空間大小。我們實現(xiàn)如下：

我們在路由 /cleanCache 路由上操作，我們不需要在 ejs 上操作什么，一進入路由就執(zhí)行刪除操作，所以不需要對應(yīng)的 ejs 文件。

對應(yīng)的 node 代碼如下：

app.get("/cleanCache", (req, res) => {
  // 保存下載文件的文件夾
  const outputDir = path.join(__dirname, "output");
  
  // 讀取該目錄下的所有文件和子目錄
  fs.readdir(outputDir, (err, files) => {
    if (err) {
      return res.status(500).send("Unable to scan directory: ", err);
    }
    
    files.forEach(file => {
      const filePath = path.join(outputDir, file);
      
      // 獲取文件和目錄的狀態(tài)信息
      fs.stat(filePath, (err, stats) => {
        if (err) {
          console.error("Unable to get file stats: " + err);
          return;
        }
        
        // 獲取文件或目錄的修改時間
        
        const fileMtime = stats.mtime.getTime();
        const oneMinuteAgo = Date.now() - 60 * 1000; // 這里我們假設(shè)刪除 1 分鐘前的數(shù)據(jù)
        if (fileMtime < oneMinuteAge) {
          // 如果是目錄，則遞歸刪除目錄以及文件
          if (stats.isDirectory()) {
            fs.rm(filePath, { recursive: true, force: true }, err => {
              if (err) {
                console.error("Unable to delete directory: " + err);
              } else {
                console.log("Deleted directory: " + filePath);
              }
            });
          } else {
            // 如果是文件，則直接刪除
            fs.unlink(filePath, err => {
              if (err) {
                console.error("Unable to delete file: " + err);
              } else {
                console.log("Deleted file: " + filePath);
              }
            });
          }
        }
      });
    });
    
    res.send("Clear Done!");
  });
});

我們刪除 output 文件夾下面的過期文件。我們觸發(fā) /cleanCache 路由后，此時的 output 文件夾下會為空