C#得到html代码中所有图片地址

采集等项目时，需要对html代码进行分析，其中一个需求就是对html进行分析，得到所有的图片地址，再想办法直接上传到自己的服务器，下面是得到所有图片地址的函数。

/// <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;
    }
}

得到的结果是图片地址数组

好程序员分享html图片绝对路径改相对路径，要弄懂相对路径修改成绝对路径那么必须要知道路径的基本概念。

html中的路径：指文件存放的位置，在网页中利用路径可以引用文件，完成：插入图像、视频等功能。表示在html中路径的使用方式有两种：相对路径，绝对路径。

1、相对路径：

html中的相对路径的概念是：指当前html页面引用的文件相对于当前html页面文件的路径，在html网页开发过程中多采用这种方法来引用我们所想使用的内容。

相对路径有多种使用的方法，这些方法标识表示的意义也不相同。那么接下来我们来看一下是如何使用的。

./ ：代表文件所在的目录（通常情况下可以省略不写）

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

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

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

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

<img src=’../images/1.jpg’/>表示此代码所在html文件的路径的上一级的images文件夹下的1.jpg文件。

2、绝对地址：

就是直接从磁盘的位置去定位文件的地址。类似于我们通过我的电脑一盘符的方式来寻找想要的指定内容，或者说直接带着协议、域名，

3、如何把html图片绝对路径改为相对路径

可以使用html当中给我们提供的<base/>标签来完成。<base> 标签为页面上的所有路径的引用设置了默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中获取到相应的元素来填写相对的引用路径。

首先<base/>标签是一个单标签，同时所有的浏览器都支持 <base/>这一个标签标签所以兼容性上大家不用考虑。同时在使用<base/>标签的时候必须注意<base/>标签，必须放置到html网页的<head></head>标签当中，同时每一个html页面当中最多只能有一个<base/>标签，它的作用也很明显。就是用来为html页面上的所有路径引用来规定默认地址或默认目标,是一种设置网页中引用路径的标记。

刚才我们已经在前面提到了在html中常见的路径形式有相对路径和绝对路径，那么在这个时候使用了<base/>标签指定了目标的话，那么我们的用户使用的客户端浏览器就会把这个内容解析成为当前html中引用大的所有相对路径，同时包括<a></a>超链接标签、<img/>图片标签、<link>css引用标签、<form></form> 表单标签中的地址。也就是说，浏览器解析的时候会在引用的路径的前面会自动的加上<base/>上面绑定的地址，同时在这个时候页面中的相对路径也都会被转换成为绝对路径。

使用语法：

<head>

</head>

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

1.认识<img/><map><area/></map>基本结构

首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>图片区域链接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：

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

指定要添加区域链接的图片的路径，如下：

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

让<img>标签通过<map>的名字来驱使<map>为自己工作。

需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。

第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。

示例代码如下：

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

下面来划分区域。

2.为图片划分区域的方法

<area>是用来划分区域的标签，area也是“”区域“”的意思。

默认的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>

下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。

为<area>添加coords属性可以指定区域的位置和范围。

如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：

如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如

这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：

这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？

3.使用Gimp软件精准定位图片区域

使用Gimp软件可以解决这个问题。

Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。

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

双击安装即可，注意选择一下安装目录。

完成安装之后打开，界面如下：

点击“文件”找到“打开”：

选择要打开的图片名字：

点击名称后，右边会有图像预览，点击“打开”即可：

打开后如图：

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

这里就会显示我们鼠标所在的像素坐标数值。

这样我们就能方便地写“poly”的coords了。

请在空闲时找一张图片演练一下吧！

4.为区域添加链接

在<area/>标签中添加href属性即可指定链接路径，如下：

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

添加title属性可以在鼠标滑过链接区域时提示读者，如下：

title="歼20气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商

C#得到html代码中所有图片地址

图片添加区域链接的基本写法

目录

您的项目需求