JavaScript实现网页截图功能

更新时间：2014年10月16日 08:52:27 作者：四火

这篇文章主要介绍了JavaScript实现网页截图功能,本文介绍了2款实现JavaScript截图的开源组件,一个是Canvas2Image,一个是html2canvas,需要的朋友可以参考下

使用JavaScript截图，这里我要推荐两款开源组件：一个是Canvas2Image，它可以将Canvas绘图编程PNG/JPEG/BMP的图像；但是光有它还不够，我们需要给任意DOM（至少是绝大部分）截图，这就需要html2canvas，它可以将DOM对象转换成一个canvas对象。两者的功能结合起来，就可以把页面上的DOM截图成PNG或者JPEG图像了，很酷。

Canvas2Image

它的原理是利用了HTML5的canvas对象提供了toDataURL()的API：

复制代码代码如下:

var strDataURI = oCanvas.toDataURL();  

// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

这样的结果是base64编码的（事实上，image也可以通过这种方式以字符串的形式写死到页面上），所以我们还需要一个base64编解码的lib。

但是目前的缺陷也有不少，比如目前Opera和Safari只支持PNG，FireFox的支持性则好得多。

生成图片有两种方式写入页面，一种是生成一个图片对象写入页面DOM树中，这也是支持性比较好的方式：

复制代码代码如下:

// returns an <img> element containing the converted PNG image  

var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

但是如果你做一个JavaScript截图功能的话，你可能希望截图后能够自动打开保存文件的“保存”对话框：

复制代码代码如下:

Canvas2Image.saveAsPNG(oCanvas);

// will prompt the user to save the image as PNG.

这个方式调用会生成一个mimeType为“image/octet-stream”的数据流到浏览器，但是“保存”对话框无法识别出图片适当的后缀名，默认保存的文件在FireFox下是“xxx.part”这种名字，这是令人遗憾的地方，但是似乎没有什么好办法解决。

html2canvas

它作用于DOM加载的过程，收集其中的信息，再来绘制canvas图像，也就是说，其实它并不是将展现的DOM树截成canvas图，而是仿照DOM树重新绘制了一张canvas图。于是很多CSS样式都无法被准确识别出来，无法准确反映到图上。

其它的限制还有不少，比如：

●javascript必须是同域的，对于跨域的情况需要使用代理服务器（API中有参数可以指定），对于image也同样；
●frame内的DOM树无法被准确绘制；
●因为要绘制的是canvas图，所以像IE8这样的浏览器需要使用FlashCanvas这样的第三方库。

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

API使用的例子：

复制代码代码如下:

html2canvas(

    [dom1, dom2],

    {

        logging: false,

        useCORS: false,

        proxy:   false,

        onrendered: function(canvas){

            // canvas 就是绘制的canvas是对象

        }

    }

);

对于这一类相对小众的类库，文档都是很差的，包括API的定义，需要阅读源码，代码上写得挺清楚的。

另外，该站点下载包里面还有一个JQuery的插件，对这个API做了一个封装，可以无视。

您可能感兴趣的文章:

JS+Ajax实现百度智能搜索框
现在遇到这样的需求，要求输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。下面小编给大家分享同js和ajax实现百度智能搜索框，需要的的朋友参考下实现代码
2017-08-08
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
这篇文章主要介绍了JS遍历JSON数组及获取JSON数组长度操作,涉及javascript简单json数组遍历与运算相关操作技巧,需要的朋友可以参考下
2018-12-12
将json当数据库一样操作的javascript lib
使用javascript操作JSON的类库TAFFY DB，具体介绍了：查询数据、添加数据、删除数据、修改数据。
2013-10-10
关于uniApp editor微信滑动问题
这篇文章主要介绍了关于uniApp editor微信滑动问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
javascript数组includes、reduce的基本使用
这篇文章主要给大家介绍了关于javascript数组includes、reduce的基本使用方法,includes方法是用于检查特定元素是包含在数组还是字符串中的方法,而reduce用法则有很多,需要的朋友可以参考下
2021-07-07
FF下zoom的替代方案单位em
css 属性zoom是ie私有属性在FF中（或者说仅实现CSS标准的其他浏览器中）无法使用，一直在网上搜索它的替代方案，但没有收获，后来听群里有朋友说em或可解决此问题，经过研究和测试，发现果然可以解决。
2008-08-08
IE无法设置短域名下Cookie
最近客户在使用我们的流量监测系统以及GA时发现了一个问题，我们统计到的数据比GA的要多很多倍，而且我们统计到的数据中，跳出率非常高，高达99%左右。
2010-09-09
js读取注册表的键值示例
读取注册表的键值的方法有很多，在本文将为大家详细介绍下使用js如何实现注册表的键值读取，感兴趣的朋友可以参考下
2013-09-09
JavaScript数组随机排列实现随机洗牌功能
这篇文章主要介绍了JavaScript数组随机排列实现随机洗牌功能的方法,涉及javascript中基于list.sort方法实现数组随机排列的技巧,可应用于随机洗牌,非常具有实用价值,需要的朋友可以参考下
2015-03-03
动态加载js文件简单示例
这篇文章主要介绍了动态加载js文件的方法,结合实例形式简单分析了JavaScript动态加载的实现技巧,需要的朋友可以参考下
2016-04-04