Node保存Canvas图片并删除过期图片的操作步骤
作者：Jimmy
本文,我们将探讨,如何使用 Canvas 生成图片,并通过 Node 将其保存在我们电脑的指定的位置,并在图片文件过期之后,删除该文件内容,以免占用我们的电脑存储空间,下面小编给大家详细演示一下操作步骤,需要的朋友可以参考下
引言
本文，我们将探讨，如何使用 Canvas 生成图片，并通过 Node 将其保存在我们电脑的指定的位置。并在图片文件过期之后，删除该文件内容，以免占用我们的电脑存储空间。
我们将使用的演示环境如下：
- 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 的图片数据。
按照网页的下载方法，我们接下来的下载文件可以通过下面的方法来操作：
// 创建下载链接
const link = document.createElement("a");
link.href = dataUrl;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
网页下载的位置因为安全策略，我们只能默认下载在浏览器指定的位置。我们可以通过手动更改 - 参考 How to specify shere files are downloaded。
使用 node 下载图片
这里我们使用 node 来将图片文件下载在指定的位置。
下面是个简单的开启 node 服务的代码：
// 使用 express Web 应用程序框架
const express = require("express");
const fs = require("fs");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();
const port = 3000;
// 设置视图引擎
app.set("view engine", "ejs");
// 设置视图的文件位置
app.set("views", __dirname + "/views");
// 中间件解析 JSON 请求体
app.use(bodyParser.json({ limit: "50mb" }));
app.get("/", (req, res) => {
// 渲染 index.ejs 模版
res.render("index", {});
});
// 监听应用程序的开启
app.listen(port, () => {
console.log(`App listening at http://localhost:${port}`);
});
我们在 index.ejs 模版中发起请求：
// 发送 dataUrl 数据到服务器
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 监听接口发送过来的数据：
app.post("/saveImage", (req, res) => {
// 图片数据
const { imageData } = req.body;
// 移除数据的 URL 的前缀，根据生成的图片的格式去操作，如果是 jpg 等更改相应内容
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");
// 返回数据给到请求接口
res.json({ message: `Image saved to ${savePath}` });
然后我们在路由 / 页面触发下载之后，可以看到下载的文件内容
使用 node 删除图片
在图片保存一定的时间之后，我们就需要删除，以节省空间大小。我们实现如下：
我们在路由 /cleanCache 路由上操作，我们不需要在 ejs 上操作什么，一进入路由就执行删除操作，所以不需要对应的 ejs 文件。
对应的 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);
// 获取文件和目录的状态信息
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; // 这里我们假设删除 1 分钟前的数据
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 文件夹下面的过期文件。我们触发 /cleanCache 路由后，此时的 output 文件夹下会为空
到此这篇关于Node保存Canvas图片并删除过期图片的操作步骤的文章就介绍到这了,更多相关Node保存Canvas图片并删除过期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！