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

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

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

引言

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

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

NodeJs
Ejs 模版
macOS Sequoia 15.0

canvas 合成

我們通過(guò) toDataURL 生成一張圖。

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

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

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

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

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

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

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

網(wǎng)頁(yè)下載的位置因?yàn)榘踩呗?，我們只能默認(rèn)下載在瀏覽器指定的位置。我們可以通過(guò)手動(dòng)更改 - 參考 How to specify shere files are downloaded。

使用 node 下載圖片

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

下面是個(gè)簡(jiǎn)單的開(kāi)啟 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 請(qǐng)求體
app.use(bodyParser.json({ limit: "50mb" }));

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

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

我們?cè)?nbsp;index.ejs 模版中發(fā)起請(qǐng)求：

// 發(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)聽(tīng)接口發(fā)送過(guò)來(lái)的數(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,/, '');
  
  // 生成時(shí)間戳
  const timestamp = Date.now();
  const fileName = `${timestamp}.png`;
  
  // 指定保存的位置路勁
  const savePath = path.join(__dirname, "output", "${timestamp}", fileName);
});

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

然后我們?cè)诼酚?nbsp;/ 頁(yè)面觸發(fā)下載之后，可以看到下載的文件內(nèi)容

使用 node 刪除圖片

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

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

對(duì)應(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;
        }
        
        // 獲取文件或目錄的修改時(shí)間
        
        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 文件夾下面的過(guò)期文件。我們觸發(fā) /cleanCache 路由后，此時(shí)的 output 文件夾下會(huì)為空