用純JavaScript實現的微信二維碼圖片生成器

jopen 9年前發布 | 51K 次閱讀 二維碼 條形碼/二維碼開發包
 

注* 之前的二給碼分享功能大多是由后端實現的,對服務器的負載較重,這里有一個前端實現的版本,而且性能還可以。

QRCode.js

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

注* 它也支持使用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, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile.

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

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

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!