#每天一个知识点# 前端截图分两种
1、Canvas截图(代表html2canvas),通过遍历DOM克隆一份副本,将此副本在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOM→Canvas→Image。

2、SVG截图(代表rasterizehtml),通过遍历DOM克隆一份副本,利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中,将此SVG在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOM→SVG的ForeignObject→Canvas→Image。

两种前端截图方式最后都是通过把DOM绘制到Canvas,再通过Canvas输出图片。
展开
评论