javascript实现当前页面截屏.docxVIP

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