使用JavaScript截图，这里我想推荐两个开源组件：一个是Canvas2Image，可以将Canvas画图编程为PNG/JPEG/BMP图像；然而，这还不够。我们需要截图任何一个DOM(至少大部分)，这需要html2canvas，它可以将DOM对象转换成画布对象。结合这两个功能，可以把页面上的DOM截图拍成PNG或者JPEG图像，非常酷。

Canvas2Image

其原理是利用HTML5的canvas对象提供toDataURL()的API:复制代码如下：Varstrdatauri=ocanvas。toda toull()；//返回' data : image/png；base64，ivborw0ggoaaansuhugaaamgaaadicayaaact .”

结果是base64编码(事实上，图像也可以通过这种方式以字符串的形式写入页面)，所以我们还需要一个带有base64编码和解码的lib。

然而，目前存在许多缺陷。比如Opera和Safari只支持PNG，而FireFox要好得多。

有两种方法可以生成图片并将其写入页面。一种是生成一个图片对象，写入页面的DOM树，也是比较好的支持方式：复制代码如下：//返回一个包含转换后的png图像var oimg png=canvas 2 image的img元素。save aspng (ocanvas，true)；但是如果你做了一个JavaScript截图功能，你可能会想自动打开“保存”对话框保存截图后的文件：

复制代码如下：canvas2image。save aspng(ocan vas)；//将提示用户将图像保存为png。调用此模式会生成一个mimeType为“image/octet-stream”的数据流给浏览器，但“save”对话框无法识别图像的合适后缀名称，FireFox下默认保存的文件为“xxx.part”，这很遗憾，但似乎没有很好的解决方案。

html2canvas

它作用于DOM加载过程，收集其中的信息，然后绘制画布图像。也就是说，它没有将DOM树切割成画布图像，而是通过模仿DOM树来重绘画布图像。因此，许多CSS样式无法准确识别并反映在图形上。

还有许多其他限制，例如：

javascript必须在同一个域中。对于跨域情况，需要使用代理服务器(参数可以在API中指定)，以及镜像；框架中的DOM树无法准确绘制；因为画布是要绘制的，所以像IE8这样的浏览器需要使用像FlashCanvas这样的第三方库。

这个页面可以测试用它来截图各种网站的效果，效果相当不错：

应用编程接口使用示例：

复制代码如下：htm2canvas ([dom1，dom2]，{logging : false，usecors: false，proxy: false，onrendered 3360 function(canvas){//canvas表示绘制的canvas是对象} })；

对于这种比较小的类库，文档很差，包括API的定义，所以需要阅读源代码，代码写得很清楚。

另外，这个站点的下载包中有一个JQuery插件，封装了这个API，可以忽略。