整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
tml2canvas 是一个 JavaScript 库，可以将网页中的 HTML 元素和 CSS 样式转换为 Canvas 绘图命令，进而生成对应的 Canvas 图像。下面是 html2canvas 的工作原理：
1. 解析页面：html2canvas 从指定的 HTML 元素开始，递归遍历解析整个页面的 DOM 结构。它会解析 HTML 元素、CSS 样式和相关的计算属性。
2. 创建 Canvas：在内部，html2canvas 创建一个隐藏的 Canvas 元素，用于绘制和生成图像。这个 Canvas 的大小与要绘制的元素的大小相匹配。
3. 将元素绘制到 Canvas：html2canvas 根据解析的 HTML 元素和计算的 CSS 属性，将元素的内容绘制到隐藏的 Canvas 上。这其中包括内容文本、样式、背景、边框、图像等。
4. 处理跨域资源：在绘制过程中，如果页面中存在跨域的图片资源，html2canvas 会使用跨域安全策略（如使用代理服务器）来加载并渲染这些图片。
5. 处理嵌套元素：如果要绘制的元素包含子元素，html2canvas 会递归绘制这些子元素，并确保它们在正确的位置和层级上。
6. 处理内容溢出：如果要绘制的元素内容超出了其可见区域（溢出），html2canvas 会进行相应的裁剪，确保只绘制可见部分。
7. 添加事件处理：在绘制完成后，html2canvas 还可以选择将某些用户交互事件，如点击、悬停等，添加到 Canvas 图像上。
8. 生成图像：当所有的内容都被绘制到 Canvas 上后，html2canvas 将 Canvas 转换为图像数据，可以导出为 base64 编码的图片或 Blob 对象。
需要注意的是，html2canvas 并不能保证绘制过程中完全准确地还原页面的外观，因为它无法处理一些复杂的 CSS 和动态效果。在某些情况下，可能需要对生成的图像进行后处理，以达到更准确的呈现效果。
html2canvas库允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。目前Github star 17.5K+,可以说非常热门，最新版本1.0.0-rc.3。以上是官网截图：
点击capture按钮效果截图：
html2canvas库通过读取DOM以及应用于元素的不同样式，将当前页面呈现为画布图像。它不需要来自服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。但是，由于它严重依赖于浏览器，因此该库不适合在nodejs中使用。它也不会主动地规避任何浏览器内容策略限制，因此对应呈现跨源内容将需要代理来将内容提供给相同的源。
该库应该可以在以下浏览器上正常工作（使用Promisepolyfill）：
由于该库需要手动构建每个CSS属性以支持，因此还有一些尚不支持的属性。
目前不支持这些CSS属性:
安装
npm install html2canvas import html2canvas from 'html2canvas';
HTML
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div>
JavaScript
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
Tips:
html2canvas(element, options), 具体的option如何配置请详细阅读官方文档。
者：蜀中亮子
转发链接：https://mp.weixin.qq.com/s/ghXm-dySERTFsXEWw79afA
*请认真填写需求信息，我们会在24小时内与您取得联系。
