什么是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的确为前端截图提供了非常大的作用,让我们摆脱了后台的关联处理。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。