首頁 > web前端 > js教程 > JavaScript實作的微信二維碼圖片產生器的範例

JavaScript實作的微信二維碼圖片產生器的範例

高洛峰
發布: 2017-01-20 14:51:35
原創
2219 人瀏覽過

jquery.qrcode.js 是一個能夠在客戶端產生矩陣二維碼QRCode 的jquery插件 ,使用它可以很方便的在頁面上產生二維條碼。

QRCode.js

QRCode.js是javascript實作二維碼(QRCode)製作產生函式庫。 QRCode.js有著良好的跨瀏覽器相容性(高版本使用HTML5的 Canvas,低版本IE使用table元素繪製),而且QRCode.js沒有任何依賴。只需要引用一個JS。

此外插件是能夠獨立使用的,體積也比較小,使用gzip壓縮後才不到4kb。因為它是直接在客戶端產生的條碼,所以不會有圖片下載的過程,能夠實現快速產生。它是基於一個多語言的類別庫封裝的,也不依賴其他額外的服務。

注* 它也支援使用SVG繪製二維碼

基本使用

注* 首先需要添加對qrcode.js的引用,並創建一個空DIV

<div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script>
登入後複製

還有更多參數選

var qrcode = new QRCode("test", {
 text: "http://jindo.dev.naver.com/collie",
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H
});
登入後複製

你可以動態地改變二維碼圖片,速度很快

qrcode.clear();
qrcode.makeCode("http://naver.com");
登入後複製

瀏覽器支援

幾乎支援所有瀏覽器: IE6~10, Safari Chrome, Firefox , Android, Windows Mobile.

DEMO地址: http://davidshimjs.github.io/qrcodejs

註* 這裡有一個Server端使用Node.JS產生二維碼圖片的庫,有興趣的同學也可以研究一下: https://github.com/soldair/node-qrcode

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。

更多JavaScript實現的微信二維碼圖片產生器的範例相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板