javascript實現當前頁面截屏

一、前言

有客戶要求能對用戶當前頁面進行指定區域截屏，類似qq截屏的實現效果。比如用戶在處理工作的時候，將當前頁面錄入后的一些信息進行截圖下載保存。但又不能安裝任何客戶端控件，只能用javascript實現.網上搜索了一下，沒有可用的方案(http://www.2cto.com/kf/201301/184453.html，這個雖然提供了方法，但是在實際使用中無法滿足，例如支持低版本的IE，支持內嵌的iframe截圖)。但是也找到了一些可能的思路，經過幾天奮戰，終於完成一個可用的javascript截屏思路。因為是javascript，所以還是會有一些限制，例如只能在頁面內截屏，截屏范圍不能超出當前頁面等。還好這些是客戶沒有要求的。

二、演示地址及說明

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

（不好意思，本來打算提供演示地址，因為一些原因暫時無法提供，以后能提供的時候再把地址寫上）

登陸進去后，點擊頁面頂部的 打開截屏控制器 按鈕，然后在點擊 截屏 按鈕，這時候整個頁面處於截屏狀態，按下鼠標左鍵並移動鼠標，畫出截屏區域，然后雙擊截屏區域就可將當前區域保存為圖片下載。

三、實現思路及主要問題

因為系統中集成的代碼比較多，所以無法直接貼出源代碼，這里只給出具體的思路，和實現過程中遇到的難點問題並給出難點問題的一些參考代碼。

 

具體的思路其實不難，需要有服務器端的配合，這里的服務器使用asp.net。主要有以下幾個步驟：

1、獲取當前頁面dom的html保存。

2、將html代碼發送到服務器

3、在服務器端使用瀏覽器對象重新載入代碼，還原用戶當時的頁面狀態

4、使用瀏覽器對象的生成圖片功能生成圖片

 

 

上面是總體的思路，在實現的過程中需要注意一些細節問題。

1、第一個問題就是獲取當前用戶頁面的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);

}

2、第二個問題就是服務器的瀏覽器對象，在asp.net中，我們可以使用System.Windows.Forms

 .WebBrowser這個對象。為了能在asp.net中使用這個對象,.aspx頁面的Page標簽內必須使用 AspCompat="true"屬性，否則會出錯。這方面的代碼網上有很多，這里就不在貼代碼了，大家自行google就可以了。

剩下的就是具體實現的小問題，比如要記錄當前截屏區的位置和大小等等。

 

有了以上的實現思路，我們還可以做很多其他的工作。例如將頁面指定的控件另存的圖片，這個功能有很多用處，比如有一個web頁面的統計報表，但是客戶需要的是一個圖片形式的，或者pdf，或者word格式的文檔，我們就可以利用這種方法，將指定控件的內容生成圖片，然后在服務器端生成pdf或者word，將圖片插入即可。

四、缺點

這種方法因為是在服務器端重現用戶當時的頁面信息，盡量還原當時的狀態，但並不能做到完全一致，因為頁面的狀態信息是無法在服務器端完全復制和還原的。比如，客戶端的一些activeX控件無法再服務器端重新，如果客戶端是非IE瀏覽器，截屏的效果可能和實際效果不同（當然如果您訪問的頁面已經做了瀏覽器兼容，在不同瀏覽器訪問時效果一樣，那么也就不會有問題了），因為服務器端的瀏覽器（我們用的是window平台技術）是IE。

五、后續

本章介紹了截屏的基本原理和實現思路，下面兩章講一講另存頁面或者頁面內指定控件內容為圖片，以及使用javascript錄制屏幕，然后播放視屏的方法。