跳到主要內容區塊

計資中心電子報C&INC E-paper

專題報導

行動輸入的利器—QR碼
  • 卷期:v0018
  • 出版日期:2011-09-20

作者:周秉誼 / 臺灣大學計算機及資訊網路中心作業管理組碩士後研究人員


利用行動裝置隨時隨地瀏覽各類資訊,已經是街頭常見的景象了。透過QR碼傳遞資訊,是解決行動裝置輸入不便的好方法。行動裝置的攝影機配合手機上的應用程式或條碼函式庫,很容易辨識QR碼中的資訊。利用Google Chart服務可以動態產生QR碼圖示,並顯示在網頁上。還可以對QR碼進行美化,設計出美觀又獨特的QR碼圖示。

 

前言

手機及各種行動裝置 (mobile device) 已經是現代生活中不可缺少的日常用品,隨著無線網路和行動上網的普及,在捷運上、公車站、咖啡店、甚至餐廳裡,都可以看到人們手中拿著不同的行動裝置在使用。然而,在行動裝置上進行文字輸入相當地不方便,不但輸入的速度有限,而且在移動的情況下也很容易打錯字。如果想要打一串長長的網址,就更讓人失去耐心了。

 

QR碼

QR碼 (QR code) 是Quick Response Code的縮寫,是一種二維條碼 (matrix barcode),是由Denso Wave公司在1994年開發出來的,在2000年成為ISO國際標準,Denso Wave公司的專利權並未被執行。原本使用在零件倉儲的管理,目前已經廣泛地使用在各個不同的領域,深入日常生活中。如報紙、雜誌或路旁的廣告看板,都可以放上編碼成QR碼的網站連結,讓閱讀者可以用手機或各種行動裝置,直接讀取QR碼,轉換為網站連結,就能直接連到網站瀏覽產品資訊及訂購。日本的海關也會使用QR碼的標籤來管理入出境人士的簽證,在通過海關時可以迅速地輸入相關資料,減少通關時間。台灣高速鐵路的超商取票服務也使用了QR碼,在超商拿取的票券上印有QR碼的車票資訊,乘客在通過收票口時,只要利用閘門的感應器讀取車票上的QR碼,就可以迅速地進站。
QR碼是一個正方形的二維條碼,只有黑和白兩種顏色。在正方形的其中三個角落會有類似「回」字的圖形,另一個角落靠近中間也會有一個比較小的「回」字圖形,這些區域可用來輔助辨識和定位,因此掃描時不用對準,在任何角度、方向下,辨識軟體都可以正確地解碼。

 

 

QR碼依不同的解析度,可分成40個不同版本 (symbol version),從Version 1是21x21個點 (module)、可存放152個bit的資料,到Version 40的圖形有177x177個點、可存放23648個bit的資料。存放的資料類型又可分為數字 (numeric)、字母/數字 (alphanumeric)、二進位資料 (binary) 及漢字 (kanji)等。QR碼還有錯誤修正 (error correction) 的能力,依不同容錯能力,可分為L、M、Q、H四個等級。QR碼的錯誤修正能力,是由里德-所羅門碼 (Reed-Solomon code) 的方式實作,而里德-所羅門碼需要花費原本資料的兩倍空間來儲存,因此選擇較高的錯誤修正等級,實際能儲存的資料量就越少。
可以依照訊息的量自行選擇不同的版本,來產生QR碼圖形。舉例來說,如果有100位的數字資料,想要以錯誤修正等級M的方式編碼,就在版本列表中找到可以容納超過100位數字,且最接近的版本,也就是Version 3,有29x29個點,在容錯等級M之下,可以表達101位數字。

 

Version

Size

EC Level

Data size (bit)

1

21x21

L

152

M

128

Q

104

H

72

2

25x25

L

272

M

224

Q

176

H

128

40

177x177

L

23648

M

18672

Q

13328

H

10208

 

圖二 各版本QR碼大小與資訊量 (節錄自Denso Wave網站)

 

錯誤修正等級

可修正率

L

7%

M

15%

Q

25%

H

30%

 

圖三 各錯誤修正等級之可修正率(節錄自Denso Wave網站)

 

解讀QR碼

QR碼的標籤有四個角落的區域來定位、輔助辨識,由任何角度、方向都可以正確解讀其中的資訊。其錯誤修正的特性,在行動裝置的攝影機低解析度取得的影像,也可以有很高的辨識率。因此可以很方便地利用手機等行動裝置來解譯QR碼的標籤,作為行動裝置的輸入介面。各大手機平台,包括以前的Java phone、iOS、android都有各自的QR碼辨識軟體,也可以找到PC版本或線上版本的辨識程式。

 

ZXing (發音為zebra crossing) 是一個以Java寫成的開放原始碼 (open source) 函式庫 (library),以Apache方式授權,目標是用行動裝置上的相機拍攝QR碼,再直接編譯其中的資訊,而不必使用線上服務。它不只可以編譯QR碼,一些常見的一維及二維條碼也都涵蓋在內。因為是以Java實作,程式碼可以支援Android的系統和傳統的J2SE環境。也有許多獨立開發者在ZXing中加入其他平台的支援,如改寫為Objective C讓程式可以在iphone的iOS上運行等。

 

產生QR碼

想要產生QR碼的標籤同樣也有函式庫可以呼叫使用,但是要在網頁上生成QR碼標籤最簡單的方式,就是使用現成的網路服務 (web service)。Google Chart服務可以讓網頁設計人員很方便地繪製各類統計圖形,而其中的Infograph服務可以繪製各種動態產生的小圖示 (icon)、數字方程式 (formulas) 以及QR碼的標籤。使用的方式相當簡單,Infograph服務是由一個網址 (URL) 呼叫,繪製圖形的資訊是由HTTP的GET或POST方式傳送給伺服器,伺服器在收到服務請求後,會直接回傳繪製完成的圖片,因此可以將圖片輕易地嵌入在網頁的任何部份。
Infograph服務的網址是https://chart.googleapis.com/chart,如果以GET方式呼叫,則在該網址後面加上chs、cht、chl等參數 (parameter) 及對應的值。其中chs代表產生出來的圖片尺寸,格式是<寬>x<高> (<width>x<height>),單位是像素 (pixel),如chs=150x150代表圖片為邊長150像素的正方形。cht代表產生的圖示類別,要產生QR碼就要設定為qr,如cht=qr。chl則是代表要編碼為QR碼的文字資訊,如chl=www.ntu.edu.tw就會產生台大首頁網址的QR碼圖示。只要在瀏覽器的網址列打上https://chart.googleapis.com/chart? chs=250x250&cht=qr& chl=www.ntu.edu.tw就可以產生相應的QR碼圖示。

 

上列的參數都是必需的 (required),另外還有兩個選擇性 (optional) 的參數,可以依需求加入。choe是用來控制文字的編碼,預設是UTF-8,還可以選擇為Shift_JIS 或ISO-8859-1,一般來說使用預設的UTF-8就可以了。chld是用來調整錯誤修正等級的,可以設定的值依錯誤修正等級,由低到高有L、M、Q、H四種,未設定的預設值為L,也就是最低的錯誤修正等級。以剛才台大首頁網址的QR碼圖示為例,沒加chld前是產生Version 1 21x21個點的QR碼,而加上chld=H使用最高等級的錯誤修正後,就會產生Version 3 29x29個點的QR碼,才足夠將網址的資訊和錯誤修正用的資料放入。

 

想要在任何網頁中嵌入產生出來的QR碼圖示,只要利用HTML的<img>標籤 (tag),將<img>的src指定為前述的網址,當使用者觀看網頁時,瀏覽器就會自動連線到Google Chart服務,動態產生QR碼的圖示。也可以使用一個簡單的表單 (form),作為輸入資料的介面,把參數用GET的方式傳給Google Chart服務。在以PHP、Python為後端程式的動態網頁系統,也可以依需求動態產生Google Chart服務的網址,顯示QR碼的圖片。

 

URL編碼

然而使用GET方式呼叫Google Chart服務會碰到的第一個問題,就是網址保留字元 (URL reserved character) 的問題。如果想要編碼的資料中包括了+、&、=等字元,在Google Chart服務讀取參數時,就會誤判參數值,而產生錯誤的QR碼內容。

 

解決這個問題的方式,就是把網址上輸入的參數值,以網址編碼 (URL encoding)的方式先進行編碼。因為這個編碼出來的資料,會用%符號開頭,所以又稱為percent-encoding。常用的網址保留字元如&會編碼成%26,+會編碼成%2B,=會編碼成%3D等等。在PHP中可以用urlencode()函數將字串進行URL encoding、在Python裡可以使用內建模組urllib的quote()函數進行轉換,使用javascript的網頁也可以用encodeURIComponent()函數進行轉換。將URL encoding過的字串,設定給Google Chart服務的chl參數,就可以正確地產生QR碼的圖示了。

 

<script type="text/javascript">

function QRcodeForm(form) {

var uri="https://chart.googleapis.com/chart?chs=250x250&cht=qr&chld=H&chl=";

var txt=form.inputbox.value;

document.getElementById("myQRcode").src=uri+encodeURIComponent(txt);

return false;

}

</script>

<img id="myQRcode" />

<form name="myform" onsubmit="return QRcodeForm(this);">

<input type="text" name="inputbox" >

<input type="submit">

</form>

 

圖四 產生QR碼圖示的javascript小程式

 

中文QR碼

中文字對網址來說,也是一種特殊的字元。同理,把想要編成QR碼的中文字串,使用URL encoding後再當成chl參數的值,就可以順利產生出中文的QR碼了。例如,「台灣大學」這四個中文字,在URL encoding後的結果是%e5%8f%b0%e7%81%a3%e5%a4%a7%e5%ad%b8,把chl的值設成這個字串,就可以順利產生QR碼,使用行動裝置上的QR碼辨識程式進行判讀,也可以正確讀出「台灣大學」這四個字。

 

QR碼的藝術

由於QR碼的使用在行動裝置上相當方便,很多廣告或產品的包裝都會附上以QR碼編碼的公司資訊或網址,因此QR碼標籤的曝光率就變得很高。原始的QR碼標籤只有黑、白兩個顏色,每個點的邊角又十分單調,在一堆QR碼中不易讓人特別有印象、或有獨特的外觀。然而,利用一些小技巧,就可以讓QR碼的標籤變得醒目而美觀。

 

最簡單的方式就是在QR碼中加上顏色,選擇兩個深淺不同、對比明顯的顏色,取代單調的黑與白。再來可以把銳利的邊角改成圓形的邊角 (round corner)。最後可以利用QR碼的30%錯誤修正等級,把其中一部份的點改成更具美感、更柔順的線條。經過一些測試,找到圖片美觀和正確辨識的平衡點,就完成一張可以代表組織、可以傳遞資訊、又美觀的QR碼圖片了。

 

結語

QR碼的應用層面十分廣泛,如果配合金鑰加密等功能,在票券、電子金流的使用情境下,也會很便利。例如,透過QR碼顯示金鑰加密過的電子簽章確認身份,在販賣機等設備直接以記帳或線上扣款的機制完成交易、或是取代紙本的票券,直接以QR碼做為電子票券等等。另外,以美工設計過的QR碼作為組織、個人的識別,也會讓QR碼變得更多彩多姿,不再是單調的黑與白了。