JS生成二维码教程-CSDN博客

1.引入的js包：
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>   
<script type="text/javascript" src="jquery.qrcode.min.js"></script>


2.生成二维码的例子

<div id="qrcodeCanvas"></div>  
<script type="text/javascript">  
    $(document).ready(function() {  
        $("#qrcodeCanvas").qrcode({  
            render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好  
            text : "https://blog.csdn.net/lzc1993lzc",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接  
            width : "200",               //二维码的宽度  
            height : "200",              //二维码的高度  
        });  
    });  
</script> 








3.全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>js生成二维码</title>  
  
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>   
<script type="text/javascript" src="jquery.qrcode.min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function() {  
        $("#qrcodeCanvas").qrcode({  
            render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好  
            text : "https://blog.csdn.net/lzc1993lzc",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接  
            width : "200",               //二维码的宽度  
            height : "200",              //二维码的高度  
        });  
    });  
</script>  
  
</head>  
<body>  
    <center>  
      <h2>js生成二维码(仅支持英文)</h2>  
      <div id="qrcodeCanvas"></div>  
    </center>  
</body>  
</html>



4.如果希望生成的二维码支持中文，那么就需要对传入的text文字转换成UTF-8，转换方法如下：

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;    
} 

调用示例1：

$(document).ready(function() { 
	var str = toUtf8("测试中文"); 
    $("#qrcodeCanvas").qrcode({  
       render : "canvas",   
       text : str,    
       width : "200",               //二维码的宽度  
       height : "200",              //二维码的高度  
    });  
}); 

调用示例2：

var str = toUtf8("测试中文"); 
$('#code').qrcode(str);
效果图