JavaScript 手动将 HTML 转为 Canvas

可以使用 JavaScript 的 Canvas API 来手动绘制 HTML 元素到 Canvas 上。

首先，创建一个 Canvas 元素并获取其上下文：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

然后，将要绘制的 HTML 元素放置在一个容器中：

<div id='container'>
  <!-- HTML 元素 -->
</div>

接下来，使用 JavaScript 获取容器元素和其内部的 HTML 内容：

var container = document.getElementById('container');
var html = container.innerHTML;

然后，使用 Canvas 的 drawImage 方法将 HTML 内容绘制到 Canvas 上：

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(html)));

最后，可以将 Canvas 转换为图片或执行其他操作：

var dataURL = canvas.toDataURL();
console.log(dataURL);

这样就可以将 HTML 转换为 Canvas，然后可以将 Canvas 保存为图片或进行其他操作。