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錄製屏幕，而後播放視屏的方法。