經過二維碼開放平臺的API快速生成二維碼

       如今不少網站都有經過掃二維碼用手機鏈接的功能,聯圖網(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

相關文章
相關標籤/搜索