C#得到html代碼中所有圖片地址

采集等項目時，需要對html代碼進行分析，其中一個需求就是對html進行分析，得到所有的圖片地址，再想辦法直接上傳到自己的服務(wù)器，下面是得到所有圖片地址的函數(shù)。

/// <summary>   
/// 取得HTML代碼中所有圖片的 URL。   
/// </summary>   
/// <param name="ResourseHtmlStrings">HTML代碼</param>   
/// <returns>圖片的URL列表,返回null時出錯</returns>   
public string[] GetHtmlImageUrls(string ResourseHtmlStrings)
{
    try
    {
        // 定義正則表達式用來匹配 img 標簽   
        Regex regImg=new Regex(@"<img\b[^<>]*?\bsrc[\s\t\r\n]*=[\s\t\r\n]*[""']?[\s\t\r\n]*(?<imgUrl>[^\s\t\r\n""'<>]*)[^<>]*?/?[\s\t\r\n]*>", RegexOptions.IgnoreCase);

        // 搜索匹配的字符串   
        MatchCollection matches=regImg.Matches(ResourseHtmlStrings.ToLower());
        int i=0;
        string[] imgURLs=new string[matches.Count];

        // 取得匹配項列表   
        foreach (Match match in matches)
            imgURLs[i++]=match.Groups["imgUrl"].Value;
        return imgURLs;
    }
    catch (Exception ErrMsg)
    {
        return null;
    }
}

得到的結(jié)果是圖片地址數(shù)組

好程序員分享html圖片絕對路徑改相對路徑，要弄懂相對路徑修改成絕對路徑那么必須要知道路徑的基本概念。

html中的路徑：指文件存放的位置，在網(wǎng)頁中利用路徑可以引用文件，完成：插入圖像、視頻等功能。表示在html中路徑的使用方式有兩種：相對路徑，絕對路徑。

1、相對路徑：

html中的相對路徑的概念是：指當前html頁面引用的文件相對于當前html頁面文件的路徑，在html網(wǎng)頁開發(fā)過程中多采用這種方法來引用我們所想使用的內(nèi)容。

相對路徑有多種使用的方法，這些方法標識表示的意義也不相同。那么接下來我們來看一下是如何使用的。

./ ：代表文件所在的目錄（通常情況下可以省略不寫）

../ ：代表文件所在的父級目錄（也就是上一級目錄）

../../ ：代表文件所在的父級目錄的父級目錄（也就是上一級上一級目錄）

/ ：代表文件所在的根目錄

如：<img src=’images/1.jpg’/>表示此代碼所在html文件的路徑下的images文件夾下的1.jpg文件。

<img src=’../images/1.jpg’/>表示此代碼所在html文件的路徑的上一級的images文件夾下的1.jpg文件。

2、絕對地址：

就是直接從磁盤的位置去定位文件的地址。類似于我們通過我的電腦一盤符的方式來尋找想要的指定內(nèi)容，或者說直接帶著協(xié)議、域名，

3、如何把html圖片絕對路徑改為相對路徑

可以使用html當中給我們提供的<base/>標簽來完成。<base> 標簽為頁面上的所有路徑的引用設(shè)置了默認地址或默認目標。通常情況下，瀏覽器會從當前文檔的 URL 中獲取到相應(yīng)的元素來填寫相對的引用路徑。

首先<base/>標簽是一個單標簽，同時所有的瀏覽器都支持 <base/>這一個標簽標簽所以兼容性上大家不用考慮。同時在使用<base/>標簽的時候必須注意<base/>標簽，必須放置到html網(wǎng)頁的<head></head>標簽當中，同時每一個html頁面當中最多只能有一個<base/>標簽，它的作用也很明顯。就是用來為html頁面上的所有路徑引用來規(guī)定默認地址或默認目標,是一種設(shè)置網(wǎng)頁中引用路徑的標記。

剛才我們已經(jīng)在前面提到了在html中常見的路徑形式有相對路徑和絕對路徑，那么在這個時候使用了<base/>標簽指定了目標的話，那么我們的用戶使用的客戶端瀏覽器就會把這個內(nèi)容解析成為當前html中引用大的所有相對路徑，同時包括<a></a>超鏈接標簽、<img/>圖片標簽、<link>css引用標簽、<form></form> 表單標簽中的地址。也就是說，瀏覽器解析的時候會在引用的路徑的前面會自動的加上<base/>上面綁定的地址，同時在這個時候頁面中的相對路徑也都會被轉(zhuǎn)換成為絕對路徑。

使用語法：

<head>

</head>

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實現(xiàn)這樣的功能需要學習以下幾點內(nèi)容。

1.認識<img/><map><area/></map>基本結(jié)構(gòu)

首先復制一個html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標簽通過<map>的名字來驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來劃分區(qū)域的標簽，area也是“”區(qū)域“”的意思。

默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。

分別添加三個形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對！注意是“對”！從左到右，兩個數(shù)就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數(shù)變了，參數(shù)就不正確了），如圖：

這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？

3.使用Gimp軟件精準定位圖片區(qū)域

使用Gimp軟件可以解決這個問題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點擊“文件”找到“打開”：

選擇要打開的圖片名字：

點擊名稱后，右邊會有圖像預(yù)覽，點擊“打開”即可：

打開后如圖：

把鼠標放到圖像的任意位置，看左下角：

這里就會顯示我們鼠標所在的像素坐標數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請在空閑時找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標滑過鏈接區(qū)域時提示讀者，如下：

title="殲20氣動外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時還有一些注意事項，我們下次再詳細討論。

使用碎片時間，學習完整知識！關(guān)注大魚師兄，一起精研技藝。

整合營銷服務(wù)商

C#得到html代碼中所有圖片地址

圖片添加區(qū)域鏈接的基本寫法

目錄

您的項目需求