获取Bing每日壁纸用作首屏大图

获取Bing每日壁纸用作首屏大图

Bing 搜索每天都会更换一张精美的图片作为壁纸，除了特殊时候不太好看外（比如春节那几天），没多大问题。移动端还有上每日故事，与图片现配。现在我的博客首屏图片就是Bing每日壁纸，有没有感觉B格满满^_^。本文将介绍如何把Bing每日壁纸和故事扒到自己博客。

获取API接口

首先我们进入Bing首页，会发现自动转到中国版。不过这没关系，中国版更符合国情，速度也比国际版快一些。

通过抓包，可以发现http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1这里可以获取到无水印的图片。

那每日故事呢？通过模拟UA，访问移动版。同样发现了API接口http://cn.bing.com/cnhp/coverstory/。不过这里的图片是有水印的。

接口已经得到了，接下来就是写代码了。因为我既想使用无水印的图片，也想获取每日故事，所以我把两个接口结合起来使用。

代码

<?php/** * 获取Bing每日壁纸和故事 * @author giuem */function bingImgFetch(){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1'); curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'User-Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36' )); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $re = curl_exec($ch); curl_close($ch); $re = json_decode($re,1);//电脑版返回内容 $re2 = json_decode(file_get_contents('http://cn.bing.com/cnhp/coverstory/'),1);//移动版返回内容 return array( /* 更改图片尺寸，减小体积 */ 'url' => str_replace('1920x1080','1366x768',$re['images'][0]['url']), /* 结束日期 */ 'date' => date('j',strtotime($re['images'][0]['enddate'])), /* 故事标题 */ 'title' => $re2['title'], /* 内容 */ 'd' => $re2['para1'] );}?>

使用示例

如果是wordpress，可以把上面的代码丢进function.php，然后该怎么用就怎么用。

$bingimg= bingImgFetch();echo $bingimg['url'];//输出图片地址echo $bingimg['title'];echo $bingimg['d'];

我的使用方法

因为我用的是静态博客，不能在后端完成这些操作，所以只能通过js获取。同时把代码放在国内访问较快的SAE中，使用Memcache缓存内容。而且我在获取后还把数据储存在localStorage中，这样可以减少请求次数。

为什么要缓存？因为不缓存的话，别人每访问一次你都要获取一次，IP可能会被被Bing ban了。

当然，你也可以缓存到数据库中，这些你都可以结合实际情况修改代码。

PHP in SAE

<?phpheader('Access-Control-Allow-Origin: *');$mmc=memcache_init();if($mmc==false){ /* 如果memcache启动失败，直接获取 */ $bingimg = json_encode(bingImgFetch());}else { $bingimg = memcache_get($mmc,'bing_url'); $date = memcache_get($mmc,'bing_url_date'); /* 判断日期进行更新 */ if(date('j') != $date || !$bingimg || !$date){ $bingimg = json_encode(bingImgFetch()); /* 写入 */ memcache_set($mmc,"bing_url",$bingimg); memcache_set($mmc,"bing_url_date",date('j')); }}echo $bingimg;function bingImgFetch(){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1'); curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'User-Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36' )); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $re = curl_exec($ch); curl_close($ch); $re = json_decode($re,1); $re2 = json_decode(file_get_contents('http://cn.bing.com/cnhp/coverstory/'),1); return array( 'url' => str_replace('1920x1080','1366x768',$re['images'][0]['url']), 'date' => date('j',strtotime($re['images'][0]['enddate'])), 'title' => $re2['title'], 'd' => $re2['para1'] );}

HTML

<section id="hero"> <div class="hero-warp"> <p id="hero-title"></p> <p id="hero-d"></p> </div></section>

CSS

html,body { height: 100%;}#hero { position: relative; height: 100%; background-color: rgba(0,0,0,0.6); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; width: 100%; text-align: center; color: #fff; display: table;}.hero-warp { display: table-cell; vertical-align: middle; text-align: center;}#hero-title { font-size: 28px; margin-bottom: 8px;}#hero-d { width: 80%; margin: 0 auto;}

JS

如果你使用jQuery，可以把这里的ajax换成$.ajax()实现。

(function() { //bing pic load var $data = { title: localStorage.getItem('bing_title') ? localStorage.getItem('bing_title') : '', d: localStorage.getItem('bing_d') ? localStorage.getItem('bing_d') : '', url: localStorage.getItem('bing_url') ? localStorage.getItem('bing_url') : '', date: localStorage.getItem('bing_date') ? localStorage.getItem('bing_date') : '' }; if (new Date().getDate() != $data.date || $data.title == '' || $data.d == '' || $data.url == '') { ajax('GET', '//giuem.sinaapp.com/bing/', function($data) { localStorage.setItem('bing_title', $data.title); localStorage.setItem('bing_d', $data.d); localStorage.setItem('bing_url', $data.url); localStorage.setItem('bing_date', new Date().getDate()); setHero($data); }); } else { setHero($data); }})();function setHero($data) { var $hero = document.getElementById('hero'); if (!$hero) {return ;} if ($data) { $hero.style.cssText += 'background-image:url(' + $data.url + ')'; document.getElementById('hero-title').innerHTML = $data.title; document.getElementById('hero-d').innerHTML = $data.d; }}function ajax(type, url, opts, callback) { var xhr = new XMLHttpRequest(); if (typeof opts === 'function') { callback = opts; opts = null; } xhr.open(type, url); var fd = new FormData(); if (type === 'POST' && opts) { for (var key in opts) { fd.append(key, JSON.stringify(opts[key])); } } xhr.onload = function() { callback(JSON.parse(xhr.response)); }; xhr.send(opts ? fd : null);}