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

html2canvas

海报、截屏、水印，这些常见的业务需求都离不开一个库，那就是 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

参考资料

[1]

那你知道 DOM 转为图片的原理是什么吗？: https://github.com/shfshanyue/Daily-Question/issues/437

[2]

dom-to-image: https://github.com/tsayen/dom-to-image