Html2canvas实现网页截图应用

官网主页: http://html2canvas.hertzen.com/

概述

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

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

兼容性

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

Firefox 3.5+
Chrome
Opera
IE9

工作原理

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。
换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。
这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

限制

所有的图片都需要在当前域下，这样Html2canvas才能不通过代理去读取到。同样地，如果你的页面上有其他的被跨域内容污染的canvas元素，html2canvas将不能准确渲染下来。
html2canvas不会渲染插件内容：Flash，Java组件，和iframe页面的内容。
所以，用户需要在特定的情况下来使用该插件，便能发挥很大的便利。

使用方法

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

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

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);
}
});

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

图片跨域问题

在网页的图片中，如果有跨域图片，调用toDataURL的时候会出错

SecurityError: The operation is insecure.

解决方法是在跨域的服务器上设置header设置为允许跨域请求

access-control-allow-origin: * access-control-allow-credentials: true

项目下载：https://github.com/niklasvh/html2canvas

应用实例：http://deerface.sinaapp.com/?a=index

参考资料：

1. http://www.uedsc.com/html2canvas.html

2. http://www.jq22.com/jquery-info588

本文固定链接: http://www.webzsky.com/?p=869 | 蓝戒的博客