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.validate的使用说明介绍
Nov 12 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
JavaScript实现简单验证码
Aug 24 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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
详解python中requirements.txt的一切
2017/03/03 Python
Django如何自定义分页
2018/09/25 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
财务总经理岗位职责
2014/02/16 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
婚礼新人答谢词
2015/01/04 职场文书
检讨书范文2000字
2015/01/28 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
文艺委员竞选稿
2015/11/19 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers