https://github.com/oawu/browser_console_qrcode

Painting QR Code on the browser Console. 瀏覽器 Console 印出 QR Code.
https://github.com/oawu/browser_console_qrcode

Last synced: 4 days ago
JSON representation

Painting QR Code on the browser Console. 瀏覽器 Console 印出 QR Code.

• Host: GitHub
• URL: https://github.com/oawu/browser_console_qrcode
• Owner: oawu
• Created: 2016-06-04T14:29:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-08-08T10:59:48.000Z (over 2 years ago)
• Last Synced: 2024-12-11T18:53:51.830Z (11 days ago)
• Language: CSS
• Homepage: https://works.ioa.tw/browser_console_qrcode/index.html
• Size: 1.38 MB
• Stars: 227
• Watchers: 8
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 在瀏覽器 Console 上畫 QR Code！

 Painting QR Code on the browser Console.

---

## 聲明

作品中關鍵程式碼 **[browser_console_qrcode.js](https://github.com/comdan66/browser_console_qrcode/blob/master/js/browser_console_qrcode.js)** 部分只要[按喜歡](https://github.com/comdan66/browser_console_qrcode)就全部授權！




## 簡介

* 請按**滑鼠右鍵**，選擇**檢視**再選擇**Console**吧！

* Mac Chrome 電腦鍵盤快捷鍵 **Cmd + Option + J** 打開！

* Windows、Linux Chrome 電腦鍵盤快捷鍵 **Ctrl + Shift + J** 打開！

* 關鍵[**程式碼**](https://github.com/comdan66/browser_console_qrcode/blob/master/js/browser_console_qrcode.js)在 `js/browser_console_qrcode.js` 內，程式碼有簡易註解，請各位大大服用！

* 主要先利用**二維陣列**表示 QR Code，以 1 代表黑點、0 代表白點，再轉換成要印出的字串。

* 接著利用 JavaScript [**eval**](http://www.w3schools.com/jsref/jsref_eval.asp) 將組合出的 console.log 字串執行！

* GitHub 在[這裡](https://github.com/comdan66/browser_console_qrcode)，Demo 的話看[這裡](https://works.ioa.tw/browser_console_qrcode/index.html)，可以的話幫我按一下 **GitHub 星星**吧！

* 主要利用 Console.log 的方式印出，其中使用基本 css 語法修飾。

* 會使用 text-shadow 主要是要掩飾換行的**行距空白**，line-height 不能設太小，所以利用 text-shadow 掩飾空白處！

* 因為 Safari 的 Console 對於空白的處理寬度不同，所以也需要對白點做 css 設定！

* 若各位大大覺得有趣或不錯的話，請幫我在 [GitHub](https://github.com/comdan66/browser_console_qrcode) 上按個**喜歡**吧！

* 相關參考：[Colors in JavaScript console - stackoverflow](http://stackoverflow.com/questions/7505623/colors-in-javascript-console)




## 圖片

![瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console.](img/04.png)  

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




![瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console.](img/03.png)  

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




![瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console.](img/01.png)  

▲ 滑鼠按右鍵，開啟 “檢視” 後選擇 “Console”，即可看到 QR Code！  




![瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console.](img/02.png)  

▲ 若使用 Google Chrome 則可以使用 Chrome 快捷鍵

* Mac Chrome 電腦鍵盤快捷鍵 Cmd + Option + j

* Windows、Linux Chrome 電腦鍵盤快捷鍵 Ctrl + Shift + J  




![瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console.](img/05.png)  

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




## 關於

* 作者名稱 - [OA Wu](http://www.ioa.tw/)

* E-mail - 

* 作品名稱 - 在瀏覽器 Console 上畫 QR Code！

* GitHub - [在瀏覽器 Console 上畫 QR Code！](https://github.com/comdan66/browser_console_qrcode)

* 更新日期 - 2016/06/05