[Js]利用 Google Chart API 來產生 QRCode

Google Chart API 是一組能讓使用者只透過 URL 傳遞參數就能快速產生各種圖表的 API。可產生的圖片類型包括線形圖、長條圖與圓餅圖，同時也能指定的每種圖片屬性，例如大小、色彩與標籤等。

在使用 Google Chart API 時，使用者只需要指定要產生那種圖表跟相關的資料數據透過 URL 的方式呼叫就可以了。使用時的格式應為：

檢視原始碼 JavaScript

1	http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

只要把 URL 加在 IMG 的 src 屬性中就能顯示出相對應的圖表圖片(PNG)。

此次要介紹的是屬於線形圖之一的-QR碼(QRCode)。QR 是英文「Quick Response」的縮寫，是二維條碼的一種，1994 年由日本 Denso-Wave 公司發明。其它更多的解釋可以參考維基百科 - QR碼。

在稍微了解什麼是QR碼之後，我們就來看一下怎樣使用 Google Chart API 來產生一張QR碼圖片。

它的格式為：

檢視原始碼 JavaScript

1	http://chart.apis.google.com/chart?cht=qr&chl={內容}&chs={寬X高}

假設我要把 abgne.tw 內容變成QR碼圖片的話，就可以把 IMG 的 src 設定成：

檢視原始碼 JavaScript

1	http://chart.apis.google.com/chart?cht=qr&chl=abgne.tw&chs=120x120

是不是很簡單呢？！不過內容的部份是需要 UTF8 的 URL 編碼文字，例如空格就要寫成 %20。因此若沒經過編碼的話，中文可能會無法順利的產生。

所以，我們可用的 encodeURIComponent() 函式來幫我們做編碼的動作，同時寫成函式也較方便使用(雖然只有幾行)：

檢視原始碼 JavaScript

function QRCode(content, width, height){
	// 預設寬高為 120x120
	width = !!width ? width : 120 ;
	height = !!height ? height : 120;
	// 編碼
	content = encodeURIComponent(content);
    return 'http://chart.apis.google.com/chart?cht=qr&chl=' + content + '&chs=' + width + 'x' + height;
}

使用時只要把內容跟寬高傳給 QRCode() 函式就可以了，它就會把編碼後且組出的 URL 回傳給我們來使用：

檢視原始碼 JavaScript

<script type="text/javascript">
	function QRCode(content, width, height){
		// 預設寬高為 120x120
		width = !!width ? width : 120 ;
		height = !!height ? height : 120;
		// 編碼
		content = encodeURIComponent(content);
		return 'http://chart.apis.google.com/chart?cht=qr&chl=' + content + '&chs=' + width + 'x' + height;
	}
 
	window.onload = function(){
		document.getElementById('qrcode').onclick = function(){
			var msg = document.getElementById('content');
			var imgSrc = QRCode(msg.innerHTML, 240, 240);
			msg.innerHTML = '<img src="' + imgSrc + '" alt="" />';
		};
	};
</script>
 
<body>
	<input type="button" value="QRCode" id="qrcode" />
	<div id="content">
		Google Chart API 是一組能讓使用者只透過 URL 傳遞參數就能快速產生各種圖表的 API。可產生的圖片類型包括線形圖、長條圖與圓餅圖，同時也能指定的每種圖片屬性，例如大小、色彩與標籤等。
	</div>
</body>

關於其它更進階的QR碼參數可以參考：Google Chart API - QR碼。如果要把QR碼圖片解碼內容的話，可以把圖片傳到 ZXing Decoder Online 來做解碼的動作。

範例瀏覽：
http://demonstration.abgne.tw/javascript/0026/0026_1.html
http://demonstration.abgne.tw/javascript/0026/0026_2.html

也許您對這些文章也有興趣

11 筆針對 [Js]利用 Google Chart API 來產生 QRCode 的迴響

aj5488 於 2009-12-28 17:22:13 說：

請問男丁大
是否二維條碼只能編碼?
解碼都需使用手機?
還是有辦法用別的辦法解碼呢?

回覆 ↓
- 男丁格爾於 2009-12-28 19:56:11 說：
  
  能產生就一定能解的啦~~文章的最後面不是有介紹到一個可以解的網站嗎？
  http://zxing.org/w/decode.jspx
  
  回覆 ↓
akan 於 2011-12-29 15:47:38 說：

请问一个问题，
二维码中包含有中文，按照您的方法，将中文转换为UTF8，，
可问题是：
使用http://zxing.org/w/decode.jspx网站解码有两种方法可以选择，
如果是直接提交二维码的google地址进行解码，则可以正常显示中文，
如果是用提交本地二维码图片的方法，则中文显示为乱码？
不知您是否有留意到这个问题？
2009年的帖子了，呵呵，

回覆 ↓
- 男丁格爾於 2011-12-30 19:56:45 說：
  
  我測試用中文產生 QRCode 圖片後另存再上傳解碼是正常的哩。我有把我測試的圖片寄給你了!
  
  回覆 ↓
如娃於 2012-03-13 14:38:46 說：

男丁大大：
想請問，如何產生文字可連結的QRCode，謝謝！

回覆 ↓
- 男丁格爾於 2012-03-14 13:19:41 說：
  
  你是要 QRCode 內容是超鏈結嗎?那你可以輸入像是 http://abgne.tw 後再進行編碼, 當 QRCode Reader 辨視出來後, 就看它內建的處理方式。通常是會問說要不要打開瀏覽器前往啦!!
  
  回覆 ↓
  - 如娃於 2012-03-16 11:23:21 說：
    
    男丁大大：
    可是辨別出來都是純文字,沒有連結,在輸入框裡應該怎麼打才對??
    請給範例或語法,謝謝！
    
    回覆 ↓
    - 男丁格爾於 2012-03-16 16:25:20 說：
      
      你是用什麼來辨識的?
      
      回覆 ↓
      - 如娃於 2012-03-20 16:51:50 說：
        
        是用手機!!
      - 如娃於 2012-03-20 16:58:34 說：
        
        是用手機,可以成功了!!
        
        謝謝男丁大大!!
      - la 於 2012-05-17 17:27:39 說：
        
        您這個回復的功能真棒