在网页中使用jQuery-qrcode生成二维码以及中文支持解决方案

最新推荐文章于 2024-04-18 19:32:14 发布

G_Youda

最新推荐文章于 2024-04-18 19:32:14 发布

阅读量1.8k

点赞数 1

分类专栏： Web 文章标签： jQuery-qrcode jsp html 二维码中文乱码

本文链接：https://blog.csdn.net/g_youda/article/details/61928055

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在网页中也会经常用到二维码，比如说手机端扫码登录许可，APP下载等。但是如果使用第三方服务做的话会偶尔因为网络等其他原因造成生成失败。

所以比较推荐jQuery-QRCode生成，这是一个完全依靠浏览器生成二维码的方案，比较可靠。

以下为使用说明的GitHub地址：https://github.com/jeromeetienne/jquery-qrcode

但是此方法不支持中文，还是有一定的缺陷的，所以参照了网上一些大牛的关于中文支持的解决方案，以下为示例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>生成二维码</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.qrcode.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;      
	}  
   
    </script>
    
  </head>
  
  <body>
    	使用原生jQuery生成的二维码如下: <br>
    	<div id="qrcode"></div>
    	使用原生jQuery生成的不支持中文的二维码如下: <br>
    	<div id="qrcode1"></div>
    	进行转换生成的支持中文的二维码如下: <br>
    	<div id="code"></div>
    	<script type="text/javascript">
    	jQuery('#qrcode').qrcode({width: 256,height: 256,text: "http://blog.csdn.net/G_Youda"});
    	jQuery('#qrcode1').qrcode({width: 256,height: 256,text: "我不支持中文"});
    	
    	var str = toUtf8("我可以支持中文");   
		jQuery('#code').qrcode({width: 256,height: 256,text: str});  
    	</script>
    	 
    
  </body>
</html>

生成二维码的参数说明：

{  
    // render 方式: '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  
<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;      
	}  
   
    </script>

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 }
识别中文原理：
我们试验的时候发现不能识别中文内容的二维码，通过查找多方资料了解 到，jquery-qrcode是采用charCodeAt()方式进行编码转 换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。您可以通过以下函 数来转换中文字符串：
<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;      
	}  
   
    </script>

浏览器打开效果：