<script src="./views/mobile/jwkh/js/jquery.qrcode.min.js" type="text/javascript"></script>
<input type="button" value="二维码" id="bt" />: <span id="count"></span>
<br>
<div id="code"></div>
{php  $urld="http://esino.cnkingwa.com/index.php?c=jwkh&a=qiandao&id=".$id; }
<script type="text/javascript">
var i=0;
$("#bt").click(function(){
$("#count").text(++i);
$("#code").text("");//初始化二维码的位置
jQuery("#code").qrcode({
render:'canvas',//也可以替换为table
height:150,
width:150,
text:'{$urld}'     //二维码内置内容,如果时URL形式一般浏览器会自动加载
})
})
</script>

JQuery qrcode插件生成二维码,并转换为image图片可识别

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接生成二维码,并可识别</title>
    <!--分别引入两个js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
<!--定义两个容器,class命名的用来存放链接用,id命名的用来展示可识别的二维码-->
    <div>www.baidu.com</div>
    <div id="erweimaImg"></div>
    
    <script>
        $(function() {
             $(".erweima").qrcode({   //选择存放链接容器
              width: 120, //width height如果不写默认是 256 256 
              height:120,
              text: $('.erweima').html() //将链接容器的内容赋值给text
           }); 
           //定义方法
            function canvasToImage(canvas) {
                var image = new Image();
                // 指定格式 PNG 图片后缀可自定义
                image.src = canvas.toDataURL("image/png");
                return image;
            }

            //找到需要转换的canvas
            var mycanvas1 = document.getElementsByTagName('canvas')[0];

            //进行方法转换
            var img = canvasToImage(mycanvas1);

            //将转换后的img标签插入到显示容器中
            $('#erweimaImg').append(img);
        })
    </script>
</body>
</html>


实际使用时,class命名用来存放链接的div需要加上display:none,将第一个canvas生成二维码隐藏,留下image标签的

 <div class="erweima" style="display: none">www.baidu.com</div>

jquery-qrcode-master.zip


分类: 程序开发 /

网友品论

留下您的评论