前言
在开发网站的时候,我们往往需要用到二维码的识别,比如微信分享一个博客链接,而这个链接往往是动态的,那么如何针对每个链接生成一个二维码,通过微信扫码识别呢?
jquery插件
在这里我们用到了jquery的插件https://github.com/jeromeetienne/jquery-qrcode
1.首先引入jquery和插件
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
2.创建一个div
<!--html--> <div id="qrcode"></div>
3.生成二维码
$('#qrcode').qrcode("http://lishuaishuai.com/"); //这里可以是任意内容,包括汉字
4.生成的二维码为canvas标签
5.也可对二维码的大小进行设置
$('#qrcode').qrcode({ width: 64, height: 64, text: "http://lishuaishuai.com/" });
注意:这个时候生成的二维码在微信中长安没任何反应,因为qrcode生成的是canvas标签而不是img标签
6.将canvas标签转换为img标签
//从 canvas 提取图片 image function convertCanvasToImage(canvas) { var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL // 指定格式 PNG image.src = canvas.toDataURL("image/png"); return image; } //获取网页中的canvas对象 var mycanvas=document.getElementsByTagName('canvas')[0]; //将转换后的img标签插入到html中 var img=convertCanvasToImage(mycanvas); $('#qrcode').append(img);//也可以直接覆盖原来的canvas标签,只保留img
完成上述步骤后就可以在微信中长按识别了,建议在微信公众号信任的域名下进行测试
很实用,步骤也很清晰,赞赞赞,收藏了~!
大神,生成二维码用的插件最低能支持到jQuery的哪个版本啊
支持jQuery的任何版本
赞赞赞,建议多发发一些常用的功能以及效果[/强][/强]
已收到你的建议