More than code
Welcome to the website

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

前言

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

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

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

赞(0) 打赏
未经允许不得转载:李帅帅空间 » 二维码生成及微信长按识别二维码

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    很实用,步骤也很清晰,赞赞赞,收藏了~!

    豫灬木1年前 (2017-06-15)回复
  2. #2

    大神,生成二维码用的插件最低能支持到jQuery的哪个版本啊

    豫灬木1年前 (2017-06-15)回复
  3. #3

    支持jQuery的任何版本

    ice_point1年前 (2017-06-15)回复
  4. #4

    赞赞赞,建议多发发一些常用的功能以及效果[/强][/强]

    憶昔年1年前 (2017-06-22)回复
  5. #5

    已收到你的建议

    ice_point1年前 (2017-06-22)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏