如何用web api在網頁中嵌入二維碼？

標籤：二維碼   web_api   

如何用web api在網頁中嵌入二維碼？

隨著智能手機和平板電腦的日益普及，二維碼逐漸成了連結智能終端和傳統網站的橋樑。在下文中，筆者將介紹幾個即時產生二維碼的web api，希望能夠簡化web design過程中的二維碼整合工作。

1. 範例一

<img src="http://qrickit.com/api/qr?d=http://www.taobao.com" >

上述代碼產生如下的二維碼圖片：

650) this.width=650;" src="http://qrickit.com/api/qr?d=http://www.taobao.com" />

該web api還支援下面的這些特性，

• 解說文字；例如addtext=Hello World

• 文字顏色；例如txtcolor=442EFF

• 二維碼顏色；例如fgdcolor=76103C

• 背景色；例如bgdcolor=C0F912

• 二維碼尺寸；例如qrsize=300

• 圖片格式；例如t=p,指輸出PNG格式

• 錯誤修正能力；例如e=m,指15%錯誤修正能力；

針對上述的例子作如下的設定，

<img src="http://qrickit.com/api/qr?d=http://www.taobao.com&addtext=Hello+World&txtcolor=442EFF&fgdcolor=76103C        
&bgdcolor=C0F912&qrsize=300&t=p&e=m">

形成的二維碼效果如下，

650) this.width=650;" src="http://qrickit.com/api/qr?d=http://www.taobao.com&addtext=Hello+World&txtcolor=442EFF&fgdcolor=76103C%20&bgdcolor=C0F912&qrsize=300&t=p&e=m" alt="www.taobao.com&addtext=Hello+World&txtco" />

2. 範例二

Google提供了一個二維碼產生的api,通常需要提供二維碼的尺寸和產生二維碼的源資訊，具體用法如下，

<img src="http://chart.apis.google.com/chart?cht=qr&chl=http://maileba.uz.taobao.com&chs=220x220" alt="Sample chart">

一個有趣的用途是用二維碼來撥打到電話，例如下面的資訊識別出來之後，點擊相應的資訊，則會撥打相應的電話，這種方式對於那些不喜歡撥號碼的使用者應該很有用的。

http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=tel:19172073420

650) this.width=650;" src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=tel:19172073420" />

關於google api的更多用途請參考這個連結，        Google QR encoder API

3. 範例三

http://goqr.me/api/        可能是qr code api支援最全面的api，即支援線上產生，也提供線上解析，不過筆者實驗了一下，伺服器反應很慢，不適合實際應用.用法如下，

<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example">

 

 

在二維碼的實際應用中，我們往往希望在PC上也能夠解析二維碼的內容，當然如果你有網路攝影機，自然不是問題，不過即使沒有網路攝影機，也可以用軟體的方式解決，Chrome下有個外掛程式就支援右鍵解析二維碼的問題，詳細使用請參考，chrome QR code extension

本文出自 “我為楚狂” 部落格，請務必保留此出處http://xjfengck.blog.51cto.com/8231459/1423709