weixin_45998591 2019-12-10 12:22 采纳率: 0%
浏览 471

在node中怎么解析自己的html转化成base64的图片

在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的图片返回出去，前端好分享我这个图片

  • 写回答

1条回答

  • 艾恩小灰灰 2023-03-22 15:29
    关注

    在 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 库时，需要安装一些系统依赖库，具体可以参考该库的文档进行安装。

    评论

报告相同问题？

悬赏问题

  • ¥15 安装svn网络有问题怎么办
  • ¥15 Python爬取指定微博话题下的内容，保存为txt
  • ¥15 vue2登录调用后端接口如何实现
  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥15 latex怎么处理论文引理引用参考文献