html2canvas 学习笔记

1. 介绍

1.1 什么是html2canvas？

html2canvas的作用就是允许我们直接在用户浏览器上拍摄网页或某一部分的截图。
它的屏幕截图是基于DOM的，因此，可能不会100%精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。

1.2 工作原理

该脚本遍历它所加载的页面的 DOM。 它收集那里所有元素的信息，然后用它来构建页面的表示。 换句话说，它实际上并没有截取页面的屏幕截图，而是根据它从 DOM 读取的属性构建它的表示。

这里我也不是很理解。。。谷歌翻译出来是这样的。
官方文档

它只能正确渲染它理解的属性，这意味着有很多CSS属性不起作用。 css属性支持列表

1.3 局限性

脚本使用的所有图像都需要位于同一来源下，以便无需代理帮助即可读取它们。 同样，如果页面上有其他画布元素，这些元素已经被跨域内容污染，它们将变脏并且不再被 html2canvas 读取。
html2canvas还不支持呈现插件内容，例如flash或java小程序。

1.4 浏览器兼容性

该库应该可以在以下浏览器上正常工作（使用 Promise polyfill）：

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Edge
• Safari 6+

2. 开始

2.1 安装

npm install html2canvas

import html2canvas from 'html2canvas';

2.2 用法

html2canvas(element, options);

示例：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

3. 配置

属性名	默认值	描述
allowTaint	false	是否允许使用跨域图片
backgroundColor	#ffffff	Canvas background color, if none is specified in DOM. Set null for transparent
canvas	null	现有的画布元素用作绘图的基础
foreignObjectRendering	false	如果浏览器支持，是否使用 ForeignObject 渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置为 0 以禁用超时。
ignoreElements	(element) => false	从渲染中删除匹配元素的谓词函数。
logging	true	为调试目的启用日志记录
onclone	null	克隆文档进行渲染时调用的回调函数，可用于修改将要渲染的内容而不影响原始源文档。
proxy	null	用于加载跨域图像的代理的 URL。如果留空，则不会加载跨域图像。
removeContainer	true	是否清理 html2canvas 临时创建的克隆 DOM 元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比。
useCORS	false	是否尝试使用 CORS 从服务器加载图像
width	Element width	画布的宽度
height	Element height	画布的高度
x	Element x-offset	裁剪画布 x 坐标
y	Elementy-offset	裁剪画布 y 坐标
scrollX	ElementscrollX	渲染元素时使用的 x 滚动位置，（例如，如果元素使用 position: fixed）
scrollY	ElementscrollY	渲染元素时使用的 y 滚动位置，（例如，如果元素使用位置：固定）
windowWidth	Window.innerWidth	渲染元素时使用的窗口宽度，这可能会影响媒体查询等内容
windowHeight	Window.innerHeight	渲染元素时使用的窗口高度，这可能会影响媒体查询等内容

如果您希望从渲染中排除某些元素，可以向这些元素添加 data-html2canvas-ignore 属性，html2canvas 会将它们从渲染中排除。

4. 实践

待补充…