你的位置:首页 > ASP.net教程

[ASP.net教程]抓取Bing每日图片作为网站首页背景


把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新

效果图如下:

理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页。

第一步:抓取图片

  首先打开Bing,然后使用开发者工具 F12,点击审查网页元素,分析HTML结构如下图:

     

  这里可以看到背景的图片地址,这就准备从HTML元素中获取图片链接了。于是我还下载了Jumony 一个提取网页元素的帮助类,来获取background-image的元素(Jumony的使用可以直接在NuGet管理中搜索Jumony,然后安装,最后记得引用命名空间,Jumony的详细使用请移步http://www.cnblogs.com/Ivony/p/3447536.html)

  

  结果发现 获取的HTML标签里并没有CSS的属性,那也就取不到 背景图片的URL了,然后怎么办呢?

  继续使用开发者工具查看Bing网页,发现了一个Ajax请求,返回了一个Json数据,如下图:

  

  说明这个请求返回的Json就是Bing的每日图片的信息,这就能得到图片信息的请求网址了,查看消息头:

  

  请求网址:http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&nc=1470798060031&pid=hp&video=1

  然后检测请求中可以省略的参数,最后得到URL:http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1

      接下来就需要在程序中获取Json数据,使用WebClient 进行网页请求:

  

  这时我们就要对Json进行解析,获取我们想要的数据,也就是背景图片的URL:

  对Json的解析有很多方法:Json转换为dataTable,Json反序列化,也有第三方组件等,

  这里用自己比较擅长的方法:VS自带的javaScriptSerializer类将wallejson转换为模型,这个模型根据返回的Json数据结构创建

  解析完之后就得到了图片的URL,根据WebClient的DownLoadFile()方法保存图片到本地;

  附上模型:

 1 //用于解析Bing返回的Json数据 2  3  4   public class Walle 5   { 6     public List<images> images { get; set; } 7     public tooltips tooltips { get; set; } 8   } 9 10   public class images11   {12     public string startdate { get; set; }13     public string fullstartdate { get; set; }14     public string enddate { get; set; }15     public string url { get; set; }16     public string urlbase { get; set; }17     public string copyright { get; set; }18     public string copyrightlink { get; set; }19     public string wp { get; set; }20     public string hsh { get; set; }21     public string drk { get; set; }22     public string top { get; set; }23     public string bot { get; set; }24     public List<int> hs { get; set; }25 26 27   }28 29   public class tooltips30   {31     public string loading { get; set; }32     public string previous { get; set; }33     public string next { get; set; }34     public string walle { get; set; }35     public string walls { get; set; }36 37   }

 

 

第二步:获取每日资讯

  我们要获取这里的数据:

  继续使用开发者工具查看数据的位置:

  

  这就可以使用Jumony抓取数据了吧,和刚开始一样,

  结果很郁闷,在HTML页面中找不到类名为"hplaCata"的元素内容。

  仔细查看了网络连接后,发现了一个很有意思的事情:

  如下图:

     

  打开这个请求后:

  

    原来是个单独的页面,怪不得在原来的页面上找不到,接下来就好办了:

    保存这个页面的请求:http://cn.bing.com/cnhp/life?currentDate=20160809&IID=SERP.5045&IG=CC0CACB23C324D99A37ACF3604BF19FE,

  经过简单的测试,currentDate是当天的日期,其他的参数则不需要。

  下面直接看代码,根据Jumony抓取数据:

  

 string date = DateTime.Now.ToString("yyyyMMdd");      //获取文本信息      string BingUrl = "https://cn.bing.com/cnhp/life?currentDate="+date;      var Source = new JumonyParser().LoadDocument(BingUrl);      string Title="";      string Text="";      //标题      foreach (var item in Source.Find(".hplaCata > .hplatt"))      {         Title = item.InnerText();      }      //文本      foreach (var item in Source.Find("#hplaSnippet"))      {        Text = item.InnerText();      }