网页截图的javaｓｃｒｉｐｔ实现

使用Javaｓｃｒｉｐｔ的截图，这里我推荐两开源组件：一个是canvas2image，可帆布图形编程的PNG或JPEG或BMP图像；但光是不够的，我们需要给任何DOM（至少大部分）的镜头，这就需要html2canvas，它可以转换为DOM反对一个画布对象，这两者的结合，对页面DOM可以截图PNG或JPEG图像，很酷。

canvas2image

其原理是利用HTML5的Canvas对象提供todataurl（）API：

复制代码代码如下所示：

无功strdatauri = ocanvas.todataurl（）；

/ /返回数据：图像/格式；base64，ivborw0kggoaaaansuheugaaamgaaadicayaaact…
这个结果是通过base64编码（事实上，图像可以被写入页这种方式在字符串的形式），所以我们还需要一个base64编码解码库。

但目前存在很多缺陷，如Opera和Safari，只支持PNG，Firefox的支持要好得多。

将图片写入页面有两种方法。一个是生成一个图片对象来写入DOM树，这也是一个更好的支持。

复制代码代码如下所示：

返回包含转换后的PNG / PNG图像的元素。

无功oimgpng = canvas2image.saveaspng（ocanvas，真的）；
但是，如果你做了一个Javaｓｃｒｉｐｔ截图，你可能想在截图后自动打开保存对话框。

复制代码代码如下所示：

canvas2image.saveaspng（ocanvas）；

将提示用户将图像保存为PNG。
这个调用将生成的文件类型图像/字节流数据流到浏览器，但无法找到合适的图片保存对话框扩展，默认的保存文件xxx.part这个名字在Firefox中，这是令人遗憾的，但似乎没有很好的办法来解决什么。

html2canvas

它的作用在DOM加载过程中，收集信息和绘图画布图像，即实际上是不切的DOM树，帆布图，但要重新绘制一个基于DOM树的画布图。CSS样式很多不能准确鉴定并不能准确地反映在地图上。

还有许多其他限制，如：

Javaｓｃｒｉｐｔ必须是同一个域，对于跨域的情况，它需要使用代理服务器（参数可以在API中指定），并且与映像相同；

帧中的DOM树不能精确绘制；

由于帆布图可以得出，一个浏览器IE8需要使用第三方库，如flashcanvas。

本页面可以测试每个网站截图的效果，效果相当不错。
api使用的示例：

复制代码代码如下所示：

html2canvas（

{ DOM1，DOM2 }，

{

日志记录：false，

usecors：假，

代理：虚假，

onrendered：功能（帆布）{

画布是画布对象。

}

}

）；
对于这类相对较小的类库，文档非常差，包括API的定义，它需要读取源代码，并且代码写得很清楚。

此外，站点的下载包中还有一个jQuery插件，这个API的包可以忽略。