WebBrowser抓圖示例——截取網(wǎng)頁上的驗證碼圖片

doc360sir 2011-10-31

展開全文

　　引言

　　最近和一位朋友探討獲取WebBrowser訪問的網(wǎng)頁中驗證圖片的方法，起先想到的就是通過WebClient直接去下載當(dāng)前頁面中引用的驗證碼圖片，但繼而想到這會涉及一些問題：一是驗證碼可能會在每次請求時都發(fā)生變化，二是將WebClient與WebBrowser的Cookies甚至 Session關(guān)聯(lián)起來是件很難的事。

　　而后就想到了可以放棄WebBrowser，始終使用WebRequest進(jìn)行較為底層的訪問，以避免多次獲取驗證碼產(chǎn)生變化導(dǎo)致不一致的情況，不過這種辦法操作起來還是比較復(fù)雜的。

　　然后又想到這種變通的方法——抓圖。只需要直接通過WebBrowser截圖，并將驗證碼以外的部分裁剪掉，就可以了。

　　思路

　　首先要分析一下那位朋友要獲取的驗證圖片元素特征：

　　網(wǎng)址：http://www./Charge/UCardDirectCharge.aspx?category=AAWYVVWYKV&product=AAWYVVWYKV010CV

　　查看原圖（大圖）　

　　這里很簡單，我們只要找到src屬性為“RandomImage.aspx”結(jié)尾的圖片，就找到我們所需的這個元素了。

　　找到這個元素之后，為了方便確定其位置，并確保其不會超出WebBrowser可視范圍，我們要為它賦予一個內(nèi)聯(lián)樣式，使之處于頁面的絕對左上角，并設(shè)置z-index為9999，以避免被其他元素覆蓋，這個樣式即為：

　　"position: absolute; z-index: 9999; top: 0px; left: 0px"

　　這之后就可以通過WebBrowser的DrawToBitmap方法截圖了，截圖的寬和高可通過上述元素的ClientRectangle屬性取得。

　　實現(xiàn)

　　那么現(xiàn)在建立一個WinForm項目來做測試，設(shè)計如下界面：

　　然后為按鈕編寫事件處理函數(shù)：

雙擊代碼全選
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51	`private`　`void`　`button1_Click(object`　`sender,`　 `EventArgs` 　 `e)`　　 `{` 　　　　`var　wb　=`　`new`　 `WebBrowser` 　 `();`　　　　　　`wb.Navigate("http://www./Charge/UCardDirectCharge.aspx?category=AAWYVVWYKV&product=AAWYVVWYKV010CV");` 　　　　`//等待加載完畢` 　　　　`while`　`(wb.ReadyState　<`　 `WebBrowserReadyState` 　 `.Complete)`　 `Application` 　 `.DoEvents();`　　　　　　`//遍歷尋找驗證圖像所在元素` 　　　　`foreach`　`(`　 `HtmlElement` 　 `f`　`in`　`wb.Document.Images)`　　　　　　`{` 　　　　　　　　`if`　`(f.GetAttribute("src").ToLower().EndsWith("randomimage.aspx"))` 　　　　　　　　`{` 　　　　　　　　　　　　`//將元素絕對定位到頁面左上角` 　　　　　　　　　　　　`f.Style　=`　`"position:　absolute;　z-index:　9999;　top:　0px;　left:　0px";` 　　　　　　　　　　　　`//抓圖` 　　　　　　　　　　　　`var　b　=`　`new`　 `Bitmap` 　 `(f.ClientRectangle.Width,　f.ClientRectangle.Height);`　　　　　　　　　　　　　　`wb.DrawToBitmap(b,`　`new`　 `Rectangle` 　 `(new`　 `Point` 　 `(),　f.ClientRectangle.Size));`　　　　　　　　　　　　　　`pictureBox1.Image　=　b;` 　　　　　　　　　　　　`break;` 　　　　　　　　`}` 　　　　`}` `}`

　　編譯并運行以測試：

　　點擊按鈕，稍等片刻，即可在PictureBox中顯示出完整的驗證碼圖片了。

　　提示

　　WebBrowser 的DrawToBitmap方法是隱藏的，不受智能感知提示支持，我不知道為什么會這樣，但我知道DrawToBitmap方法確實存在問題，就是截圖出來全白現(xiàn)象，據(jù)我觀察，發(fā)生這種現(xiàn)象和是否顯示W(wǎng)ebBrowser控件有關(guān)，只要在窗體上顯示了WebBrowser控件，截圖出來就是全白，而如果不將WebBrowser加載到窗體，截圖就是正常的，具體原因不明，只能再次感嘆WebBrowser這個強(qiáng)大的控件編寫的也太粗濫了。

　　結(jié)語

　　總的來說WebBrowser截圖還是很有意義的，透過它可以生成網(wǎng)頁抓圖，還有此例中演示的對特定元素抓圖，或者還可以變通地為Flash、XML、Txt之類的任何瀏覽器中可顯示的文件抓圖，在我前一段時間編寫的AWWWB 網(wǎng)站克隆器中，就是使用了這種方式為Flash、Css、JS文件生成預(yù)覽圖的。

　　出處：http://skyd.cnblogs.com/