javascript实现当前页面截屏

javascript实现当前页面截屏

1、前言

有客户要求能对用户当前页面进行指定区域截屏，相似qq截屏的实现效果。好比用户在处理工做的时候，将当前页面录入后的一些信息进行截图下载保存。但又不能安装任何客户端控件，只能用javascript实现.网上搜索了一下，没有可用的方案(http://www.2cto.com/kf/201301/184453.html，这个虽然提供了方法，可是在实际使用中没法知足，例如支持低版本的IE，支持内嵌的iframe截图)。可是也找到了一些可能的思路，通过几天奋战，终于完成一个可用的javascript截屏思路。由于是javascript，因此仍是会有一些限制，例如只能在页面内截屏，截屏范围不能超出当前页面等。还好这些是客户没有要求的。

2、演示地址及说明

下面是效果图和演示地址。

（很差意思，原本打算提供演示地址，由于一些缘由暂时没法提供，之后能提供的时候再把地址写上）

登录进去后，点击页面顶部的 打开截屏控制器 按钮，而后在点击 截屏 按钮，这时候整个页面处于截屏状态，按下鼠标左键并移动鼠标，画出截屏区域，而后双击截屏区域就可将当前区域保存为图片下载。

3、实现思路及主要问题

由于系统中集成的代码比较多，因此没法直接贴出源代码，这里只给出具体的思路，和实现过程当中遇到的难点问题并给出难点问题的一些参考代码。

 

具体的思路其实不难，须要有服务器端的配合，这里的服务器使用asp.net。主要有如下几个步骤：

一、获取当前页面dom的html保存。

二、将html代码发送到服务器

三、在服务器端使用浏览器对象从新载入代码，还原用户当时的页面状态

四、使用浏览器对象的生成图片功能生成图片

 

 

上面是整体的思路，在实现的过程当中须要注意一些细节问题。

一、第一个问题就是获取当前用户页面的dom的html。对于IE来讲，使用outerHTML就能够了，可是对于非IE浏览器，使用outerHTML没法获取用户作过修改的内容。这里就须要作一下修改。在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);

}

二、第二个问题就是服务器的浏览器对象，在asp.net中，咱们可使用System.Windows.Forms

 .WebBrowser这个对象。为了能在asp.net中使用这个对象,.aspx页面的Page标签内必须使用 AspCompat="true"属性，不然会出错。这方面的代码网上有不少，这里就不在贴代码了，你们自行google就能够了。

剩下的就是具体实现的小问题，好比要记录当前截屏区的位置和大小等等。

 

有了以上的实现思路，咱们还能够作不少其余的工做。例如将页面指定的控件另存的图片，这个功能有不少用处，好比有一个web页面的统计报表，可是客户须要的是一个图片形式的，或者pdf，或者word格式的文档，咱们就能够利用这种方法，将指定控件的内容生成图片，而后在服务器端生成pdf或者word，将图片插入便可。

4、缺点

这种方法由于是在服务器端重现用户当时的页面信息，尽可能还原当时的状态，但并不能作到彻底一致，由于页面的状态信息是没法在服务器端彻底复制和还原的。好比，客户端的一些activeX控件没法再服务器端从新，若是客户端是非IE浏览器，截屏的效果可能和实际效果不一样（固然若是您访问的页面已经作了浏览器兼容，在不一样浏览器访问时效果同样，那么也就不会有问题了），由于服务器端的浏览器（咱们用的是window平台技术）是IE。

5、后续

本章介绍了截屏的基本原理和实现思路，下面两章讲一讲另存页面或者页面内指定控件内容为图片，以及使用javascript录制屏幕，而后播放视屏的方法。