簡易二維碼

標籤：製作   預設   rem   element   ie8   通過   log   containe   它的   

一、什麼是二維碼   首先我們來瞭解一下，什麼是二維碼？百度百科上是這樣解釋的：二維條碼/二維碼（2-dimensional bar code）是用某種特定的幾何圖形按一定規律在平面（二維方向上）分布的黑白相間的圖形記錄資料符號資訊的；在代碼編製上巧妙地利用構成電腦內部邏輯基礎的“0”、“1”位元流的概念，使用若干個與二進位相對應的幾何形體來表示文字數值資訊，通過圖象輸入裝置或光電掃描裝置自動識讀以實現資訊自動處理：它具有條碼技術的一些共性：每種碼制有其特定的字元集；每個字元佔有一定的寬度；具有一定的校正功能等。同時還具有對不同行的資訊自動識別功能、及處理圖形旋轉變化點。  二、具體實現   那怎麼來實現製作出一個二維碼呢？有很多小夥伴是在伺服器端產生二維碼，作為前端控，小五今天就和大家磨叨一下怎麼在前端產生二維碼。其實小五還是走了捷徑，採用了一個二維碼外掛程式jquery-qrcode，可以從https://github.com/jeromeetienne/jquery-qrcode 擷取，這是一個免費開源的外掛程式。qrcode.js 是實現二維碼資料計算的核心類，jquery.qrcode.js 是把它用jquery方式封裝起來的，用它來實現圖形渲染，其實就是畫圖（支援canvas和table兩種方式） 1、支援的功能主要有：text     : " http://www.h5-share.com/ "  //設定二維碼內容    render   : "canvas",//設定渲染方式 （有兩種方式 table和canvas，預設是canvas）   width       : 256,     //設定寬度    height      : 256,     //設定高度    typeNumber  : -1,      //計算模式    correctLevel    : 0,//錯誤修正等級    background      : "#ffffff",//背景顏色    foreground      : "#000000" //前景顏色   2、使用方式非常簡單需要引入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()});    當你分別執行了上面的例子，就可以看到，二維碼使用canvas畫出來，在網頁上輸出一個canvas節點。但是用到table的話，我們會發現二維碼實際是使用table表格把每一個二維碼的點畫出來，這就導致網頁上的Dom元素會特別多。    選擇canvas，ie8一下的瀏覽器就沒辦法支援。選擇table吧，一切看起來都很美好。但在實際使用的過程中，當二維碼的內容較多時，二維碼的尺寸較小時(比如120px * 120 px)，用table來渲染，會發現產生的二維碼很難識別。    作為移動端開發人員，現代的智能機基本上都支援canvas，那我們就用canvas吧，但是新的問題又來了，就是jquery.qrcode.js預設不支援中文。    這跟js的機制有關係，jquery-qrcode這個庫是採用 charCodeAt() 這個方式進行編碼轉換的，而這個方法預設會擷取它的 Unicode 編碼，一般的解碼器都是採用UTF-8, ISO-8859-1等方式，英文是沒有問題，如果是中文，一般情況下Unicode是UTF-16實現，長度2位，而UTF-8編碼是3位，這樣二維碼的編解碼就不匹配了。 解決方式當然是，在二維碼編碼前把字串轉換成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;  }    現在中文產生二維碼解決了，但是！！！你產生的二維碼在canvas裡，怎麼儲存在本地呢？很簡單，把canvas裡的資訊轉換成img圖片就行了。// 從canvas提取圖片image    function convertCanvasToImage(canvas){     //新Image對象,可以理解為DOM;     var image = new Image();     //canvas.toDataURL返回的是一串Base64編碼的URL     image.src = canvas.toDataURL("image/png");     return image;} 三、完整樣本：html:<h1>產生簡易二維碼</h1><div>    <label for="qr_text">URL:</label>          <input id="qr_text" type="text" value="http://www.h5-share.com/" style="width:200px;" />     <button id="qr_btn" value="button">button</button> <br /></div><div id="qr_container" style="margin:auto; position:relative;"></div><div id="imgDiv"></div>  js：$(document).ready(function(){    // 點擊產生二維碼    $(‘#qr_btn‘).click(function(){          /*如果已產生過二維碼，則刪除二維碼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();        // 採用Regex判斷輸入的內容是否是中文        var reg=/^[\u0391-\uFFE5]+$/;          if(valText!=""&&!reg.test(valText)){             // 如果不是中文，直接將輸入的內容轉換成二維碼            $(‘#qr_container‘).qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:valText});         }else{            // 如果是中文，直接將輸入的內容字串轉換成UTF-8，然後再轉換成二維碼            $(‘#qr_container‘).qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)});         }        //擷取網頁中的canvas對象        var mycanvas1=document.getElementsByTagName(‘canvas‘)[0];        //將轉換後的img標籤插入到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對象，可以理解為DOM        var image = new Image();        // canvas.toDataURL 返回的是一串Base64編碼的URL        // 指定格式PNG        image.src = canvas.toDataURL("image/png");        return image;    }});

　　示範：http://www.h5-share.com/articles/201701/createqr.html

簡易二維碼