一夜黑白——互聯網人的悼念方式

2020年4月4日 00:00 — 24:00

這一天，14億人都在做着同一件事，
這一天，14億人都在追憶那些過往，
這一天，14億人共同祈願英雄不朽，逝者安詳。

4月3日國務院今天發佈公告，爲表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼，決定2020年4月4日舉行全國性哀悼活動。

一夜之間，許多網頁變成了“黑白界面”，我想這是互聯網人不約而同自發進行的特殊誌哀活動。

時間回到 2020年的1月20日 ——
新型冠狀病毒引發的肺炎疫情由湖北武漢爆發，席捲華夏大地，一場全國範圍的抗疫總體戰、阻擊戰就此打響。

在這段時間我們揪心病患，擔心數據，關心醫護……全國各行各業用自己的能力爲抗疫盡己所能，甚至拼盡全力。

• 白衣天使 放下翅膀，披上戰甲，搖身一變 “白衣戰士”， 奔赴疫情一線，讓我重新理解了 “醫者仁心” “救死扶傷”
• 建築大師 雷神山醫院、火神山醫院，僅僅數日，拔地而起，可謂天降奇兵
• 司機大哥 無論是貨車、公交還是的士，甚至私家車，司機大哥們架起了物資與人員運輸的高速路，接送醫護人員、配送防疫物資，你們一往無前
• 工人師傅 多少企業臨時轉型轉產生產防疫物資，工人師傅們加班加點努力生產，只希望儘早送達需要的人身旁
• ……

互聯網人又做了什麼呢？
各大互聯網公司爲疫情重點地區捐贈物資，相關平臺爲抗疫提供綠色通道。一些互聯網從業人員也自發研發了相關平臺發佈疫情物資需求、公佈確診患者行程信息……

每一個行業都有自己的力量，都在疫情發生時扛起了一片天，筆者作爲湖北人，由衷的想表達一聲感謝，謝謝你們爲湖北拼過命！🙏

不過好在疫情的陰霾即將散盡，明天（2020年4月5日）黑白頁面又會恢復彩色，期待山河無恙，國泰民安！

---

作爲互聯網人，接下來的篇幅聊一點技術話題：

“一夜黑白”是怎麼實現的？

Q: 突然一下子黑白了，是需要換所有素材和樣式嗎？

不需要的，一個CSS樣式（filter: grayscale(100%)）即可搞定

這裏所說的CSS樣式是平時使用頻次較低的CSS濾鏡之“灰度濾鏡”（grayscale），當往其中傳入的值是 100% 時便時黑白啦。

對一張圖片加上這個濾鏡是什麼樣的效果？

grayscale(00%)	grayscale(30%)	grayscale(60%)	grayscale(100%)

接下來從一些網站上“偷”了一些樣式代碼 ↓↓↓

• 騰訊視頻 CSS樣式

  html {
  	filter: gray;
  	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
  }
  

• 芒果TV CSS樣式

  .gray {
  	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
  	-webkit-filter: grey;
  	filter: gray
  }
  

• 愛奇藝 CSS樣式

  html {
  	filter: url("data: image/svg xml;
  	utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  	filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
  	-webkit-filter: grayscale(1);
  }
  

  發現愛奇藝好像與衆不同，中間那一長串是啥？
  這裏我們解鎖一項新的濾鏡——SVG濾鏡，用這個濾鏡是爲了解決部分瀏覽器的兼容問題，將上面代碼中的SVG濾鏡抽取出來：

  <svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
  	<feColorMatrix type="matrix" values="
  		0.3333 0.3333 0.3333 0 0
  		0.3333 0.3333 0.3333 0 0
  		0.3333 0.3333 0.3333 0 0
  		0 0 0 1 0"/>
  </filter>
  </svg>
  

  愛奇藝使用的是ColorMatrixFilter（顏色矩陣濾鏡），可以簡單粗暴的將其理解爲——它把顯示顏色中的紅、綠、藍都設置成了原始顏色的33.33%。
  這裏涉及矩陣計算，這裏就先略過了，感興趣的朋友可以看一下ColorMatrixFilter相關內容
  咱們可以簡單的看一下效果——

  操作	效果	矩陣
  默認		1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0
  去掉紅		0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0
  去掉綠		1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0
  去掉藍		1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0
  去掉紅綠藍		0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
  灰度化		0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0

  這裏提供一個可以測試SVG ColorMatrixFilter 的地址，大家可以去體驗一下。

Q: 怎麼確定時間呢？什麼時候黑白，什麼時候還原呢？

關於這個問題，我能想到的方案有三個：

• 方案一：前端時間檢驗，動態修改結構與樣式

  我們來看一下愛奇藝是怎麼處理的

  function isDateBetween(start, end) {
      var startDate = new Date(start)
      var endDate = new Date(end)
      var current = new Date()
      return current >= startDate && current < endDate
  }
  
  (function() {
      var inGrayRange = isDateBetween('2020-04-04 00:00:00', '2020-04-05 00:00:00');
      //var inGrayRange = true
      var grayCss = document.getElementById('J-gary-bg');
      window.inGrayRange = inGrayRange;        
      if (!inGrayRange && grayCss) {
          grayCss.remove();
      }
  })()
  

  翻譯過來是這樣：
  判斷當前的本地時間是否在 2020-04-04 00:00:00 - 2020-04-05 00:00:00，如果是就保持不變，如果不是就移除“置灰”的樣式（對應的就是上文 “愛奇藝 CSS樣式” ）。

  沒錯，就只這樣一個簡單的邏輯。但是存在一定的問題——本地時間是可以修改的。如果用戶修改了當前時間，刷新頁面會立刻被 “打回原形”。

  所以非常不推薦這種技術方案！ 試想這種方案如果運用在雙11這樣的活動上會有多恐怖（每天都是雙11）。

• 方案二：前端通過接口獲取服務器時間，動態修改結構與樣式

  本地時間可以修改，但是服務端時間不可以，以服務端時間作爲標準是一個不錯的方案。

  前端可以通過接口得到服務端時間，作爲判斷標準。

  例如芒果TV某接口得到的數據結構如下：

  {
      "msg": "",
      "code": 200,
      "cost": null,
      "data": {
          "topList": [],
          "suggest": []
      },
      "pt": null,
      "ty": null,
      "sort": null,
      "version": "v4.14.29",
      "du": null,
      "port": 9502,
      "fmsId": null,
      "serverTime": 1585987710343,
      "seqid": ""
  }
  

  其中的serverTime就是服務端時間。當然了，芒果TV是否用這個字段進行了檢驗不敢妄加揣測，但是是可行的技術方案

• 方案三：定時發佈版本，置灰版與正常班

  兩個完全割裂的版本不用邏輯判斷，直接進入線上最新版本就好

這三種方案只是我能想到的，還有其他方案暫時沒有想到，如果您願意可以私信或留言交流

---

最後，再次緬懷在疫情中逝去的生命，願天堂沒有病魔。也祝願還在和病魔鬥爭的患者早日康復。