JavaScript实现网页截图功能


Posted in Javascript onOctober 16, 2014

使用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这样的第三方库。

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

JavaScript实现网页截图功能

API使用的例子:

html2canvas(

    [dom1, dom2],

    {

        logging: false,

        useCORS: false,

        proxy:   false,

        onrendered: function(canvas){

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

        }

    }

);

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

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

Javascript 相关文章推荐
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
Vue程序调试的方法
Jun 17 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
JavaScript跨域方法汇总
Oct 16 #Javascript
js阻止事件追加的具体实现
Oct 15 #Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 #Javascript
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 #Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 #Javascript
javascript模拟实现ajax加载框实例
Oct 15 #Javascript
You might like
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP静态文件生成类实例
2014/11/29 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
图片自动更新(说明)
2006/10/02 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python db类用法说明
2020/07/07 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
给男朋友的道歉信
2014/01/12 职场文书
迟到检讨书900字
2014/01/14 职场文书
环保倡议书400字
2014/05/15 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
教师党员自我评价2015
2015/03/04 职场文书
小学信息技术教学反思
2016/02/16 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python