二维码生成及微信长按识别二维码

前言

在开发网站的时候，我们往往需要用到二维码的识别，比如微信分享一个博客链接，而这个链接往往是动态的，那么如何针对每个链接生成一个二维码，通过微信扫码识别呢？

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

完成上述步骤后就可以在微信中长按识别了，建议在微信公众号信任的域名下进行测试