html2canvas: 如何把 HTML 轉(zhuǎn)化為圖片?

海報(bào)、截屏、水印，這些常見的業(yè)務(wù)需求都離不開一個(gè)庫，那就是 html2canvas。把 DOM 轉(zhuǎn)化為 Canvas，僅僅需要一個(gè) API。

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

那你知道 DOM 轉(zhuǎn)為圖片的原理是什么嗎？^[1]

大概是基于以下鏈條

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

如果要實(shí)現(xiàn)相同的功能，還可以使用以前介紹過的另外一個(gè)庫。

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

參考資料