製作一個展示網站發展的Gif

為了參加最近的StackExchange的「time」主題比賽,我製作了一個Gif來展示StackOverflow網站從2008年 到今天的發展歷程:

這裡是一張GIF圖片，可以點擊閱讀原文查看。圖片太大，無法插入公眾號文章。

第一步是為Internet Archive找到一個合適的API。它支持Memento，這是2013年RFC 7089中定義的基於http的協議。使用memento_client包裝器，我們可以使用以下Python代碼得到網站最接近給定日期的快照:

不要忘記安裝memento_client庫哦:

pip install memento_client

請注意，此代碼會給我們一個最接近的快照，所以不可能確切地是兩周以前的。

通過使用一個持續增加的時間增量，我們可以循環此段代碼來獲取不同 時間的快照。但我們不只是想獲取URL。我們還想對每一個網頁都做一個截圖。

以編程方式獲取網頁截圖的最簡單方法可能是使用Selenium。我用Chrome作為驅動程序;你可以從ChromeDriver網站下載，也可以在使用Homebrew包管理器的Mac電腦上運行以下命令:

brew install bfontaine /utils/ chromedriver

我們還需要為Python安裝Selenium:

pip install selenium

代碼很短:

如果你運行上面的代碼，你會看到一個Chrome窗口自動打開，並自動去訪問URL，當頁面全部載入後自動關閉。然後你就獲得了一個該頁面的截圖，文件名是 stackoverflow_20181119211854.png!然而，很快你就會注意到這個截圖中網站的最上面有Wayback Machine（一款網頁備份工具）的頁眉。

這在手動瀏覽快照時非常方便，但在從Python訪問快照時就不那麼方便了。

幸運的是，我們可以通過稍微修改URL來獲得一個無頁眉的URL:我們可以將 id _添加到日期的末尾，以便獲得與機器爬取時完全相同的頁面。當然，這意味著它會鏈接到可能不再存在的CSS和JS文件。通過用im_替代id_,我們也可以得到一個鏈接到經過稍微修改的存檔頁面的URL，用它來替換原始的存檔頁面。

帶有頁眉和重寫鏈接的頁面:

https://web.archive.org/web/20181119211854/...

原始頁面，跟爬取的頁面一樣:

https://web.archive.org/web/20181119211854id_/...

重寫鏈接後的原始頁面:

https://web.archive.org/web/20181119211854im_/...

使用修改後的URL重新運行代碼會得到正確的截圖:

將這兩段代碼組合起來，我們可以在不同的時間間隔對URL進行截圖。你可能想在截圖完成時檢查圖片，並刪除不一致的圖片。例如，谷歌主頁的存檔快照並不是一直都是同一種語言。

一旦得到了所有的圖片，我們就可以使用Imagemagick生成一個gif:

convert –delay 50 –loop 1 *.jpg stackoverflow.gif

我使用了以下參數:

• –delay 50:每0.5s改變畫面。數字代表每1/100秒。

• –loop 1：對所有畫面只循環一次。默認情況下是進行無限循環，但在這裡沒有意義。

你可能想要使用-delay參數進行播放，這取決於你有多少圖片以及網站改變的頻率。

我也做了一個谷歌版本(約10MB)的gif，每秒5幀,並使用了 –delay 20參數。我使用了與StackOverflow gif相同的延遲時間：:每個截圖之間至少間隔5周。通過查看每張圖片的底部，你可以看到每個截圖來自哪一年。

2018年 12月3日-#experiments,#imagemagick,#python,#selenium

——Baptiste Fontaine"s Blog

英文原文：https://qiniumedia.freelycode.com/vcdn/1/%E4%BC%98%E8%B4%A8%E6%96%87%E7%AB%A0%E9%95%BF%E5%9B%BE2/record-website-change-gif.pdf
譯者：浣熊君( ????? )

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！