资讯专栏INFORMATION COLUMN

html2image原理简述

SillyMonkey / 2034人阅读

摘要:前言看到大神了,也一直很好奇怎么转那么就翻下源码,看下是如何实现的,其实一共就不到行代码,还蛮容易读懂的工作原理使用的一个特性,允许在标签中包含任意的内容。

前言

看到 TJ 大神 star了dom-to-image,也一直很好奇html怎么转 image

那么就翻下源码,看下是如何实现的,其实一共就不到800行代码,还蛮容易读懂的

工作原理

使用svg的一个特性,允许在标签中包含任意的html内容。(主要是 XMLSerializer | MDN这个apidom转为svg
所以,为了渲染那个dom节点,你需要采取以下步骤:

递归 clone 原始的 dom 节点

获取 节点以及子节点 上的 computed style,并将这些样式添加进新建的style标签中(不要忘记了clone 伪元素的样式)

嵌入网页字体

找到所有的@font-face

解析URL资源,并下载对应的资源

base64编码和内联资源 作为 data: URLS引用

把上面处理完的css rules全部都放进