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 相关文章推荐
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
JS delegate与live浅析
Dec 21 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
Element实现动态表格的示例代码
Aug 02 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提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
Array对象方法参考
2006/10/03 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python 调用DLL操作抄表机
2009/01/12 Python
python获得图片base64编码示例
2014/01/16 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python上selenium的弹框操作实现
2020/07/13 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
好的自荐信的要求
2013/10/30 职场文书
大学毕业生自我鉴定
2013/11/05 职场文书
企业内控岗位的职责
2014/02/07 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
导游词之唐山景点
2019/12/18 职场文书
python 镜像环境搭建总结
2022/09/23 Python