javascript实现当前页面截屏.doc

javascript实现当前页面截屏javascript实现当前页面截屏javascript实现当前页面截屏一、前言有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果。比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存。但又不能安装任何客户端控件,,没有可用的方案(,这个虽然提供了方法,但是在实际使用中无法满足,例如支持低版本的IE,支持内嵌的iframe截图)。但是也找到了一些可能的思路,经过几天奋战,终于完成一个可用的javascript截屏思路。因为是javascript,所以还是会有一些限制,例如只能在页面内截屏,截屏范围不能超出当前页面等。还好这些是客户没有要求的。二、演示地址及说明下面是效果图和演示地址。(不好意思,本来打算提供演示地址,因为一些原因暂时无法提供,以后能提供的时候再把地址写上)登陆进去后,点击页面顶部的打开截屏控制器按钮,然后在点击截屏按钮,这时候整个页面处于截屏状态,按下鼠标左键并移动鼠标,画出截屏区域,然后双击截屏区域就可将当前区域保存为图片下载。三、实现思路及主要问题因为系统中集成的代码比较多,所以无法直接贴出源代码,这里只给出具体的思路,和实现过程中遇到的难点问题并给出难点问题的一些参考代码。具体的思路其实不难,需要有服务器端的配合,。主要有以下几个步骤:1、获取当前页面dom的html保存。2、将html代码发送到服务器3、在服务器端使用浏览器对象重新载入代码,还原用户当时的页面状态4、使用浏览器对象的生成图片功能生成图片上面是总体的思路,在实现的过程中需要注意一些细节问题。1、第一个问题就是获取当前用户页面的dom的html。对于IE来说,使用outerHTML就可以了,但是对于非IE浏览器,使用outerHTML无法获取用户做过修改的内容。这里就需要做一下修改。在jquery中,()方法,这个方法返回的是innerHTML,估计jquery内部也是用了浏览器本身的innerHTML方法,()也无法获取用户修改后的页面dom代码。()方法做一些修改,已支持获取用户修改后的内容。(function($){varoldHTML=$.;$.=function(){if()(this,arguments);$("input,,button",this).each(function(){('value',);});$(":radio,:checkbox",this).each(function(){if()('checked','checked');('checked');});$("option",this).each(function(){if()('selected','selected');('selected'