Html2canvas通过JS截屏？

所属分类：其他-杂项

129856 351 查看评论 (18)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：通过JS就能截屏，这是Html2canvas为用户提供的一个便捷的神器，通过对DOM元素的信息提取渲染页面。

工作原理

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。

换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。

这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

限制

所有的图片都需要在当前域下，这样Html2canvas才能不通过代理去读取到。同样地，如果你的页面上有其他的被跨域内容污染的canvas元素，html2canvas将不能准确渲染下来。

html2canvas不会渲染插件内容：Flash，Java组件，和iframe页面的内容。

所以，用户需要在特定的情况下来使用该插件，便能发挥很大的便利。

使用方法

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 if`letter-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