Home » JavaScript 應用

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

[ 日期： | 瀏覽：44,054 | 迴響：17 ]

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
1
2
3
4
5
6
7
8

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<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

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

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

    • 我測試用中文產生 QRCode 圖片後另存再上傳解碼是正常的哩。我有把我測試的圖片寄給你了!

  4. 請問男丁大大：
    這個API有提供一維條碼的功能嗎?
    我想說變化一下功能...
    既然有二維那是否可以順便產生一維呢?

    問題很多的小弟><"

  5. 你好，如果URL中带有&符合的话，生成的二维码会把&后的参数忽略了，，有什么办法可以解决吗？

    谢谢！

    • 要把內容用 encodeURIComponent() 編碼一下才會比較保險!
      你試一下我第二個範例, 然後輸入帶有 & 的字串, 應該是能順利產生的.

    • 亂數是可以產生, 可以利用 Math.random() 再搭配陣列或是字元轉換的方式來產生亂數字串
      接著再直接套產生圖片的程式就可以了

發表迴響