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 | Element y-offset | 裁剪画布 y 坐标 |
scrollX | Element scrollX | 渲染元素时使用的 x 滚动位置,(例如,如果元素使用 position: fixed) |
scrollY | Element scrollY | 渲染元素时使用的 y 滚动位置,(例如,如果元素使用位置:固定) |
windowWidth | Window.innerWidth | 渲染元素时使用的窗口宽度,这可能会影响媒体查询等内容 |
windowHeight | Window.innerHeight | 渲染元素时使用的窗口高度,这可能会影响媒体查询等内容 |
如果您希望从渲染中排除某些元素,可以向这些元素添加
data-html2canvas-ignore
属性,html2canvas 会将它们从渲染中排除。
4. 实践
待补充…