JS实现简易二维码生成

最新推荐文章于 2023-10-10 19:15:00 发布

南窗木心

最新推荐文章于 2023-10-10 19:15:00 发布

阅读量1.3k

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_41677788/article/details/110231871

版权

只需要使用一些封装好的依赖包，JS便可以很方便的生成二维码

步骤：

按照顺序引入相关的依赖包 （需要的依赖包下载地址放在了这篇文章举例生成的二维码中）
```
 1.引入Jquery.js文件
 2.引入jquery.qrcode.js文件
 3.引入支持中文的编码js文件 (utf.js)
```
确定要展示二维码的HTML元素

得到一个二维码生成的JSON对象

 var config  = {
         width:数字,//值是number类型, 表示的单位是px  必须传递
         height:数字,//值是number类型, 表示的单位是px  必须传递 
         text:"内容",//text就表示二维码中存储的数据  必须传递
         correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数
         background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数
         foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数
         render:"绘制模式"//取值:table/canvas , 默认table 可选参数
     };

通过qrcode（）函数，给HTML元素绑定二维码

//对HTNL元素绑定二维码
$("#qrcode").qrcode(qrcode_config);

生成的二维码：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码生成</title>
    <script src="js/jquery2.1.4.js"></script>
    <script src="js/jquery.qrcode.js"></script>
    <script src="js/utf.js"></script>
</head>
<body>
    <div id="qrcode"></div>
    <script>
        //设置二维码规格
        var qrcode_config = {
            width:200,
            height:200,
            text:"生成二维码所需的资源URI：https://itdage.cn/file/qrcode.zip"
            //correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数
            //background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数
            //foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数
            //render:"绘制模式"//取值:table/canvas , 默认table 可选参数
        };
        //对HTNL元素绑定二维码
        $("#qrcode").qrcode(qrcode_config);


    </script>

</body>
</html>