使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像;但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象。两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷。
Canvas2Image
它的原理是利用了HTML5的canvas对象提供了toDataURL()的API:
1
2
|
var strDataURI = oCanvas.toDataURL();
|
这样的结果是base64编码的(事实上,image也可以通过这种方式以字符串的形式写死到页面上),所以我们还需要一个base64编解码的lib。
但是目前的缺陷也有不少,比如目前Opera和Safari只支持PNG,FireFox的支持性则好得多。
生成图片有两种方式写入页面,一种是生成一个图片对象写入页面DOM树中,这也是支持性比较好的方式:
1
2
|
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true );
|
但是如果你做一个JavaScript截图功能的话,你可能希望截图后能够自动打开保存文件的“保存”对话框:
1
2
|
Canvas2Image.saveAsPNG(oCanvas);
|
这个方式调用会生成一个mimeType为“image/octet-stream”的数据流到浏览器,但是“保存”对话框无法识别出图片适当的后缀名,默认保存的文件在FireFox下是“xxx.part”这种名字,这是令人遗憾的地方,但是似乎没有什么好办法解决。
html2canvas
它作用于DOM加载的过程,收集其中的信息,再来绘制canvas图像,也就是说,其实它并不是将展现的DOM树截成canvas图,而是仿照DOM树重新绘制了一张canvas图。于是很多CSS样式都无法被准确识别出来,无法准确反映到图上。
其它的限制还有不少,比如:
- javascript必须是同域的,对于跨域的情况需要使用代理服务器(API中有参数可以指定),对于image也同样;
- frame内的DOM树无法被准确绘制;
- 因为要绘制的是canvas图,所以像IE8这样的浏览器需要使用FlashCanvas这样的第三方库。
这个页面可以测试各个网站使用它来截图的效果,效果相当不错:
API使用的例子:
1
2
3
4
5
6
7
8
9
10
11
|
html2canvas(
[dom1, dom2],
{
logging: false ,
useCORS: false ,
proxy: false ,
onrendered: function (canvas){
}
}
);
|
对于这一类相对小众的类库,文档都是很差的,包括API的定义,需要阅读源码,代码上写得挺清楚的。
另外,该站点下载包里面还有一个JQuery的插件,对这个API做了一个封装,可以无视。
文章系本人原创,转载请注明作者和出处(http://www.raychase.net)
注:本博客已经迁移到个人站点 http://www.raychase.net/ ,欢迎大家访问收藏,本ITEye博客在数日后将不再更新。
分享到:
相关推荐
javascript截屏源代码,服务端使用ASP.NET。
双击可直接运行的截图例子,可以自选截图区域大小,封装完善,很好的例子。
Javascript网页截屏的方法
原味的js,只是用到ajax的时候会选择mootools的xhr包,辛苦的操作dom这么久了觉得也是时候启用便捷的框架提高效率了
使用adobeacrobatDC的屏幕截图,用户或早期版本也可以利用这些技术。这本书还展示了解决各种可能遇到的形式问题的方法和解决方案。感觉被它赋予了力量,并且改进了你的pdf文档!JavaScript在许多版本中都是adobe...
能够用javascript截图,不过要装插件 截图后是上传到服务器里面的,可以自己设定 我是用“无惧2.0杜绝上传漏洞修改版1.rar”来测试的,用这个来上传的,顺便一起发上来 给大家参考,如果有更好的,大家一起共享 版权...
JQ JS javascript 截图功能 画图功能
综合运用HTML+CSS+JavaScript技术。 2.1 系统模块划分 网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等
javascript截图 jQuery插件imgAreaSelect用法详解_.docx
资源名称:Javascript快速查询手册 内容目录: 前言 ... 第二部分 Javascript语句与运算符 ... 资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
利用jquery写的JavaScript截图,实现了基本的截图功能,希望你们自己拿回去好好研究一下!
资源名称:使用Javascript解析xml文件或xml格式字符串 中文WORD版 内容简介: 本文档主要讲述的是使用Javascript解析xml文件或xml格式字符串;javascript中,不论是解析xml文件,...
资源名称:Javascript基础知识 中文word版 内容简介: ... Javascript是Netscape公司开发的一种脚本语言。... 资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
jquery+javascript+.Net 图片截图 提供一个图片的地址,可以截取图片里的一部分。 使用jquery在页面上框选图片的范围 利用.Net处理图片并返回给页面截图的Url地址
头像截图,Javascript头像截图,实现图上静态截图生成base64
资源名称:Java_Javascript 网页设计活学活用300问 内容简介: Javascript 精彩300例技巧集,chm格式,都是些很实用的JS实例,包括游戏、日期特效、文本特效、按钮、鼠标特效等,还有...
在Android上运行Javascript。截图,触摸,..._JavaScript_HTML_下载.zip
JavaScript应用实例-截屏器.js
基于JavaScript的自习室预约管理小程序源码+效果截图(毕业设计).zip本资源中的源码都是经过本地编译过可运行的,评审分达到95分以上。资源项目的难度比较适中,内容都是经过助教老师审定过的能够满足学习、使用...
1-2如何使用Javascript 1-3 Javascript和 HTML的搭配 1-4 JavascnPt和一般程序语言的差异 1-5 Javascnpt的限制 第2章 撰写Javascnpt 2-1 JavaScript要写在网页原始代码的哪里? 2-2 Javascnpt的版本 2-3 Javascnpt的...