登錄 / 注冊(cè)

生成簡(jiǎn)易二維碼

0評(píng)論 2017-04-19 18:47:12

收藏 | 點(diǎn)贊 

  
現(xiàn)在二維碼越來(lái)越流行啦，支付掃二維碼，關(guān)注掃二維碼，抽獎(jiǎng)掃二維碼......，總之，二維碼無(wú)處不在，那怎么制作一個(gè)二維碼呢？我們今天就此問(wèn)題一起來(lái)討論一下
 
一、什么是二維碼
   首先我們來(lái)了解一下，什么是二維碼？百度百科上是這樣解釋的：二維條碼/二維碼（2-dimensional bar code）是用某種特定的幾何圖形按一定規(guī)律在平面（二維方向上）分布的黑白相間的圖形記錄數(shù)據(jù)符號(hào)信息的；在代碼編制上巧妙地利用構(gòu)成計(jì)算機(jī)內(nèi)部邏輯基礎(chǔ)的“0”、“1”比特流的概念，使用若干個(gè)與二進(jìn)制相對(duì)應(yīng)的幾何形體來(lái)表示文字?jǐn)?shù)值信息，通過(guò)圖象輸入設(shè)備或光電掃描設(shè)備自動(dòng)識(shí)讀以實(shí)現(xiàn)信息自動(dòng)處理：它具有條碼技術(shù)的一些共性：每種碼制有其特定的字符集；每個(gè)字符占有一定的寬度；具有一定的校驗(yàn)功能等。同時(shí)還具有對(duì)不同行的信息自動(dòng)識(shí)別功能、及處理圖形旋轉(zhuǎn)變化點(diǎn)。 
 
二、具體實(shí)現(xiàn)
   那怎么來(lái)實(shí)現(xiàn)制作出一個(gè)二維碼呢？有很多小伙伴是在服務(wù)器端生成二維碼，作為前端控，小五今天就和大家磨叨一下怎么在前端生成二維碼。其實(shí)小五還是走了捷徑，采用了一個(gè)二維碼插件jquery-qrcode，可以從https://github.com/jeromeetienne/jquery-qrcode 獲取，這是一個(gè)免費(fèi)開(kāi)源的插件。qrcode.js 是實(shí)現(xiàn)二維碼數(shù)據(jù)計(jì)算的核心類，jquery.qrcode.js 是把它用jquery方式封裝起來(lái)的，用它來(lái)實(shí)現(xiàn)圖形渲染，其實(shí)就是畫圖（支持canvas和table兩種方式）
 
1、支持的功能主要有：
text     : " http://www.h5-share.com/ "  //設(shè)置二維碼內(nèi)容    
render   : "canvas",//設(shè)置渲染方式 （有兩種方式 table和canvas，默認(rèn)是canvas）   
width       : 256,     //設(shè)置寬度    
height      : 256,     //設(shè)置高度    
typeNumber  : -1,      //計(jì)算模式    
correctLevel    : 0,//糾錯(cuò)等級(jí)    
background      : "#ffffff",//背景顏色    
foreground      : "#000000" //前景顏色
 
2、使用方式非常簡(jiǎn)單
需要引入jQuery 和 jquery.qrcode.js
①$('#qr_container').qrcode({render:"table",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});
 
②$('#qr_container').qrcode({render:"canvas",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});
 
   當(dāng)你分別執(zhí)行了上面的例子，就可以看到，二維碼使用canvas畫出來(lái)，在網(wǎng)頁(yè)上輸出一個(gè)canvas節(jié)點(diǎn)。但是用到table的話，我們會(huì)發(fā)現(xiàn)二維碼實(shí)際是使用table表格把每一個(gè)二維碼的點(diǎn)畫出來(lái)，這就導(dǎo)致網(wǎng)頁(yè)上的Dom元素會(huì)特別多。
 
   選擇canvas，ie8一下的瀏覽器就沒(méi)辦法支持。選擇table吧，一切看起來(lái)都很美好。但在實(shí)際使用的過(guò)程中，當(dāng)二維碼的內(nèi)容較多時(shí)，二維碼的尺寸較小時(shí)(比如120px * 120 px)，用table來(lái)渲染，會(huì)發(fā)現(xiàn)生成的二維碼很難識(shí)別。
 
   作為移動(dòng)端開(kāi)發(fā)者，現(xiàn)代的智能機(jī)基本上都支持canvas，那我們就用canvas吧，但是新的問(wèn)題又來(lái)了，就是jquery.qrcode.js默認(rèn)不支持中文。
 
   這跟js的機(jī)制有關(guān)系，jquery-qrcode這個(gè)庫(kù)是采用 charCodeAt() 這個(gè)方式進(jìn)行編碼轉(zhuǎn)換的，而這個(gè)方法默認(rèn)會(huì)獲取它的 Unicode 編碼，一般的解碼器都是采用UTF-8, ISO-8859-1等方式，英文是沒(méi)有問(wèn)題，如果是中文，一般情況下Unicode是UTF-16實(shí)現(xiàn)，長(zhǎng)度2位，而UTF-8編碼是3位，這樣二維碼的編解碼就不匹配了。
 
解決方式當(dāng)然是，在二維碼編碼前把字符串轉(zhuǎn)換成UTF-8，具體代碼如下：
function utf16to8(str) {  
    var out, i, len, c;  
    out = "";  
    len = str.length;  
    for(i = 0; i < len; i++) {  
    c = str.charCodeAt(i);  
    if ((c >= 0x0001) && (c <= 0x007F)) {  
        out += str.charAt(i);  
    } else if (c > 0x07FF) {  
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    } else {  
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    }  
    }  
    return out;  
}
 
   現(xiàn)在中文生成二維碼解決了，但是?。?！你生成的二維碼在canvas里，怎么保存在本地呢？很簡(jiǎn)單，把canvas里的信息轉(zhuǎn)換成img圖片就行了。
// 從canvas提取圖片image   
 function convertCanvasToImage(canvas){
     //新Image對(duì)象,可以理解為DOM;
     var image = new Image();
     //canvas.toDataURL返回的是一串Base64編碼的URL
     image.src = canvas.toDataURL("image/png");
     return image;
}
 
三、完整示例：
html:
生成簡(jiǎn)易二維碼



    URL:      
     
    button 

 

 

js：

$(document).ready(function(){
    // 點(diǎn)擊生成二維碼
    $('#qr_btn').click(function(){  
        /*如果已生成過(guò)二維碼，則刪除二維碼img圖片和canvas，重新生成；反之，則直接生成二維碼*/
        if($('#imgDiv:has(img)').length!=0){
            $('#imgDiv img').remove();
            $('canvas').remove();
            createQr();
        }else{
            createQr();
        }
    });
    // 生成二維碼
    function createQr(){
        document.createElement('canvas').getContext('2d');
        var valText = $('#qr_text').val();

        // 采用正則表達(dá)式判斷輸入的內(nèi)容是否是中文
        var reg=/^[\u0391-\uFFE5]+$/; 
         if(valText!=""&&!reg.test(valText)){ 
            // 如果不是中文，直接將輸入的內(nèi)容轉(zhuǎn)換成二維碼
            $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:valText});
         }else{
            // 如果是中文，直接將輸入的內(nèi)容字符串轉(zhuǎn)換成UTF-8，然后再轉(zhuǎn)換成二維碼
            $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)});
         }

        //獲取網(wǎng)頁(yè)中的canvas對(duì)象
        var mycanvas1=document.getElementsByTagName('canvas')[0];

        //將轉(zhuǎn)換后的img標(biāo)簽插入到html中
        var img = convertCanvasToImage(mycanvas1);
        $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
    }

    // 字符編碼
    function utf16to8(str) {  
        var out, i, len, c;  
        out = "";  
        len = str.length;  
        for(i = 0; i < len; i++) {  
        c = str.charCodeAt(i);  
        if ((c >= 0x0001) && (c <= 0x007F)) {  
            out += str.charAt(i);  
        } else if (c > 0x07FF) {  
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
        } else {  
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
        }  
        }  
        return out;  
    }

    //從canvas中提取圖片image
    function convertCanvasToImage(canvas) {
        //新Image對(duì)象，可以理解為DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64編碼的URL
        // 指定格式PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
});

 


0 條評(píng)論

分享
公眾號(hào)
公眾號(hào)二維碼

? 2017 志進(jìn)科技 版權(quán)所有 上海志進(jìn)信息科技有限公司 備案號(hào)滬ICP備14017051號(hào)-2