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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
了解javascript中的Dom操作
May 27 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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
用session做客户验证时的注意事项
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
批量实现面向对象的实例代码
2013/07/01 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python每天必学之bytes字节
2016/01/28 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
百度软件工程师职位
2013/02/14 面试题
《悯农》教学反思
2014/04/28 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
给校长的建议书400字
2014/05/15 职场文书
2014年环保工作总结
2014/11/26 职场文书
材料员岗位职责范本
2015/04/11 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
离婚协议书格式范本
2016/03/18 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis