获取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);}