html2canvas实现浏览器截图的原理(包含源码分析的通用方法)华为开源Angular组件库。devui.design 14 人赞同了该文章 DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。 引言有时用户希望将我们的报表页面分享到其他的渠道,比如邮件、PPT等,每次都需要自己截图,一是很麻烦,二是截出来的图大小不一。 有没有办法在页面提供一个下载报表页面的功能,用户只需要点击按钮,就自动将当前的报表页面以图片形式下载下来呢? html2canvas库就能帮我们做到,无需后台支持,纯浏览器实现截图,即使页面有滚动条也是没问题的,截出来的图非常清晰。 这个库的维护时间非常长,早在 截止到今天2020年12月18日,html2canvas库在github已经有 上一次提交是在2020年8月9日,可见作者依然在很热情地维护着这个库,而且用 事实上我很早就将这个库用在了生产环境,这篇文章就来分析下这个神奇和了不起的JavaScript库,看看它是怎么实现浏览器端截图的。 1 如何使用在介绍html2canvas的原理之前,先来看看怎么使用它,使用起来真的非常简单,几乎是1分钟上手。 使用html2canvas只要以下3步: 1. 安装 2. 引入 3. 调用 Step 1: 安装npm i html2canvas Step 2: 引入随便在一个现代框架的工程项目中引入html2canvas import html2canvas from 'html2canvas'; Step 3: 截图并下载html2canvas就是一个函数,在页面渲染完成之后直接调用即可。 视图渲染完成的事件: 1. Angular的ngAfterViewInit方法 2. React的componentDidMount方法 3. Vue的mounted方法 可以只传一个参数,就是你要截图的DOM元素,该函数返回一个Promise对象,在它的then方法中可以获取到绘制好的canvas对象,通过调用canvas对象的toDataURL方法就可以将其转换成图片。 拿到图片的URL之后,我们可以 1. 将其放到 2. 也可以将其放到 我们选择后者。 html2canvas(document.querySelector('.main')).then(canvas => { const link = document.createElement('a'); // 创建一个超链接对象实例 const event = new MouseEvent('click'); // 创建一个鼠标事件的实例 link.download = 'Button.png'; // 设置要下载的图片的名称 link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中 link.dispatchEvent(event); // 触发超链接的点击事件 }); 是不是非常简单? 参数我们再来大致看一眼它的API,该函数的签名如下: html2canvas(element: HTMLElement, options: object): Promise<HTMLCanvasElement> options对象可选的值如下: 忽略元素options有一个ignoreElements参数可以用来忽略某些元素,从渲染过程中移除,除了设置该参数外,还有一种忽略元素的方法,就是在需要忽略的元素上增加 <div data-html2canvas-ignore>Ignore element</div> 2 基本原理介绍完html2canvas的使用,我们先来了解下它的基本原理,然后再分析细节实现。 它的基本原理其实很简单,就是去读取已经渲染好的DOM元素的结构和样式信息,然后基于这些信息去构建截图,呈现在canvas画布中。 它无法绕过浏览器的内容策略限制,如果要呈现跨域图片,需要设置一个代理。 3 主流程 html2canvas方法基本原理很简单,但源码里面其实东西很多,我们一步一步来,先找到入口,然后慢慢调试,走一遍大致的流程。 寻找入口文件拉取到源码,有很多方法可以找到入口文件:
方法一:全局搜索最简单最容易想到的的方法,就是全局搜索关键字 但是全局搜索运气不好的话,很可能搜出来很多结果,在里面找入口文件费时费力,比如: 42个文件285个结果,找起来很麻烦,不推荐。 方法二:打断点在调用html2canvas的地方打一个断点。 然后在执行到断点处时,点击向下的小箭头,进入该方法。 因为在开发环境,很快我们就能发现入口文件和入口方法在哪儿,这里显示的是html2canvas文件,实际上这个文件是构建之后的文件,但是这个文件的上下文给我们提供了找入口方法的信息,这里我们发现了 这时我们可以尝试全局搜索这个方法,很幸运直接找到了 方法三:找配置文件寻找配置文件一般也要靠经验,一般配置文件都会带 配置文件找到,入口文件一般很容易就找到 方法四:方法四一般也要靠经验,我们扫一眼目录结构,其实很容易就能发现主入口 从主入口出发我们已经找到了入口方法在 入口方法几乎啥也没做,直接返回了另一个方法 // 入口方法 const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Promise<HTMLCanvasElement> => { return renderElement(element, options); }; 沿着调用关系往下,很快我们就梳理出了如下简易火焰图(带方法注释) 这张简易的火焰图主要有两点需要注意: 1. 简易火焰图只是帮助我们对整个流程有个粗略的认识,这种认识既不细致也不全面,需要进一步分析里面的关键方法 2. renderStackContent这个渲染层叠内容的方法是整个html2canvas最核心的方法,我们将在 将页面中指定的DOM元素渲染到离屏canvas中 renderElement通过简易火焰图,我们已经对html2canvas的主流程有了一个基本的认识,接下来我们一层一层来分析,先看renderElement方法。 这个方法的主要目的是将页面中指定的DOM元素渲染到一个离屏canvas中,并将渲染好的canvas返回给用户。 它主要做了以下事情: 1. 解析用户传入的options,将其与默认的options合并,得到用于渲染的配置数据renderOptions 2. 对传入的DOM元素进行解析,取到节点信息和样式信息,这些节点信息会和上一步的renderOptions配置一起传给canvasRenderer实例,用来绘制离屏canvas 3. canvasRenderer将依据浏览器渲染层叠内容的规则,将用户传入的DOM元素渲染到一个离屏canvas中,这个离屏canvas我们可以在then方法的回调中取到 renderElement方法的核心代码如下: const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => { const renderOptions = {...defaultOptions, ...opts}; // 合并默认配置和用户配置 const renderer = new CanvasRenderer(renderOptions); // 根据渲染的配置数据生成canvasRenderer实例 const root = parseTree(element); // 解析用户传入的DOM元素(为了不影响原始的DOM,实际上会克隆一个新的DOM元素),获取节点信息 return await renderer.render(root); // canvasRenderer实例会根据解析到的节点信息,依据浏览器渲染层叠内容的规则,将DOM元素内容渲染到离屏canvas中 }; 合并配置的逻辑比较简单,我们直接略过,重点分析下解析节点信息(parseTree)和渲染离屏canvas(renderer.render)两个逻辑。 解析节点信息 parseTreeparseTree的入参就是一个普通的DOM元素,返回值是一个ElementContainer对象,该对象主要包含DOM元素的位置信息( 解析的方法就是递归整个DOM树,并取得每一层节点的数据。 ElementContainer对象是一颗树状结构,大致如下: { bounds: {height: 1303.6875, left: 8, top: -298.5625, width: 1273}, elements: [ { bounds: {left: 8, top: -298.5625, width: 1273, height: 1303.6875}, elements: [ { bounds: {left: 8, top: -298.5625, width: 1273, height: 1303.6875}, elements: [ {styles: CSSParsedDeclaration, textNodes: Array(1), elements: Array(0), bounds: Bounds, flags: 0}, {styles: CSSParsedDeclaration, textNodes: Array(1), elements: Array(0), bounds: Bounds, flags: 0}, {styles: CSSParsedDeclaration, textNodes: Array(1), elements: Array(0), bounds: Bounds, flags: 0}, {styles: CSSParsedDeclaration, textNodes: Array(3), elements: Array(2), bounds: Bounds, flags: 0}, ... ], flags: 0, styles: {backgroundClip: Array(1), backgroundColor: 0, backgroundImage: Array(0), backgroundOrigin: Array(1), backgroundPosition: Array(1), …}, textNodes: [] } ], flags: 0, styles: CSSParsedDeclaration {backgroundClip: Array(1), backgroundColor: 0, backgroundImage: Array(0), backgroundOrigin: Array(1), backgroundPosition: Array(1), …}, textNodes: [] } ], flags: 4, styles: CSSParsedDeclaration {backgroundClip: Array(1), backgroundColor: 0, backgroundImage: Array(0), backgroundOrigin: Array(1), backgroundPosition: Array(1), …}, textNodes: [] } 里面包含了每一层节点的:
渲染离屏canvas renderer.render有了节点树信息,就可以用来渲染离屏canvas了,我们来看看渲染的逻辑。 渲染的逻辑在CanvasRenderer类的render方法中,该方法主要用来渲染层叠内容: 1. 使用上一步解析到的节点数据,生成层叠数据 2. 使用节点的层叠数据,依据浏览器渲染层叠数据的规则,将DOM元素一层一层渲染到离屏canvas中 render方法的核心代码如下: async render(element: ElementContainer): Promise<HTMLCanvasElement> { /** * StackingContext { * element: ElementPaint {container: ElementContainer, effects: Array(0), curves: BoundCurves} * inlineLevel: [] * negativeZIndex: [] * nonInlineLevel: [ElementPaint] * nonPositionedFloats: [] * nonPositionedInlineLevel: [] * positiveZIndex: [StackingContext] * zeroOrAutoZIndexOrTransformedOrOpacity: [StackingContext] * } */ const stack = parseStackingContexts(element); // 渲染层叠内容 await this.renderStack(stack); return this.canvas; } 其中的
代表的是层叠信息,渲染层叠内容时会根据这些层叠信息来决定渲染的顺序,一层一层有序进行渲染。 parseStackingContexts解析层叠信息的方式和parseTree解析节点信息的方式类似,都是递归整棵树,收集树的每一层的信息,形成一颗包含层叠信息的层叠树。 而渲染层叠内容的renderStack方式实际上调用的是renderStackContent方法,该方法是整个渲染流程中最为关键的方法,下一章单独分析。 4 渲染层叠内容 renderStackContent将DOM元素一层一层得渲染到离屏canvas中,是html2canvas所做的最核心的事情,这件事由renderStackContent方法来实现。 因此有必要重点分析这个方法的实现原理,这里涉及到CSS布局相关的一些知识,我先做一个简单的介绍。 CSS层叠布局规则默认情况下,CSS是流式布局的,元素与元素之间不会重叠。 流式布局的意思可以理解:在一个矩形的水面上,放置很多矩形的浮块,浮块会漂浮在水面上,且彼此之间依次排列,不会重叠在一起 这是要绘制它们其实非常简单,一个个按顺序绘制即可。 不过有些情况下,这种流式布局会被打破,比如使用了浮动(float)和定位(position)。 因此需要需要识别出哪些脱离了正常文档流的元素,并记住它们的层叠信息,以便正确地渲染它们。 那些脱离正常文档流的元素会形成一个层叠上下文,可以将层叠上下文简单理解为一个个的薄层(类似Photoshop的图层),薄层中有很多DOM元素,这些薄层叠在一起,最终形成了我们看到的多彩的页面。 这些不同类型的层的层叠顺序规则如下: 这张图很重要,html2canvas渲染DOM元素的规则也是一样的,可以认为html2canvas就是对这张图描述的规则的一个实现。 详细的规则在w3官方文档中有描述,大家可以参考: https://www.w3.org/TR/css-position-3/#painting-order renderStackContent就是对CSS层叠布局规则的一个实现有了这些基础知识,我们分析renderStackContent就一目了然了,它的源码如下: async renderStackContent(stack: StackingContext) { // 1. 最底层是background/border await this.renderNodeBackgroundAndBorders(stack.element); // 2. 第二层是负z-index for (const child of stack.negativeZIndex) { await this.renderStack(child); } // 3. 第三层是block块状盒子 await this.renderNodeContent(stack.element); for (const child of stack.nonInlineLevel) { await this.renderNode(child); } // 4. 第四层是float浮动盒子 for (const child of stack.nonPositionedFloats) { await this.renderStack(child); } // 5. 第五层是inline/inline-block水平盒子 for (const child of stack.nonPositionedInlineLevel) { await this.renderStack(child); } for (const child of stack.inlineLevel) { await this.renderNode(child); } // 6. 第六层是以下三种: // (1) 'z-index: auto’或'z-index: 0’。 // (2) 'transform: none’ // (3) opacity小于1 for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) { await this.renderStack(child); } // 7. 第七层是正z-index for (const child of stack.positiveZIndex) { await this.renderStack(child); } } 小结本文主要介绍html2canvas实现浏览器截图的原理。 首先简单介绍html2canvas是做什么的,如何使用它; 然后从主入口出发,分析html2canvas渲染DOM元素的大致流程(简易火焰图); 接着按火焰图的顺序,依次对renderElement方法中执行的parseTree/parseStackingContextrenderer.render三个方法进行分析,了解这些方法的作用和原理; 最后通过介绍CSS布局规则和7阶层叠水平,自然地引出renderStackContent关键方法实现原理的介绍。 加入我们我们是DevUI团队,欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱:muyang2@huawei.com。 文/DevUI Kagol 往期文章推荐 |
|
来自: hncdman > 《print css》