前端生成二维码

最新推荐文章于 2024-03-12 23:01:37 发布

MMRS

最新推荐文章于 2024-03-12 23:01:37 发布

阅读量1.9k

点赞数

分类专栏： jquery 文章标签： jquery 二维码前端

本文链接：https://blog.csdn.net/mmrsdym/article/details/47147293

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直接上代码吧，jquery.qrcode的源文件下载地址：https://github.com/jeromeetienne/jquery-qrcode

是基于jquery实现的，jquery.qrcode又是在qrcode.js的基础上封装的，以下是测试代码，可直接使用。

<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
<!--注意加上utf-8的申明，不然测试中文字符串的转换时，扫描后的中文字符是乱码,会误以为是转换代码问题。-->
<meta charset="utf-8" />
</head>
<body>
<script src="../src/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<!-- <script type="text/javascript" src="../src/jquery.qrcode.js"></script>
<script type="text/javascript" src="../src/qrcode.js"></script> -->
<div style="width:800px;margin:10px auto;text-align:center;">
    <p>以table形式渲染，兼容低端浏览器</p>
    <div id="qrcodeTable"></div>
    <p>以canvas来渲染，性能好，不兼容低端浏览器</p>
    <div id="qrcodeCanvas"></div>
    <p>二维码测试中文字符串</p>
    <div id="code"></div>
</div>
<script>
   //中文字符串转换
    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(){
        var str = toUtf8("二维码测试");
        //扫码后显示字符串
        $("#code").qrcode({width: 200,height: 200,text: str});
    });
    
   //扫描后跳转到指定网页
	$('#qrcodeTable').qrcode({
		render	: "table",
		text	: "https://www.baidu.com"
	});	
	$('#qrcodeCanvas').qrcode({
		text	: "https://www.baidu.com"
	});	
</script>
</body>
</html>

1.为什么要中文转换？

答：jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。

2.jquery.qrcode可设置的参数有哪些？

答：看jquery.qcode的源代码可知有如下参数可供设置

options	= $.extend( {}, {
			render		: "canvas",
			width		: 256,
			height		: 256,
			typeNumber	: -1,
			correctLevel	: QRErrorCorrectLevel.H,
                        background      : "#ffffff",
                        foreground      : "#000000"
		}, options);

3.二维码渲染的方式有canvas和table，两者的区别？

答：以table形式渲染，兼容低端浏览器（比如不支持canvas的浏览器）但性能不好；以canvas来渲染，性能好但不兼容低端浏览器。

4.扫码后的形式有两种

答：

var str = toUtf8("二维码测试");
        //扫码后显示字符串
        $("#code").qrcode({width: 200,height: 200,text: str});

//扫描后跳转到指定网页
	$('#qrcodeTable').qrcode({
		render	: "table",
		text	: "https://www.baidu.com"
	});

参考来自：http://www.codesky.net/article/201308/182043.html

MMRS

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端生成二维码

直接上代码吧，jquery.qrcode的源文件下载地址：https://github.com/jeromeetienne/jquery-qrcode是基于jquery实现的，jquery.qrcode又是在qrcode.js的基础上封装的，以下是测试代码，可直接使用。basic example --> 以table形式渲染，兼容低端浏览器
复制链接

扫一扫