关于 jquery.qrcode.min.js 生成二维码

最新推荐文章于 2025-06-21 10:56:22 发布

原创最新推荐文章于 2025-06-21 10:56:22 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何利用jquery.qrcode.min.js这个JavaScript库生成二维码，包括引入JS文件，配置div元素，以及如何将base64编码的图片转换为二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入js

<script type="text/javascript" src="${web_domain}/resources/plugins/jquery.qrcode.min.js"></script>

2.设置div

 <div id="qrcode" style="margin-left: 52px">
            <form:hidden path="code" class="layui-input"   lay-verify="required"  placeholder="门禁MAC码" id="number"/>
 </div>
 <img id='img'  style="margin-left: 52px"/>

3.生成二维码

$(function(){
        var str = $("#number").val();

        var qrcode = $('#qrcode').qrcode({
            render: "canvas",//渲染方式 “table”，canvas 两种
            width: 150, //宽度
            height:150, //高度
            typeNumber  : -1,      //计算模式
            background      : "#ffffff",//背景颜色
            foreground      : "#000000" ,//前景颜色
            text:str    //任意内容
        }).hide();
        var canvas = qrcode.find("canvas").get(0);          //得到id为canvas的画布元素
        var strDataURI = canvas.toDataURL('/image/jpg')   //转化为base64编码的数据
        $("#img").attr("src",strDataURI);
        var imageData = strDataURI.substring(22);       //把冗余字段去掉 "data:image/png;base64,"

        $.ajax({                    //通过ajax将二维码传到后台 通过base64解析成图片
            type : 'post',
            url : '${web_domain}/business/accessControl/CausalImgJson',
            data: 'dataURL=' + imageData,
            async : false, //同步方式
            success : function() {

            }
        });

    })

base64解析图片之前的博客有相关的代码，希望能有用处。