需求描述
必應作為一個在壁紙圈做搜索引擎最優秀的站點,其每日壁紙也是可圈可點的。
那么自然就生出了如何將必應的每日壁紙保存下來,用作電腦桌面壁紙輪播的想法。
實現方式
簡單粗暴
如何下載
最簡單,不需要任何編程的辦法,就是右鍵查看背景圖像,然后另存到本地。
箭頭指向的這個鏈接,就是我們要找的圖片地址,點擊打開的就是高清圖片,而且像素值是 2880*1620
,非常高清。
如何更高清
雖然 2880*1620
已經很清晰了,但再清晰一點總不是壞事吧,又不是存不起。
怎么做呢?
這里我們注意觀察一下所打開圖片的網絡地址:https://cn.bing.com/th?id=OHR.PinkMoon_ZH-CN9026483067_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=2880&h=1620&rs=1&c=4
當我們把https://cn.bing.com/th?id=OHR.PinkMoon_ZH-CN9026483067_UHD.jpg
后面的內容刪掉時,就得到了一個更加高清的圖片。
注意看,這時圖片的像素比變成了 5758*3239
。
這個像素比是不固定的,但一般都大於 2880*1620
,個人猜測是原始圖片。
排坑指南
不過這個簡單的方法也有小坑,就是右鍵的位置要正確,假如你在靠近搜索框附近的區域右鍵,就查看不到背景圖片了,
事實上,你能夠成功觸發右鍵查看圖像的位置,大概只有以下這個區域:
很神奇對吧,想知道為什么嗎?下面會給你解釋,歡迎繼續往下看。
初級
這個方法依舊不需要編寫代碼,不過已經有點接近了。
首先,點擊F12
打開瀏覽器的開發者模式。不同瀏覽器的調試器長得不太一樣,不過功能都類似:
下面以火狐瀏覽器
操作:
在查看器
頁面,搜索bgDiv
,回車幾下,能找到這個標簽。
鼠標點一下,在它的下方會出現它的樣式表。
箭頭指向的這個鏈接,就是我們要找的圖片地址,而且我們同樣可以使用上面的方法來獲取更加高清的原始圖。
優點
這樣一通操作下來,似乎只是和暴力解法
成果一樣,似乎還更麻煩了呢。
確實是更麻煩了,不過也有一點好處,那就是你可以方便地找到前幾天的圖片地址。
當保持調試欄狀態不變,將必應首頁翻到前一頁時,背景圖片的 url
地址會自動變化,你就實現了在不來回刷新的情況下獲取前幾天壁紙(用第一種方法時,每次查看頁面之后都會回復到當天的狀態,你還要重新翻頁)。
給有好奇心的孩子
為什么上一個方法中的右鍵位置只能是我所指定的地方呢?
其實這就是網頁結構的緣故。你可以把網頁上的所有元素想象成一個個盒子(事實上這個盒子是真的存在),你先把圖片盒子
放好,然后放必應搜索框
的盒子,那么這個搜索框盒子
就會蓋住圖片盒子
的一部分,你對圖片盒子
這部分的操作就會落到搜索框盒子
上。
當你把鼠標放在調試器的標簽時,網頁上會將標簽對應的盒子高亮顯示。
這是 背景圖片的盒子,它覆蓋了整個頁面。
這是橫欄元素們的盒子,它蓋在背景圖片上面。當你在這個范圍右鍵時,它無法獲取底部的圖片盒子。
這是底欄元素們的盒子,它也覆蓋了圖片盒子的一部分區域。
進階
下面就開始更深涉及編程了,適合有點經驗的小伙伴。不過沒經驗也沒關系,傳說中的編程大部分情況下只是 CV 大法
,破除一下迷信也不錯(/笑)。
人們都喜歡盡可能讓工作自動化,對吧。
對於以上兩種刀耕火種
般日復一日地操作,很多人是難以忍受的(雖然我那樣干了好幾個月)。
接口
其實最簡單的方法,就是使用接口。
網頁上的所有展示,不過都是瀏覽器通過一個個數據接口,接收數據渲染之后的結果。
通過對其網絡狀態的分析,必應首頁的加載邏輯是先加載網頁結構,獲取低清壁紙。然后因為某種判斷,觸發一個 xhr 請求
,獲取高清圖片鏈接。最后根據鏈接獲取高清圖片地址,渲染在網頁結構中。
關鍵在於這個 xhr 請求,其地址為 xhr 請求,其返回值如下:
網絡上比較流行的接口是這個,但是它只能請求到 1920*1080
清晰度的圖片,還不如我們右鍵得到的清晰度高,而且據我測試,不能通過更改圖片鏈接來獲取更高清的圖。
也許是近年來必應更新了接口?我不清楚。不過既然有了更高清的可能性,為什么要容忍低清呢?
自動保存
因此,我們只需要每天發送一次這個 xhr 請求
,把圖片鏈接獲取到,下載下來即可。
這是我用 nodejs 寫的一個小腳本,丟在服務器上用來每日下載一次。
// 引包
const https = require('https')
const fs = require('fs')
// xhr 請求地址
const url = 'https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&nc=1586183781119&pid=hp&uhd=1&uhdwidth=2880&uhdheight=1620'
// 獲取當天高清圖
const getToday = ()=>{
// 發送請求
https.get(url, res => {
let rawData = '';
res.on('data', (chunk) => {
rawData += chunk;
})
res.on('end', () => {
const parsedData = JSON.parse(rawData);
let img = parsedData.images[0]
let {url, enddate, copyright} = img;
// 通過正則,將圖片鏈接改為超高清版
let link = url.match(/.*?(?=&)/)
console.log(`https://cn.bing.com${link}`)
// 因為服務器比較小,只是保存鏈接地址,后續可以讀取保存圖片
fs.readFile(`./bing-pics.json`, 'utf8', (err, data) => {
let res = JSON.parse(data)
res.push({
"date": `${enddate}`,
"link": `https://cn.bing.com${link}`,
"copyright":copyright
})
fs.writeFile(`./bing-pics.json`, JSON.stringify(res), 'utf8', (err) => {})
})
})
})
}
// 每天執行一遍
setInterval(getToday, 24*60*60*1000)
網站集成
這是把它存儲在本地的操作。
也可以把這個 xhr請求
集成到個人網站上,美化個人站點。
這是一個栗子,不過他/她的站點應該是用的老接口。
爬蟲
其實,爬蟲也可以實現。但既然有接口能做,就不必動用牛刀了。
如何殺牛呢?可以看這篇博客。