<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>分类: 程序开发 /

网友品论
留下您的评论