html2canvas根据DOM元素样式实现网页截图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html2canvas是一个相当不错的JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或 ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。虽然它目前还是处理开发阶段，但还是很值得期待的。

这个插件依赖于jQuery插件，建议使用最新版的。

兼容性

html2canvas能在以下的浏览器中完美的运行。

Firefox 3.5+
Chrome
Opera
IE9

使用方法

1、引入文件

首先我们需要引入jQuery库和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的后面引入，不然会报错。

2、调用插件

通过html2canvas方法调用插件，该方法接受两个参数，第一个为要生成截图的DOM元素，第二个参数为插件的配置

html2canvas(document.body, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
}
});

通过一个回调函数来处理获取到的截图。