如今不少網站都有經過掃二維碼用手機鏈接的功能,聯圖網(http://www.liantu.com/pingtai/)的二維碼開放平臺開放了一個生成二維碼圖片的Api,挺方便使用的。閒着無聊,寫了個前臺快速生成二維碼的方法。
javascript
html代碼以下:(二維碼將生成在這div下)php
<div id='qrcode'></div>
js代碼以下:html
var qrCode = { //初始化屬性 jsonData:{ content : '', //內容,可爲utl,如html://www.baidu.com 或文字,圖片信息之類的 logo : '', //二維碼中間顯示圖片, 如:html://wwww.xxx.com/imgname.jpg bgColor : '', //背景顏色, 格式 :顏色代碼 如fffaf0 fgColor : '', //前景顏色,即條紋顏色 格式 :同上 gcColor : '', //漸變顏色, 格式 : 同上 ptColor : '', //定位點顏色(外框) 格式:同上 inptColor : '', //定位點顏色(內點) 格式:同上 eLevel : '', //糾錯等級, 可用值:h\q\m\l 格式 : 單個字符 如 h w : '', //寬度尺寸 格式:像素值 如 200 m : '' //外邊距尺寸 格式:如上 }, //獲取二維碼圖片 getQrcode:function(divId){ //javascript寫法 var divElement = document.getElementById(divId), imgHtml = this.setImgHeml(this.jsonData); divElement.innerHTML = imgHtml; /* //jQuery寫法 var imgHtml = this.setImgHeml(this.jsonData); $("#"+divId).append(imgHtml);*/ }, //構造圖片 setImgHeml:function(jsonData){ var imgHtml = "<img src='http://qr.liantu.com/api.php?"; imgHtml += jsonData.content?"&text="+jsonData.content:""; imgHtml += jsonData.logo?"&logo="+jsonData.logo:""; imgHtml += jsonData.bgColor?"&bg="+jsonData.bgColor:""; imgHtml += jsonData.fgColor?"&fg="+jsonData.fgColor:""; imgHtml += jsonData.gcColor?"&gc="+jsonData.gcColor:""; imgHtml += jsonData.ptColor?"&pg="+jsonData.ptColor:""; imgHtml += jsonData.inptColor?"&inpt="+jsonData.inptColor:""; imgHtml += jsonData.eLevel?"&el="+jsonData.eLevel:""; imgHtml += jsonData.w?"&w="+jsonData.w:""; imgHtml += jsonData.m?"&m="+jsonData.m:""; imgHtml += "'>"; return imgHtml; } };
調用很簡單,只須要經過設置qrCode的jsonData中你須要的屬性就能夠了,不須要能夠不設置java
//設置內容爲當前url路徑 qrCode.jsonData.content = window.location.href; //設置寬度尺寸 qrCode.jsonData.w = 500; //設置外邊框距 qrCode.jsonData.m = 50; //在id爲qrcode的元素下生成二維碼圖片 qrCode.getQrcode('qrcode');
經過這幾行設置代碼,就能夠輕鬆地生成二維碼了。json