html2canvas: 如何把 HTML 转化为图片?

海报、截屏、水印，这些常见的业务需求都离不开一个库，那就是 html2canvas。把 DOM 转化为 Canvas，仅仅需要一个 API。

const canvas = await html2canvas(document.querySelector("#capture"))

那你知道 DOM 转为图片的原理是什么吗？^[1]

大概是基于以下链条

1. DOM -> foreignObject -> SVG -> Canvas -> JPEG/PNG

如果要实现相同的功能，还可以使用以前介绍过的另外一个库。

• dom-to-image^[2]: Generates an image from a DOM node using HTML5 canvas

参考资料