瀏覽器 Console 上畫 QR Code 來用瀏覽器除錯器畫一個屬於個人的彩蛋吧!使用瀏覽器 Console.log 的功能,再利用 CSS 語法調整樣式,製作有趣的個人彩蛋,本次使用 QRCode 當作實作範例,大家也可以改成自己的喲!Painting QR Code on the browser Console. 這是個無聊靈機一動的小作!大家應該都有打開 Facebook 網頁的 C…

瀏覽器 Console 上畫 QR Code

來用瀏覽器除錯器畫一個屬於個人的彩蛋吧!使用瀏覽器 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

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

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

滑鼠按右鍵,開啟 「檢視」 後選擇 「Console」,即可看到 QR Code

若使用 Google Chrome 則可以使用 Chrome 快捷鍵,Mac Chrome 電腦鍵盤快捷鍵 Cmd + Option + j,Windows、Linux Chrome 電腦鍵盤快捷鍵 Ctrl + Shift + j

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

相關參考

Google Maps 標記叢集 Marker Clustering - OA Wu's Blog
Google Maps 標記叢集 Marker Clustering
Google Maps 標記叢集 Marker Clustering 各位 Google 地圖 玩家都應該有過當 Marker 太多時,視角一拉遠後全部 Marker 擠在一起的困擾吧!沒錯 OA's Marker Clustering 就是要來處理這個困擾!網路上也有很多關於 Marker Clustering 的 Library,但想要比較能夠掌握概況以及視需求去做調整功能,所以刻了一套可以自訂 Mar…
實作 Instagram Maps 相片地圖 - OA Wu's Blog
實作 Instagram Maps 相片地圖
實作 Instagram Maps 相片地圖 Instagram App 當中有一項很特別的功能是我很喜愛的,就是地圖模式的瀏覽照片,而且 Instagram 將這項功能優化得不錯,使得當地圖縮小時,密集的 Marker 會合成一個 Marker,而這樣的地圖功能在 Google Maps JavaScript API 上可以實作得到! 簡單說,這個專案的目的是利用 Google Mpas 來模…
實作 Google Maps 右鍵選單 - OA Wu's Blog
實作 Google Maps 右鍵選單
實作 Google Maps 右鍵選單 此作品主要在於開發出可以在 Google Maps 上面編輯基本路徑的功能,利用 Google Maps JavaScript API 設計出規劃路線的工具,並且可以匯出路間經緯度 Excel。 在 Google Maps 上顯示選單,主要是使用 Google Maps JavaScript Events 來實作,並且搭配 Marker、Polyline 來繪製出路線圖,並且針…
在 Google Maps 內多邊形取點 Point in Polygon - OA Wu's Blog
在 Google Maps 內多邊形取點 Point in Polygon
在 Google Maps 內多邊形取點 Point in Polygon 這是項個人開發的工具,而且需要前後端配合一起弄的作品,主要目的是撈出藉由不規則多邊形範圍內的點座標。 前端 主要是 Google Maps JavaScript API v3 的地圖服務應用,利用 Google Maps Marker、Google Maps Polyline 去畫出一個不規則多邊形,並且利用 Ajax 去後端撈取…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
瀏覽器 Console 上畫 QR Code