运用js生成二维码（工作记录）

最新推荐文章于 2024-06-30 21:26:58 发布

叩叮ING

最新推荐文章于 2024-06-30 21:26:58 发布

阅读量647

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/weixin_43966996/article/details/127537790

版权

工作中需要一个简单的二维码生成功能，此处运用JQuery+jquery.qrcode实现；

需要资源：jquery.js + jquery.qrcode.min.js （网上搜索即可获取）

准备工作

页面设计代码：

需要创建一个div存放生成二维码，其中id命名为qrcode的div不可缺少。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!--此处为显示二维码的div-->
		<div style="width: 100%;height: 350px;text-align: center">
	        <div id="qrcode" style="width: 100%;height: 350px;background-repeat: no-repeat;text-align: center">
	
	        </div>
        </div>
        <input type="button"  value="运行生成二维码" onclick="creatQrcode()"/>
	</body>
</html>

引入资源

<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>

注：必须先引入jquery再引入qrcode

准备工作完成，开始生成。

非中文生成二维码

 function creatQrcode(){
  	 var qr=$("#qrcode").qrcode({
            render: "canvas",//渲染方式，只是canvas、table
            text: "csdn yyds",//二维码的内容
            width: "300",//二维码宽度
            height: "300",//二维码高度
            background: "white",//二维码背景色
            foreground: "black"//二维码前景色
        });
  	
  }

直接调用方法即可在页面对应div生成二维码；

如果二维码中含有中文，直接调用上述方法将会产生乱码，此时需要对中文进行转换。

含中文生成二维码

//中文支持
    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;
    }

//生成二维码
    function mkqr(){
        var congtent=Base.getValue("name");
        console.log(congtent);
        var qr=$("#qrcode").qrcode({
            render: "canvas",//渲染方式，只是canvas、table
            text: utf16to8(congtent),//二维码的内容
            width: "300",//二维码宽度
            height: "300",//二维码高度
            background: "white",//二维码背景色
            foreground: "black"//二维码前景色
        });
    }

生成二维码的text参数中调用中文转换即可实现。