如何用JavaScript实现网页截图功能？

本文共计1336个文字，预计阅读时间需要6分钟。

Web端的截图（生成图片）需求不算高频，资料自然也不算多。查来查去，Canvas和SVG两种实现方案原理大致相同，都非真正意义上的截图，而是将DOM转换为图片。

Web端的截图(生成图片)并不算是个高频的需求，资料自然也不算多，查来查去，也不过Canvas 和 SVG两种实现方案，原理大概相似，都非真正义上的截图而是把DOM转为图片，然而实现方式却截然不同。

Canvas 实现

如何将dom转换成canvas图片？自然是要一点点画到canvas里，想想都是件麻烦事。通过分析github的知名截图库 niklasvh/html2canvas (7k+ star)的源码，梳理了其大致的思路：

• 递归取出目标模版的所有DOM节点，填充到一个rederList，并附加是否为顶层元素/包含内容的容器 等信息
• 通过z-index postion float等css属性和元素的层级信息将rederList排序，计算出一个canvas的renderQueue
• 遍历renderQueue，将css样式转为setFillStyle可识别的参数，依据nodeType调用相对应canvas方法，如文本则调用fillText，图片drawImage，设置背景色的div调用fillRect等
• 将画好的canvas填充进页面

无论是排序优先级的计算还是从css到canvas的转换，毫无疑问都是些巨麻烦的事，尤其是放在真实的业务场景里，DOM模版中往往会包含复杂的样式与排版，html2canvas 足足用了20多个js来实现这层转换，复杂成度可见一斑。索性，我们不需要再重新造一遍轮子。