<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>
分类: 程序开发 /
网友品论
留下您的评论