jQuery生成二维码

来源：互联网发布：有没有像淘宝联盟一样编辑：程序博客网时间：2024/05/20 02:28

jQuery.qrcode

实例下载

jQuery生成二维码实例下载

<html>
  <head>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="jquery.qrcode-0.12.0.min.js"></script>
    <script type="text/javascript">
    
     $(function(){
      $("#bcTarget").barcode("123456789", "codabar",{barWidth:2, barHeight:80});
      //二维码 
      $("#two").qrcode({
    "render": "div",
    "size": 100,
    "color": "#3a3",
    "text": "http://liubo.club"
      });
});
  
    </script>
  </head>
  <body>
 
 二维码
 <br>
<div id="two"></div>
 </body>
</html>

<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-barcode-2.0.1.js"></script>
<script type="text/javascript" src="jquery.qrcode-0.12.0.min.js"></script>
    <script type="text/javascript">
    //中文问题
    function toUtf8(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;      
}   
     $(function(){
      $("#bcTarget").barcode("123456789", "codabar",{barWidth:2, barHeight:80});
      //二维码 
      $("#two").qrcode({
    "render": "div",
    "size": 100,
    "color": "#3a3",
    "text": "http://liubo.club"
      });
      //生成条形码
      $("#genid").click(function(){
      var code = $("#orgcode").val();
      $("#mycode").barcode(code, "codabar",{barWidth:2, barHeight:80});
      });
      //生成二维码
       $("#twobtn").click(function(){
      var qrcode = $("#twotext").val();
      qrcode =toUtf8(qrcode);
      $("#twoimg").qrcode({
    "render": "div",
    "size": 100,
    "color": "#3a3",
    "text": qrcode
      });
      });
});
  
    </script>
  </head>
  <body>
 首先自动生成条形码 123456789
 <div id="bcTarget"></div>
 输入要生成条形码的数字
 <input type="text" id ="orgcode">
 <div id="mycode"> </div> 
 <input type="button"  value="生成条形码" id="genid"/>
<br>
<p>
 liubo.club 二维码
 <br>
<div id="two"></div>
<p>
输入内容生成二维码
<input type="text" id="twotext"/>
<br>
<input type="button" value="生成二维码" id="twobtn"/>
<div id="twoimg"> </div>
 </body>
</html>

关于生成的选项

Usage

The syntax is very simple. Just use

$(selector).qrcode(options);

to append a new generated HTML element representing the QR code to the selected elements. If the selected element already is a canvas element, then the QR code is drawn onto it.

Options

The available options and their default values are:

{    // render method: 'canvas', 'image' or 'div'    render: 'canvas',    // version range somewhere in 1 .. 40    minVersion: 1,    maxVersion: 40,    // error correction level: 'L', 'M', 'Q' or 'H'    ecLevel: 'L',    // offset in pixel if drawn onto existing canvas    left: 0,    top: 0,    // size in pixel    size: 200,    // code color or image element    fill: '#000',    // background color or image element, null for transparent background    background: null,    // content    text: 'no text',    // corner radius relative to module width: 0.0 .. 0.5    radius: 0,    // quiet zone in modules    quiet: 0,    // modes    // 0: normal    // 1: label strip    // 2: label box    // 3: image strip    // 4: image box    mode: 0,    mSize: 0.1,    mPosX: 0.5,    mPosY: 0.5,    label: 'no label',    fontname: 'sans',    fontcolor: '#000',    image: null}

0 0