在node中怎么解析自己的html转化成base64的图片。这是我代码:
res.render(path.join(__dirname + '/public/index.html'), { time: time, list: data }, async function (err, result) {
if (err) {
console.log(err);
} else {
console.log(result)
}
})
别人请求我接口,我得到time和data渲染好页面得到了result,reult是一个html模版,类似于这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
213123
</div>
</body>
</html>
现在我想把模版解析生产base64的图片返回出去,前端好分享我这个图片
在 Node.js 中,可以使用 html-to-image 和 node-canvas 库将 HTML 转化为图片,并将图片转换为 base64 编码。具体实现步骤如下:
1、安装依赖库
在 Node.js 项目目录下,使用以下命令安装依赖库:
npm install html-to-image node-canvas
2、编写代码
在 Node.js 项目中,使用以下代码将 HTML 转化为图片并将图片转换为 base64 编码:
const { createCanvas } = require('canvas');
const { toPng } = require('html-to-image');
// HTML 标记
const htmlString = '<div>Hello World!</div>';
// 创建 Canvas 对象
const canvas = createCanvas(200, 100);
const ctx = canvas.getContext('2d');
// 将 HTML 转化为图片,并绘制到 Canvas 上
toPng(htmlString, { quality: 0.95 })
.then((img) => {
const image = new Image();
image.src = img;
ctx.drawImage(image, 0, 0);
// 将 Canvas 转化为 base64 编码
const base64Data = canvas.toDataURL().replace(/^data:image\/\w+;base64,/, '');
console.log(base64Data);
})
.catch((error) => {
console.error('An error occurred:', error);
});
在上面的代码中,首先通过 html-to-image 库的 toPng 方法将 HTML 标记转化为 PNG 格式的图片,并将其绘制到 Canvas 对象上,然后通过 canvas.toDataURL() 方法将 Canvas 转化为 base64 编码并输出到控制台上。
需要注意的是,在使用 node-canvas 库时,需要安装一些系统依赖库,具体可以参考该库的文档进行安装。