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

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

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

1. 範例一

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

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

該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">

形成的二維碼效果如下,

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

關於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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章