吳政賢 OA Wu LiveCoding.tw
瀏覽器 Console 上畫 QR - OA Wu's Blog

瀏覽器 Console 上畫 QR

前端 WEB JavaScript CSS Chrome

來用瀏覽器除錯器畫一個屬於個人的彩蛋吧!使用瀏覽器 Console.log 的功能,再利用 CSS 語法調整樣式,製作有趣的個人彩蛋,本次使用 QRCode 當作實作範例,大家也可以改成自己的喲!Painting QR Code on the browser Console.

這是個無聊靈機一動的小作!大家應該都有打開 Facebook 網頁的 Console 介面吧,這個是我自己實作的,所以分享一下!沒錯,就是來畫 Console,利用 console.log 印出字串,再利用 css 修飾一下,QR Code 的黑、白點則是使用 JavaScript 二維陣列來表示!有興趣的話可以參考一下喲!要用的話,幫我按個 GitHub 星星後就拿去用吧!以下是步驟說明:

  • 首先,請按滑鼠右鍵,選擇檢視再選擇 Console 吧。
  • Mac Chrome 電腦鍵盤快捷鍵 Cmd + Option + J 打開。
  • Windows、Linux Chrome 電腦鍵盤快捷鍵 Ctrl + Shift + J 打開。
  • 關鍵程式碼在 js/browser_console_qrcode.js 內,程式碼有簡易註解,請各位大大服用。
  • 主要先利用二維陣列表示 QR Code,以 1 代表黑點、0 代表白點,再轉換成要印出的字串。
  • 接著利用 JavaScript eval 將組合出的 console.log 字串執行。
  • GitHub 在這裡,Demo 的話看這裡,可以的話幫我按一下 GitHub 星星吧。
  • 主要利用 Console.log 的方式印出,其中使用基本 css 語法修飾。
  • 會使用 text-shadow 主要是要掩飾換行的行距空白,line-height 不能設太小,所以利用 text-shadow 掩飾空白處。
  • 因為 Safari 的 Console 對於空白的處理寬度不同,所以也需要對白點做 CSS 設定。
  • 若各位大大覺得有趣或不錯的話,請幫我在 GitHub 上按個星星喜歡吧。
  • 相關參考:Colors in JavaScript console - stackoverflow

瀏覽器 Console 上畫 QR
程式碼在 js/browser_console_qrcode.js 內,程式碼有簡易註解,主要利用 Console.log 的方式去印出,其中使用基本 css 語法修飾,會使用 text-shadow 主要是要掩飾換行的行距空白,line-height 不能設太小,所以利用 text-shadow 掩飾空白處

瀏覽器 Console 上畫 QR
瀏覽器 Console 介面內的 QR Code 樣式

瀏覽器 Console 上畫 QR
滑鼠按右鍵,開啟 “檢視” 後選擇 “Console”,即可看到 QR Code

瀏覽器 Console 上畫 QR
若使用 Google Chrome 則可以使用 Chrome 快捷鍵,Mac Chrome 電腦鍵盤快捷鍵 Cmd + Option + j,Windows、Linux Chrome 電腦鍵盤快捷鍵 Ctrl + Shift + J

瀏覽器 Console 上畫 QR
若各位大大覺得有趣或不錯的話,請幫我在 GitHub 上按個喜歡吧!若想引用的話,按喜歡後全部授權給你喲