使用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截图代码是一个实用的技术,它允许用户在网页上选择特定区域并进行截图。这个技术主要应用于Web应用中,提供了一种方便的方式让用户捕获屏幕内容,例如为了分享、保存或进一步处理。在这个例子中,提供的...
JavaScript截屏技术是一种在网页上实现屏幕截图的功能,它允许用户通过浏览器直接捕获当前页面的图像。在本文中,我们将深入探讨JavaScript截屏的基本原理、实现方式以及与ASP.NET服务器端交互的方法。 首先,...
JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在客户端运行,为用户提供动态交互体验。在本场景中,我们关注的是如何使用...理解这些核心概念和技术,将有助于你理解和构建自己的JavaScript截图工具。
在实现JavaScript网页截屏时,如果需要更复杂的功能,如全屏截图或包括页面滚动部分,可能需要开发相应的浏览器插件来扩展JavaScript的能力。 总的来说,JavaScript网页截屏是通过结合`canvas`、`toDataURL`以及...
HTML2canvas是一个强大的JavaScript库,它允许开发者在浏览器中将HTML和...然而,由于HTML和Canvas之间的差异,使用时可能会遇到挑战,但借助社区提供的资源和解决方案,我们可以克服这些问题,实现高质量的截图效果。
JavaScript是一种广泛使用的脚本语言,由于其轻量级、灵活且跨平台的特性,经常被用于构建动态网页和应用程序。本文件"在Android上运行Javascript。截图,触摸,..._JavaScript_HTML_下载.zip"似乎包含了一套名为...
总的来说,这个项目涉及到了jQuery库的使用、HTML和CSS的结合、Canvas的图像处理以及JavaScript的事件处理等技术,对于想要学习JavaScript截图功能的开发者来说,这是一个很好的实践案例。通过分析和研究这个项目,...
2. **Canvas API**:JavaScript的Canvas API提供了绘制图形的能力,用于生成截图时,需要遍历DOM,将元素信息映射到Canvas上,然后调用`toDataURL`方法生成图片URL,最后可使用`a`标签的`download`属性下载。...
能够用javascript截图,不过要装插件 截图后是上传到服务器里面的,可以自己设定 我是用“无惧2.0杜绝上传漏洞修改版1.rar”来测试的,用这个来上传的,顺便一起发上来 给大家参考,如果有更好的,大家一起共享 版权...
这个项目“jquery javascript .Net 图片截图”就是一种实现此类功能的解决方案。它结合了JavaScript库jQuery、JavaScript编程以及后端的.Net技术,来实现用户在浏览器中选择图片的一部分,并将其截图保存。 首先,...
Rocket.Chat是使用Meteor全栈框架以JavaScript开发的Web聊天服务器。Rocket.Chat 是特性丰富的 Slack 开源替代品之一。 主要功能:群组聊天,直接通信,私聊群,桌面通知,媒体嵌入,链接预览,文件上传,语音/视频...
综合运用HTML+CSS+JavaScript技术。 2.1 系统模块划分 网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等
图片可能包括流程图、代码示意图或者运行效果截图,对于初学者来说,能够更清晰地看到代码的实际效果,从而加深对JavaScript动态特性的认识。 通过这三个文件,学习者可以系统地学习JavaScript的基本语法、常用API...
在“近期峰会”页面,学生们可能需要用JavaScript处理表格数据,例如动态加载、排序或过滤。而“精彩瞬间”页面,可以利用JavaScript实现鼠标经过图片的预览效果,通过事件监听和DOM操作来控制图片的显示。最后,...
### JavaScript截图 jQuery插件imgAreaSelect用法详解 #### 一、引言 在Web开发中,用户自定义头像的功能越来越受到重视。为了提供更好的用户体验,很多网站尤其是社交网络平台,都允许用户通过简单的操作来自定义...
标题中的“jQuery javascript css 在线截图 asp.net2005”揭示了这是一个关于使用jQuery、JavaScript、CSS技术实现在线截图功能的项目,且该功能是构建在ASP.NET 2005框架上的。让我们详细探讨一下这些技术及其在...
标题中的“百度地图JavaScript API离线版本.zip”指的是一个包含了百度地图JavaScript API的离线包。这个API是百度提供的一种服务,允许开发者在自己的网页应用中集成百度地图的功能,如定位、路线规划、地图展示等...
资源名称:Javascript快速查询手册 内容目录: 前言 ... 第二部分 Javascript语句与运算符 ... 资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
-hua.png**:这些可能是教学过程中的屏幕截图或者图表,用于解释某些复杂的概念,例如函数、对象、闭包、原型链、作用域等。在JavaScript中,函数不仅可以作为值传递,还能作为对象拥有属性和方法;闭包则是一种内存...