抓取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()方法保存图片到本地;

　　附上模型：

  //用于解析Bing返回的Json数据
 
     public class Walle
     {
         public  List<images> images { get; set; }
         public tooltips tooltips { get; set; }
     }
 
     public class images
     {
         public string startdate { get; set; }
         public string fullstartdate { get; set; }
         public string enddate { get; set; }
         public string url { get; set; }
         public string urlbase { get; set; }
         public string copyright { get; set; }
         public string copyrightlink { get; set; }
         public string wp { get; set; }
         public string hsh { get; set; }
         public string drk { get; set; }
         public string top { get; set; }
         public string bot { get; set; }
         public List<int> hs { get; set; }
 
     }
 
     public class tooltips
     {
         public string loading { get; set; }
         public string previous { get; set; }
         public string next { get; set; }
         public string walle { get; set; }
         public string walls { get; set; }
 
     }

　

第二步：获取每日资讯

　　我们要获取这里的数据：

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

　　

　　这就可以使用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();
            }

第三步：保存数据到本地

　　　　前面两步已经获取到了图片以及资讯，然后应该保存数据了，

　　　　一般来说我们都是保存图片路径 和 资讯数据到数据库，不过需求是替换原来的网站首页背景，偏向于对UI的改进，再动数据库就不太合适了。

　　　　而且，图片会每日更新，系统则自动获取，这些数据只提供每天的查询，写操作则一天一次。

　　　　解决思路：图片以当前日期为文件名，资讯信息以XML形式，文件名也是当前日期（如20160810）保存到网站目录下，每次首页加载都会查看以当前日期为文件名的Xml文件或JPG文件是否存在，不存在就执行程序抓取Bing图片和每日资讯，存在则获取数据传递给首页显示。

　　　　保存资讯为XML，这里我用的是XmlSerializer，将Model转换并创建XML文件，这个Model主要根据保存的信息来创建，字段有： 标题，副标题，文本信息，图片路径，当前日期。获取数据时反序列化XML为Model；　　　　

　　　　模型：

　　　　

  /// <summary>
     /// 用于保存和传输Bing背景图片及文本信息
     /// </summary>
     public  class BgImages
     {
         /// <summary>
         /// 标题
         /// </summary>
         public string Title { get; set; }
 
         /// <summary>
         /// 副标题
         /// </summary>
         public string STitle { get; set; }
         /// <summary>
         /// 文本
         /// </summary>
         public string Text { get; set; }
         /// <summary>
         /// 图片路径
         /// </summary>
         public string Url { get; set; }
         /// <summary>
         /// 保存日期
         /// </summary>
         public string Date { get; set; }
     }

　　　　

　　　　附上控制器内完整代码：　　　　　　

    #region  联网抓取图片
 
         /// <summary>
         /// 读取背景信息
         /// </summary>
         /// <returns></returns>
         public ActionResult ReturnBgInfo()
         {
             //读取XML文件
             string Path = Server.MapPath("/Images/BingInfo/" + DateTime.Now.ToString("yyyyMMdd") + ".xml");
 
             FileInfo file = new FileInfo(Path);
 
             if (!file.Exists)
             {
                 GetNewBing();
             }
 
             FileStream files = new FileStream(Path, FileMode.Open);
             XmlSerializer xml = new XmlSerializer(typeof(BgImages));
             BgImages BgImage = (BgImages)xml.Deserialize(files);
             files.Close();
 
             return Json(BgImage);
 
         }
 
         /// <summary>
         /// //联网抓取图片
         /// </summary>
         public void GetNewBing()
         {
             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 = "";
             string STitle = "";
 
             //标题
             foreach (var item in Source.Find(".hplaCata > .hplatt"))
             {
                 Title = item.InnerText();
             }
 
             //副标题
             foreach (var item in Source.Find(".hplaCata > .hplats"))
             {
                 STitle = item.InnerText();
             }
 
             //文本
             foreach (var item in Source.Find("#hplaSnippet"))
             {
                 Text = item.InnerText();
             }
 
             //Bing网址
             string url = "http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1";
 
             //获取Bing的图片 Json数据
             WebClient BingClient = new WebClient();
             BingClient.Encoding = System.Text.Encoding.UTF8;//定义对象的编码语言,此处或者是gb2312
             string wallejson = BingClient.DownloadString(url);
 
             if (wallejson != "null")
             {
                 //解析Json数据
                 JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
                 Walle walleinfo = javaScriptSerializer.Deserialize<Walle>(wallejson);
 
                 //保存图片到本地
                 string ImagePath = DateTime.Now.ToString("yyyyMMdd") + ".JPG";
                 BingClient.DownloadFile(walleinfo.images.First().url, Server.MapPath("/Images/BingInfo/") + ImagePath);
 
                 //保存信息到Model -- BgImages
                 BgImages model = new BgImages();
                 model.Date = walleinfo.images.First().enddate;
                 model.Text = Text;
                 model.Title = Title;
                 model.STitle = STitle;
                 model.Url = "/Images/BingInfo/" + ImagePath;
 
                 string xmlPath = Server.MapPath("/Images/BingInfo/" + DateTime.Now.ToString("yyyyMMdd") + ".xml");
 
                 //序列化XML
                 CreateXML(model, xmlPath);
 
             }
 
         }
 
         #region   XML序列化
         public void CreateXML(BgImages model, string Path)
         {
             FileStream fs = new FileStream(Path, FileMode.Create);
             //执行XML序列化
             XmlSerializer xml = new XmlSerializer(typeof(BgImages));
             xml.Serialize(fs, model);
             fs.Close();
         }
         #endregion
         #endregion

　　　　

第四步：数据显示在首页

　　因为网站首页的左侧背景图是一个母版页，所以图片的显示主要通过js来实现。

　　在页面加载时，使用Ajax请求在后台获取数据，

　　代码如下：

 $(document).ready(function () {
 
        //加载背景图片及文本信息
        $.post(
           "/Test/ReturnBgInfo",
           function (data) {
 
               $("#animate-area").css("background-image", "url(" + data.Url + ")");
               $("#Title").html(data.Title);
               $("#STitle").html(data.STitle);
               $("#Text").html(data.Text);
 
           });
})