什么是html2canvas?
以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制：
- 不支持iframe
- 不支持跨域图片
- 不能在浏览器插件中使用
- 部分浏览器上不支持SVG图片
- 不支持Flash
- 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问http://deerface.sinaapp.com/ 试试 :)
工作原理
Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。
换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。
这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。
使用方法
html2canvas(element, options);
带有回掉函数的：
html2canvas(element, {
onrendered: function(canvas) {
// canvas 是最后一个渲染的<canvas> 元素
}
});
可用参数
| Name | Type | Default | Description |
|---|---|---|---|
| allowTaint | boolean | false | Whether to allow cross-origin images to taint the canvas |
| background | string | #fff | Canvas background color, if none is specified in DOM. Set undefined for transparent |
| height | number | null | Define the heigt of the canvas in pixels. If null, renders with full height of the window. |
| letterRendering | boolean | false | Whether to render each letter seperately. Necessary ifletter-spacing is used. |
| logging | boolean | false | Whether to log events in the console. |
| proxy | string | undefined | Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded. |
| taintTest | boolean | true | Whether to test each image if it taints the canvas before drawing them |
| timeout | number | 0 | Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout. |
| width | number | null | Define the width of the canvas in pixels. If null, renders with full width of the window. |
| useCORS | boolean | false | Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy |
常见问题
1.图片跨域导致截图失败
报错信息如下：
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
解决方法：
- 在跨域的服务器上设置header设置为允许跨域请求。
- 借助代理脚本获得外域图片的 base64 编码后的字符串
总结
虽然在使用过程中会出现一些问题，但是就目前来看，html2canvas的确为前端截图提供了非常大的作用，让我们摆脱了后台的关联处理。